index.vue 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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. :disabled="viewDisabled"
  18. @click="handleUpload"
  19. >
  20. 查看</el-button
  21. >
  22. </el-badge>
  23. <file-upload @success="getFiles" ref="fileUploadRef"></file-upload>
  24. </div>
  25. </template>
  26. <script>
  27. import fileUpload from './main.vue';
  28. export default {
  29. name: 'index',
  30. components: { fileUpload },
  31. model: {
  32. prop: 'value',
  33. event: 'updateVal'
  34. },
  35. props: {
  36. type: {
  37. type: String,
  38. default: ''
  39. },
  40. viewDisabled: {
  41. type: Boolean,
  42. default: false
  43. },
  44. value: {
  45. type: Array,
  46. default: () => {
  47. return [];
  48. }
  49. },
  50. size: {
  51. type: String,
  52. default: 'mini'
  53. }
  54. },
  55. data() {
  56. return {
  57. selectVal: ''
  58. };
  59. },
  60. watch: {
  61. value: {
  62. handler(newVal) {
  63. this.selectVal = newVal || [];
  64. },
  65. immediate: true
  66. }
  67. },
  68. created() {},
  69. methods: {
  70. handleUpload() {
  71. this.$refs.fileUploadRef.open(this.selectVal, this.type);
  72. },
  73. getFiles(val = []) {
  74. this.$emit('updateVal', val);
  75. }
  76. }
  77. };
  78. </script>
  79. <style scoped lang="scss"></style>