index.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template>
  2. <div class="file-tag">
  3. <el-popconfirm
  4. v-for="item in newValue"
  5. :key="item.url"
  6. confirm-button-text="好的"
  7. cancel-button-text="不用了"
  8. :title="`下载${item.name}`"
  9. style="display: block"
  10. @confirm="
  11. download(
  12. '/pu/contract/download/resource',
  13. { resource: item.url },
  14. item.name
  15. )
  16. "
  17. >
  18. <el-button :size="size" type="text" slot="reference">
  19. {{ item.name }}
  20. </el-button>
  21. </el-popconfirm>
  22. </div>
  23. </template>
  24. <script>
  25. export default {
  26. name: "FileTag",
  27. props: {
  28. // v-model
  29. value: {
  30. type: String,
  31. require: true,
  32. },
  33. // 组件大小
  34. size: {
  35. type: String,
  36. dafault: () => {
  37. return "mini";
  38. },
  39. },
  40. },
  41. data() {
  42. return {};
  43. },
  44. computed: {
  45. newValue() {
  46. const { value } = this.$props;
  47. return this.setFileList(value);
  48. },
  49. },
  50. watch: {},
  51. methods: {
  52. //
  53. setFileList(prop) {
  54. return prop.split(";").map((file) => {
  55. const { url, name } = JSON.parse(file);
  56. return { url: url, name: name };
  57. });
  58. },
  59. },
  60. created() {},
  61. mounted() {},
  62. destroyed() {},
  63. };
  64. </script>
  65. <style scoped></style>