vue 实现预览图片

vue 简单实现图片的放大预览

花烁

3805人浏览 · 2022-08-03 17:41:40

花烁 · 2022-08-03 17:41:40 发布

方法一：

1、下载安装

npm install vue-photo-preview --save

2、在src目录下的main.js全局引用


import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)

3、在图片标签加入preview

 <img :src="item" preview="1" style="width: 100px; height: 100px;"/>

回到界面上点击图片即可放大

方法二：

在收到后台返回的数据图片的方法的最后面加上this.$previewRefresh(); 即可

this.$previewRefresh();

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