| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <template>
- <view>
- <view class="row image-box">
- <image class="image-item r-10 m-r20 m-b20" :style="[{width},{height}]" :src="item" mode="aspectFill"
- v-for="(item,index) in imgList" @click="onPreviewImage(item)"></image>
- </view>
- </view>
- </template>
- <script>
- export default {
- props: {
- is_both: {
- type: Boolean,
- default: false
- },
- width: {
- type: String,
- default: '160rpx'
- },
- height: {
- type: String,
- default: '90rpx'
- },
- img: {
- default: []
- },
- previewImage: {
- default: []
- }
- },
- data() {
- return {
- imgList: []
- }
- },
- watch: {
- 'img': function() {
- this.setImgList()
- }
- },
- mounted() {
- this.setImgList()
- },
- methods: {
- setImgList() {
- if (typeof this.img === "string") {
- this.imgList = [this.img]
- } else {
- this.imgList = this.img
- }
- },
- onPreviewImage(item) {
- console.log(item)
- this.$emit('onShowImg',item)
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .image-box {
- flex-wrap: wrap;
- }
- .image-item {
- display: block;
- }
- </style>
|