小程序流程商城优点_Vue图片浏览组件v

摘要: Vue照片访问部件v-viewer使用方法剖析【适用转动、放缩、旋转等实际操作】 本文关键详细介绍了Vue照片访问部件v-viewer使用方法,融合案例方式剖析了v-viewer的基本要素与应用方式...

Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】       这篇文章主要介绍了Vue图片浏览组件v-viewer用法,结合实例形式分析了v-viewer的基本功能与使用方法,包括旋转、缩放、翻转等操作技巧,需要的朋友可以参考下

本文实例讲述了Vue图片浏览组件v-viewer用法。分享给大家供大家参考,具体如下:

v-viewer

用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,基于viewer.js。

从0.x迁移

你需要做的唯一改动就是手动引入样式文件:

import 'viewerjs/dist/viewer.css'

安装

使用npm命令安装

npm install v-viewer

使用

引入v-viewer及必需的css样式,并使用Vue.use()注册插件,之后即可使用。

 template 
 div id="app" 
 !-- directive -- 
 div v-viewer 
 img src="1.jpg" 
 img src="2.jpg" 
 /div 
 !-- component -- 
 viewer :images="images" 
 img v-for="src in images" :src="src" :key="src" 
 /viewer 
 /div 
 /template 
 script 
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 import Vue from 'vue'
 Vue.use(Viewer)
 export default {
 data() {
 images: ['1.jpg', '2.jpg']
 /script 

以指令形式使用

只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。

你可以像这样传入配置项: v-viewer="{inline: true}"

如果有必要,可以先用选择器查找到目标元素,然后可以用el.$viewer来获取viewer实例。

 template 
 div id="app" 
 div v-viewer="{movable: false}" 
 img v-for="src in images" :src="src" :key="src" 
 /div 
 button type="button" @click="show" Show /button 
 /div 
 /template 
 script 
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 import Vue from 'vue'
 Vue.use(Viewer)
 export default {
 data() {
 images: ['1.jpg', '2.jpg']
 methods: {
 show () {
 const viewer = this.$el.querySelector('.images').$viewer
 viewer.show()
 /script 

指令修饰器

static

添加修饰器后,viewer的创建只会在元素绑定指令时执行一次。

如果你确定元素内的图片不会再发生变化,使用它可以避免不必要的重建动作。

 div v-viewer.static="{inline: true}" 
 img v-for="src in images" :src="src" :key="src" 
 /div 

以组件形式使用

你也可以单独引入全屏组件并局部注册它。

使用作用域插槽来定制你的图片展示方式。

监听inited事件来获取viewer实例,或者也可以用this.refs.xxx.$viewer这种方法。

 template 
 div id="app" 
 viewer :options="options" :images="images"
 @inited="inited"
 ref="viewer"
 template scope="scope" 
 img v-for="src in scope.images" :src="src" :key="src" 
 {{scope.options}}
 /template 
 /viewer 
 button type="button" @click="show" Show /button 
 /div 
 /template 
 script 
 import 'viewerjs/dist/viewer.css'
 import Viewer from "v-ponent.vue"
 export default {
 components: {
 Viewer
 data() {
 images: ['1.jpg', '2.jpg']
 methods: {
 inited (viewer) {
 this.$viewer = viewer
 show () {
 this.$viewer.show()
 /script 

配置项 方法

请参考 .

插件配置项

name

Type: String Default: viewer

如果你需要避免重名冲突,可以像这样引入:

 template 
 div id="app" 
 div v-vuer="{movable: false}" 
 img v-for="src in images" :src="src" :key="src" 
 /div 
 button type="button" @click="show" Show /button 
 /div 
 /template 
 script 
 import 'viewerjs/dist/viewer.css'
 import Vuer from 'v-viewer'
 import Vue from 'vue'
 Vue.use(Vuer, {name: 'vuer'})
 export default {
 data() {
 images: ['1.jpg', '2.jpg']
 methods: {
 show () {
 const vuer = this.$el.querySelector('.images').$vuer
 vuer.show()
 /script 

defaultOptions

Type: Object Default: undefined

如果你需要修改viewer.js的全局默认配置项,可以像这样引入:

import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer, {
 defaultOptions: {
 zIndex: 9999

你还可以在任何时候像这样修改全局默认配置项:

import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
Viewer.setDefaults({
 zIndexInline: 2017

希望本文所述对大家vue.js程序设计有所帮助。




联系我们

全国服务热线:4000-399-000 公司邮箱:343111187@qq.com

  工作日 9:00-18:00

关注我们

官网公众号

官网公众号

Copyright?2020 广州凡科互联网科技股份有限公司 版权所有 粤ICP备10235580号 客服热线 18720358503