共计 496 个字符,预计需要花费 2 分钟才能阅读完成。
element-ul 有大图预览性能
但咱们不想展现图片,想实现的是点击按钮,或者通过 js 事件触发,能预览大图(多张也能够预览)的性能。
1、导入组件
// 导入组件 | |
import ElImageViewer from "element-ui/packages/image/src/image-viewer"; |
2. 注册组件
components: {ElImageViewer,},
3. 应用组件
<p @click="showImage(picture)"> 查看图片 </p> | |
<el-image-viewer | |
v-if="showViewer" | |
:on-close="closeViewer" | |
:url-list="srcList" | |
></el-image-viewer> |
4. 相干的 data 定义
data() { | |
return {srcList: [], | |
showViewer: false // 显示查看器 | |
} | |
} |
5.methods
// 查看图片 | |
showImage(path) { | |
this.srcList = path; | |
this.showViewer = true; | |
}, | |
// 敞开查看器 | |
closeViewer() {this.showViewer = false;}, |
正文完