<template>
  <div>
    <span @click="preview()" class="pre">{{ msg }}</span>
    <el-image v-if="value" ref="preview" class="hideImgDiv" :src="list[0]" :preview-src-list="list"></el-image>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: {}
    },
    msg: {
      type: String,
      default: '点击查看'
    }
  },
  data() {
    return {
      list: []
    };
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        newValue.split(',').forEach((item) => {
          this.list.push(this.baseUrl + item);
          // item = this.baseUrl + item;
          console.log('asd:' + item);
        });
      },
      immediate: true
    }
  },
  methods: {
    preview() {
      this.$refs.preview.clickHandler();
    }
  }
};
</script>
<style lang="scss" scoped>
.hideImgDiv {
  display: none !important;
}
.pre {
  color: #1890ff;
  cursor: pointer;
}
</style>
