index.vue 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <template>
  2. <div>
  3. <el-badge :value="value.length" class="item">
  4. <el-button
  5. icon="el-icon-plus"
  6. v-if="type != 'view'"
  7. type="primary"
  8. @click="handleUpload"
  9. :size="size"
  10. >
  11. 上传</el-button
  12. >
  13. <el-button
  14. icon="el-icon-view"
  15. v-else
  16. type="primary"
  17. @click="handleUpload"
  18. >
  19. 查看</el-button
  20. >
  21. </el-badge>
  22. <file-upload @success="getFiles" ref="fileUploadRef"></file-upload>
  23. </div>
  24. </template>
  25. <script>
  26. import fileUpload from './main.vue';
  27. export default {
  28. name: 'index',
  29. components: { fileUpload },
  30. model: {
  31. prop: 'value',
  32. event: 'updateVal'
  33. },
  34. props: {
  35. type: {
  36. type: String,
  37. default: ''
  38. },
  39. value: {
  40. type: Array,
  41. default: () => {
  42. return [];
  43. }
  44. },
  45. size: {
  46. type: String,
  47. default: 'mini'
  48. }
  49. },
  50. data() {
  51. return {
  52. selectVal: ''
  53. };
  54. },
  55. watch: {
  56. value: {
  57. handler(newVal) {
  58. this.selectVal = newVal || [];
  59. },
  60. immediate: true
  61. }
  62. },
  63. created() {},
  64. methods: {
  65. handleUpload() {
  66. this.$refs.fileUploadRef.open(this.selectVal, this.type);
  67. },
  68. getFiles(val = []) {
  69. this.$emit('updateVal', val);
  70. }
  71. }
  72. };
  73. </script>
  74. <style scoped lang="scss"></style>