63 lines
1.3 KiB
Vue
63 lines
1.3 KiB
Vue
<template>
|
|
<view>
|
|
<!-- 模态框 -->
|
|
<view class="cu-modal" :class="isShow?'show':''">
|
|
<view class="cu-dialog">
|
|
<view class="padding-xl">
|
|
<view class="grid flex-sub padding-lr col-3 grid-square" v-if="imgList && imgList.length > 0">
|
|
<view class="bg-img" :style="'background-image:url(' + url + ');'"
|
|
v-for="(url, index) in imgList" :key="index" :data-url="url" @click="viewImage($event)">
|
|
</view>
|
|
</view>
|
|
<view v-else class="text-center text-lg text-gray">
|
|
无图片上传记录
|
|
</view>
|
|
</view>
|
|
<view class="cu-bar bg-white">
|
|
<view class="action margin-0 flex-sub text-main-color solid-left" @tap="hideModal">{{confirmMsg}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'pic-modal',
|
|
props: {
|
|
imgList: {
|
|
type: Array,
|
|
default: []
|
|
},
|
|
confirmMsg: {
|
|
type: String,
|
|
default: '确定'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isShow: false
|
|
}
|
|
},
|
|
methods: {
|
|
showModal(e) {
|
|
this.isShow = true
|
|
},
|
|
hideModal(e) {
|
|
this.isShow = false
|
|
},
|
|
viewImage(e) {
|
|
console.log(this.imgList)
|
|
console.log(e.currentTarget.dataset.url)
|
|
uni.previewImage({
|
|
urls: this.imgList,
|
|
current: e.currentTarget.dataset.url
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|