elementUI el-popover结合el-image

最新推荐文章于 2024-03-11 12:07:45 发布

Tomat011

最新推荐文章于 2024-03-11 12:07:45 发布

阅读量423

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/Tomat011/article/details/128714010

版权

实现效果：图片加载成功正常显示图片，hover预览；图片加载失败显示失败默认图片

模板：

<el-popover placement="top-start" title="" trigger="hover">
    <img :src="url" alt="" style="width: 150px; height: 150px" />
    <el-image slot="reference" style="width: 40px; height: 40px" :src="url" :fit="'fill'">
        <div slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
        </div>
    </el-image>
</el-popover

样式：

/deep/.el-image {
    .image-slot {
        width: 100%;
        height: 100%;
        font-size: 35px;

        /deep/.el-icon-picture-outline {
            font-size: 35px !important;
        }
    }
}

注：slot="reference" 表示触发预览的元素

img表示hover展示的img