elementui图片预览组件通过按钮控制展示

2024-01-03 17:30:20
<ElImageViewer v-if="showImagePreview" :url-list="srcList" hide-on-click-modal teleported
                :on-close="closePreview" style="z-index: 3000" />
<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default {
    components: {
        ElImageViewer
    },
    data() {
        return {
            showImagePreview: false,
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
            ]
        }
    },
    computed: {},
    creatd() {

    },
    mountd() {

    },
    methods: {
        showPreview(){
            this.showImagePreview = true
        },
        closePreview(){
            this.showImagePreview = false
        }
    }
}
</script>

文章来源:https://blog.csdn.net/weixin_47813845/article/details/135368229
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。