ElementUI中ElImageViewer组件的使⽤与属性说明
前⾔
ElImageViewer是Image组件的内置组件，主要实现图⽚的预览功能，对于这个组件官⽅⽂档没有过多介绍，但有些需求可以单独使⽤。
组件的属性可以到源码中查看，但是如果只是为了看⼀下传参我建议直接⽤vue的调试⼯具devtools查看，⽐较⽅便。
Image组件中实现图⽚预览
建议直接去查看
<div class="demo-image__preview">
<el-image
:src="url"
:preview-src-list="srcList">
</el-image>
</div>
<script>
export default {
data() {
return {
url: 'fuss10.elemecdn/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
srcList: [
'fuss10.elemecdn/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'fuss10.elemecdn/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
}
}
}
</script>
ElImageViewer 组件使⽤⽅法
html
<!-- 这⾥⽤ v-if 和 v-show 的区别是 v-if 每次都会重置默认第⼀张预览图，由 initialIndex 属性指定，⽽ v-show 会缓存上次切换的那张图 -->
<el-image-viewer
v-if="showViewer"
:initial-index="1"
:
on-close="onClose"
:on-switch="onSwitch"
:url-list="urlList"
/>
js
// 引⼊ElImageViewer组件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
export default {
components: {
ElImageViewer
},
data() {
return {
// 是否显⽰
showViewer: false,
urlList: [
'fuss10.elemecdn/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'fuss10.elemecdn/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
view ui框架
]
}
},
methods: {
/
/ 关闭图⽚预览
onClose() {
this.showViewer = false
},
// 切换图⽚ index为图⽚下标值
onSwitch(index) {
console.log(index)
}
}
}
ElImageViewer 组件属性说明
Attributes
参数说明类型可选值默认值initialIndex默认显⽰的第⼀张预览图（urlList的下标值）Number--0 urlList预览图的地址列表Array--[] zIndex设置图⽚预览的 z-index Number--2000 onClose关闭图⽚预览时的回调函数Function----onSwitch切换上⼀张下⼀张图⽚时的回调函数Function----

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。