vue图片缩略图及图片预览功能

上次有个需求，是要给图片做个缩略图以及预览功能。其实用vue来实现是很简单的，几句代码可以搞定，也不需要什么额外的插件。实现的效果如下：- vue显示图片缩略图- vue显示图片预览功能

Moshow郑锴

5354人浏览 · 2021-01-01 00:37:55

Moshow郑锴 · 2021-01-01 00:37:55 发布

前言

上次有个需求，是要给图片做个缩略图以及预览功能。其实用vue来实现是很简单的，几句代码可以搞定，也不需要什么额外的插件。

效果如下：

vue显示图片缩略图
vue显示图片预览功能

核心代码

两个el-image ，一个作为reference ，最后包括在一个el-popover即可。

<el-popover
        placement="right"
        title=""
        trigger="hover">
    <el-image src="${request.contextPath}/static/images/class1.png"></el-image>
    <el-image slot="reference" src="${request.contextPath}/static/images/class1.png" alt="${request.contextPath}/static/images/class1.png" style="max-height: 150px;max-width: 200px">
</el-popover>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^