我是靠谱客的博主 无心奇迹，这篇文章主要介绍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中实现点击小图查看大图内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复