index.vue 1.3 KB

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