这个插件可以在移动端使用哟~~
第一步 在项目下载插件
npm install vue-photo-preview
第二步 引用配置 main.js里添加一下代码
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(preview)
第三步 在页面中直接使用
这里说一下渲染的几种情况
1.单个图片直接渲染
<img src="路径" alt="" preview="1"></swiper-item>
效果图：
2.分组图片直接渲染
preview值为相同则为一组
<img src="路径" alt="" preview="1"></swiper-item>
<img src="路径" alt="" preview="1"></swiper-item>
<img src="路径" alt="" preview="1"></swiper-item>
<img src="路径" alt="" preview="1"></swiper-item>
效果图：
3.异步加载图片渲染 图片加载完成后执行
this.$previewRefresh()html代码
<div class="uoload">
<div class="item" v-for="(item, index) in 4" :key="index" v-if="arr.length >= index">
<img :src="arr[index]" alt="" v-if="arr.length >= index + 1" preview="1">
<img src="../assets/images/clean.png" alt="" class="clean" v-if="arr.length >= index + 1" @click="arr.splice(index, 1)">
<input type="file" @change="upload($event)" v-if="arr.length <= index">
</div>
</div>
js代码
data () {
return {
arr: []
}
},
methods: {
upload (e) {
let file = e.target.files[0]
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onload = (e) => {
this.arr.push(e.target.result)
this.$previewRefresh()
}
}
}
css代码
.uoload {
display: flex;
align-items: center;
padding: 20px 0 20px 15px;
.item {
width:76px;
height:76px;
position: relative;
background: url(../assets/images/upload.png) no-repeat;
background-size: 100% 100%;
margin-right: 15px;
input {
width:76px;
height:76px;
outline: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
}
>img:nth-of-type(1) {
width:76px;
height:76px;
}
.clean {
position: absolute;
right: -7px;
top: -7px;
width:14px !important;
height:14px !important;
}
}
}
大致的效果图
