drp-ui/src/components/file-tag/index.vue

<template>
  <div class="file-tag">
    <el-popconfirm
      v-for="item in newValue"
      :key="item.url"
      confirm-button-text="好的"
      cancel-button-text="不用了"
      :title="`下载${item.name}`"
      style="display: block"
      @confirm="
        download(
          '/pu/contract/download/resource',
          { resource: item.url },
          item.name
        )
      "
    >
      <el-button :size="size" type="text" slot="reference">
        {{ item.name }}
      </el-button>
    </el-popconfirm>
  </div>
</template>

<script>
export default {
  name: "FileTag",
  props: {
    // v-model
    value: {
      type: String,
      require: true,
    },
    // 组件大小
    size: {
      type: String,
      dafault: () => {
        return "mini";
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    newValue() {
      const { value } = this.$props;
      return this.setFileList(value);
    },
  },
  watch: {},
  methods: {
    //
    setFileList(prop) {
      return prop.split(";").map((file) => {
        const { url, name } = JSON.parse(file);
        return { url: url, name: name };
      });
    },
  },
  created() {},
  mounted() {},
  destroyed() {},
};
</script>
<style scoped></style>