vue框架中:点击图片使得图片放大展示方法
安装插件#
cnpm install v-viewer --save
使用npm方式安装可能会报错,安装不上
在main.js引用#
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
//Vue.use(Viewer) 默认配置写法
Vue.use(Viewer, {
defaultOptions: {
zIndex: 9999
}
})
在需要放大的图片位置使用#
<!-- 图片循环展示 -->
<div class="screen-se">
<viewer :imglist="imglist" class="screen-view">
<img class="screen-img" :src="item" v-for="(item,index ) in imglist" :key="index">
</viewer>
</div>
imglist在data里面定义数组
图片的数据很简单:
'/test/test.png'
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步