index.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  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: ''
  48. }
  49. },
  50. data() {
  51. return {
  52. selectVal: ''
  53. };
  54. },
  55. watch: {
  56. value: {
  57. handler(newVal) {
  58. console.log(newVal, '=======');
  59. this.selectVal = newVal || [];
  60. },
  61. immediate: true
  62. }
  63. },
  64. created() {},
  65. methods: {
  66. handleUpload() {
  67. this.$refs.fileUploadRef.open(this.selectVal, this.type);
  68. },
  69. getFiles(val = []) {
  70. this.$emit('updateVal', val);
  71. }
  72. }
  73. };
  74. </script>
  75. <style scoped lang="scss"></style>