frame/components/pic.vue

<template>
  <div id="pic">
    <el-tooltip content="点击放大" placement="right">
      <el-image :src="src" :style="styles" :fit="fit" :preview-src-list="list"></el-image>
    </el-tooltip>
  </div>
</template>

<script>
import _ from 'lodash';
export default {
  name: 'pic',
  props: {
    src: { type: String, required: true },
    styles: {
      type: Object,
      default: () => {
        return { width: `150px`, height: `150px` };
      },
    },
    fit: { type: String, default: 'scale-down' },
  },
  components: {},
  data: () => ({
    list: [],
  }),
  created() {},
  computed: {},
  methods: {},
  watch: {
    src: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val) {
          if (_.isArray(val)) {
            this.$set(this, `list`, val);
          } else if (_.isString(val)) this.list.push(val);
        }
      },
    },
  },
};
</script>

<style lang="less" scoped></style>