我是靠谱客的博主 无心奇迹，最近开发中收集的这篇文章主要介绍vue中实现点击小图查看大图的功能以及修改大图的层级与大小vue中实现点击小图查看大图的功能以及修改大图的层级与大小：在main.js中：在组件中使用：，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
vue中实现点击小图查看大图的功能以及修改大图的层级与大小：
安装插件：
npm：npm install vue-directive-image-previewer -D
yarn：yarn add vue-directive-image-previewer -D
在main.js中：
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer,{
zIndex: 9999, //层级显示
previewSize: 2 //放大倍数
})
在组件中使用：
<img v-image-preview src="" alt="">
<img v-for="(item,index) in form.imgDatas" :key="index" :src="item" alt="" v-image-preview="item">
最后
以上就是无心奇迹为你收集整理的vue中实现点击小图查看大图的功能以及修改大图的层级与大小vue中实现点击小图查看大图的功能以及修改大图的层级与大小：在main.js中：在组件中使用：的全部内容，希望文章能够帮你解决vue中实现点击小图查看大图的功能以及修改大图的层级与大小vue中实现点击小图查看大图的功能以及修改大图的层级与大小：在main.js中：在组件中使用：所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复