Vue+elementui 图片放大最好用的组件

组件：vue-directive-image-previewer1.在vue前端控制台Terminal中输入以下命令npm install vue-directive-image-previewer -D2.在main.js中添加以下代码//图片放大组件import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'imp

梁同学与Android

3546人浏览 · 2020-09-25 16:13:17

梁同学与Android · 2020-09-25 16:13:17 发布

组件：
vue-directive-image-previewer

1.在vue前端控制台Terminal中输入以下命令

npm install vue-directive-image-previewer -D

在这里插入图片描述
2.在main.js中添加以下代码

//图片放大组件
import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
import 'vue-directive-image-previewer/dist/assets/style.css'
Vue.use(VueDirectiveImagePreviewer)

3.在<img>标签中加入属性v-image-preview

<el-table-column align="center" label="图片" prop="imageId">
    <template slot-scope="scope">
      <img v-image-preview style="width: 100%" :src="petImage(scope.$index,scope.row)"/>
    </template>
</el-table-column>

4.效果图

在这里插入图片描述

效果将会在屏幕中央显示一个大个的图片，点击任意处，图片消失

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}$/, //不连续的两位字母// /^