vue 图片浏览组件（Vue项目中，el-image实现按钮触发大图预览模式）
导读：Vue项目中，el-image实现按钮触发大图预览模式...
Vue项目中 ，el-image实现按钮触发大图预览模式
1.点击图片实现大图预览（默认）
template部分：
<div class="demo-image__preview"> <el-image style="width: 100px; height: 100px" :src="url" :preview-src-list="srcList"> </el-image> </div>script部分：
import logo from ../../assets/logo.png; export default { name: "vue_project", data() { return { url: logo, srcList: [logo] } } }2.实现按钮触发大图预览模式（单图）
template修改部分：
<div class="demo-image__preview"> <el-image style="width: 100px; height: 100px" ref="previewImg" :src="url" :preview-src-list="srcList"> </el-image> </div> <el-button type="danger" @click="viewBigPicture">点击按钮查看大图</el-button>script修改部分：
import logo from ../../assets/logo.png; export default { name: "vue_project", data() { return { url: logo, srcList: [logo] } }, methods: { viewBigPicture(){ this.$refs.previewImg.showViewer = true; } } }总结
每天一个提升小技巧！！！
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！