crm-mobile/components/wk-image-content/wk-image-content.vue

<template>
  <view class="wk-image-content">
    <view class="image-file">
      <view v-for="(file, index) in list" :key="index" class="file-item">
        <wk-auth-img
          :src="file.url"
          :preview="preview"
          mode="aspectFit"
          class="pic"
          @click.native.stop />
        <image
          v-if="showDelete"
          :src="$static('images/icon/delete_fill.png')"
          class="icon"
          @click.stop="handleDelete(index)" />
      </view>
      <template v-if="len !== 0">
        <view
          v-for="i in len"
          :key="i | emptyKey"
          class="file-item"
          style="visibility: hidden" />
      </template>
    </view>
  </view>
</template>

<script>
	/**
	 * 图片模块
	 * @author yxk
	 * @property {Array} list 图片列表
	 * @property {Boolean} showDelete 是否可删除，默认false不可删除
	 * @event {Function} delete 点击确认删除时触发
	 */
  export default {
    name: 'WkImageContent',
    filters: {
      emptyKey(key) {
        return `empty_${key}`
      }
    },
    props: {
      list: {
        type: Array,
        default: () => []
      },
      showDelete: {
        type: Boolean,
        default: false
      },
      preview: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {}
    },
    computed: {
      len() {
        if (this.list.length === 0) return 0
        return (4 - (this.list.length % 4))
      }
    },
    methods: {
      handleDelete(index) {
        this.$emit('delete', index, this.list[index])
      },
      handleAdd() {
        this.$emit('add')
      }
    }
  }
</script>

<style scoped lang="scss">
.wk-image-content {
  margin: 10rpx 0;
  .image-file {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    // @include left;
    .file-item {
      position: relative;
      width: 150rpx;
      height: 150rpx;
      flex: 1;
      background-color: $main-bg;
      margin: 10rpx;
      @include center;
      .pic, wk-auth-img {
        width: 100%;
        height: 100%;
        // display: block;
      }
      .icon {
        position: absolute;
        top: -10rpx;
        right: -10rpx;
        width: 32rpx;
        height: 32rpx;
        border-radius: 50%;
        background-color: white;
      }
    }
    // .add {
    //   width: 150rpx;
    //   height: 150rpx;
    //   color: #ccc;
    //   font-size: 80rpx;
    //   line-height: 1;
    //   border: 1rpx dashed #ccc;
    // 	background-color: unset;
    // 	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 52 52"><path fill="%23cccccc" d="M38.5 25H27V14c0-.553-.448-1-1-1s-1 .447-1 1v11H13.5c-.552 0-1 .447-1 1s.448 1 1 1H25v12c0 .553.448 1 1 1s1-.447 1-1V27h11.5c.552 0 1-.447 1-1s-.448-1-1-1z"/></svg>');
    //   background-position: center;
    // 	background-repeat: no-repeat;
    //  @include center;
    // }
  }
}
</style>