1.指令方式使用 只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。你可以像这样传入配置项: v-viewer="{inline: true}"如果有必要,可以先用选择器查找到目标元素,然后可以用el.$viewer来获取viewer实例。 <template>Show</template>import 'viewerjs/dist/viewer.css' import V...
1.指令方式使用 只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。你可以像这样传入配置项: v-viewer="{inline: true}"如果有必要,可以先用选择器查找到目标元素,然后可以用el.$viewer来获取viewer实例。 <template>Show</template>import'viewerjs/dist/viewer.css'importViewer...
2、在需要使用v-viewer的页面引入 import 'viewerjs/dist/viewer.css'import Viewer from'v-viewer'import Vue from'vue'Vue.use(Viewer) 或者全局引入: import 'viewerjs/dist/viewer.css'import Viewer from'v-viewer'Vue.use(Viewer) 3、如果是一张图片,可以使用v-viewer指令: 如果是多种图片,可以先声明...
import 'viewerjs/dist/viewer.css'import Viewer from'v-viewer'Vue.use(Viewer) 1. 2. 3. 3、如果是一张图片,可以使用v-viewer指令: 1. 2. 3. 如果是多种图片,可以先声明img数组,使用viewer标签: <viewer:images="images"></viewer> 1. 2. 3....
只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。 你可以像这样传入配置项: v-viewer="{inline: true}" 如果有必要,可以先用选择器查找到目标元素,然后可以用el.$viewer来获取...
③使用指令或组件的形式进行图片展示: <-- 使用指令 -->data () { return { images: [] } }.m-image{min-width:1200px; }.u-image{max-width:400px;cursor: pointer; } <-- 使用组件 --><viewer:images="images">
在上述代码中,v-viewer指令被绑定到了<img>元素上,并且传递了一个viewerOptions对象来配置v-viewer的行为。这个对象可以包含各种配置选项,具体可以参考v-viewer的官方文档。 4. 测试点击图片放大功能是否生效 现在,你可以运行你的Vue项目并测试点击图片放大功能是否生效。当你点击图片时,应该会出现一个全屏的查...
指令修饰器 static 添加修饰器后,viewer的创建只会在元素绑定指令时执行一次。 如果你确定元素内的图片不会再发生变化,使用它可以避免不必要的重建动作。 以组件形式使用 你也可以单独引入全屏组件并局部注册它。 使用作用域插槽来定制你的图片展示方式。 监听inited事件来获取viewer...
只需要将v-viewer指令添加到任意元素即可，该元素下的所有img元素都会被viewer⾃动处理。你可以像这样传⼊配置项： v-viewer="{inline: true}"如果有必要，可以先⽤选择器查找到⽬标元素，然后可以⽤el.$viewer来获取viewer实例。<template> Show </template> import 'viewerjs/dist/viewer.css'...
其实用了这个插件之后特别简单,只需要给图片这个容器一个指令,就可以拥有这些功能。 v-viewer 消除日志打印 好归好,但是有一个问题,就是控制台打印太多了: 这么多日志肯定是不利于开发的,所以我想着把插件相关的日志给去掉 想要解决这个问题,只能是修改源码喽,一般情况下,尽量还是不要碰源码,但是这种情况,是肯定得...