共计 830 个字符,预计需要花费 3 分钟才能阅读完成。
elementui
图片预览的官网文档
<div class="demo-image__preview">
<el-image
style="width: 100px; height: 100px"
:src="url"
:preview-src-list="srcList">
</el-image>
</div>
<script>
export default {data() {
return {
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
srcList: [
'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
]
}
}
}
</script>
预览性能是通过点击图片触发的,然而需要是通过按钮触发预览
<div class="demo-image__preview">
<el-image class="my-img" :src="previewUrl" :preview-src-list="previewUrlList" ref="preview">
</el-image>
</div>
首先,页面中必须存在该 dom
,并且设置ref
属性
this.$refs.preview.showViewer = true
而后通过设置 showViewer
实现预览成果
.my-img {
width: 100px;
height: 100px;
}
.my-img .el-image__inner,
.el-image__error {visibility: hidden;}
款式是重点,图片必须在页面上存在,不能设置display:none
,也不能设置width:0;height:0
, 否则不能触发
正文完
发表至: javascript
2021-03-09