vue 实现预览缩率图,点开是原图的插件 vue-picture-preview 使用
1. 安装依赖:npm install vue-picture-preview --save2. .vue文件中引用:import vuePicturePreview from 'vue-picture-preview'Vue.use(vuePicturePreview)3. .html文件中router-view标签后引入:<lg-pr...
1. 安装依赖:
npm install vue-picture-preview --save
2. .vue文件中引用:
import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)
3. .html文件中router-view标签后引入:
<lg-preview></lg-preview>
4. .vue文件中应用:
<div v-for="(item,index) in photos" v-bind:key="item.fileId" class="inner-for">
<div class="photo" >
<img v-preview="item.fileUrl" :src="item.fileThumbnail" :key="index" preview-title-enable="true" preview-nav-enable="true">
</div>
</div>
说明:v-preview:存放预览后大图的路径;preview-title-enable:启动预览标题,默认为true;preview-nav-enable;启动预览导航
-----该插件只支持图片预览,不支持缩放功能-----
更多推荐
所有评论(0)