index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <div>
  3. <div v-if='uploadVisible' class="uploadWarp">
  4. <el-collapse v-model="activeNames" style="position: absolute; width: 100%">
  5. <div class="full-progress" :style="{width: percentage + '%', 'background-color': PROGRESS_BG_COLOR.success }"></div>
  6. <el-progress :text-inside="true" :show-text='false' :stroke-width="3" :percentage="percentage" class="smallProgess"></el-progress>
  7. <i class="el-icon-close" @click="cancelUpload"></i>
  8. <el-collapse-item :title="uploading ? '上传中...' : '上传完成'" name="1">
  9. <div class="tip">
  10. <span>已成功同步100个文件,共200个文件</span>
  11. <Icon class="icon" :name="'tagCompleted'" />
  12. </div>
  13. <el-progress :text-inside="true" :show-text='false' :stroke-width="3" :percentage="percentage"></el-progress>
  14. </el-collapse-item>
  15. </el-collapse>
  16. </div>
  17. <Modal
  18. :show="modalStatusTip"
  19. title="警告"
  20. mode="tip"
  21. type="info"
  22. @close="modalClose"
  23. @confirm='confirmHandle'
  24. >
  25. <template #content>
  26. 确定取消上传
  27. </template>
  28. <template #handle>
  29. <Button @click="modalClose" type="default">取消</Button>
  30. <Button @click="confirmHandle" type="error">确定</Button>
  31. </template>
  32. </Modal>
  33. </div>
  34. </template>
  35. <script>
  36. import { mapState } from 'vuex'
  37. import { PROGRESS_BG_COLOR } from './constant'
  38. export default {
  39. components: {
  40. },
  41. data() {
  42. return {
  43. activeNames: '1',
  44. modalStatusTip: false,
  45. uploading: true,
  46. percentage: 0,
  47. PROGRESS_BG_COLOR,
  48. }
  49. },
  50. watch: {
  51. uploadVisible(nv, ov) {
  52. console.log({nv, ov})
  53. }
  54. },
  55. computed: {
  56. ...mapState('uploadFile', ['uploadVisible'])
  57. },
  58. mounted() {
  59. // setInterval(() => {
  60. // if (this.percentage < 99.9) {
  61. // this.percentage += 0.1
  62. // console.log(this.percentage)
  63. // }
  64. // }, 20);
  65. },
  66. methods: {
  67. cancelUpload() {
  68. this.modalStatusTip = true;
  69. },
  70. confirmHandle() {
  71. console.log(123)
  72. },
  73. modalClose() {
  74. this.modalStatusTip = false
  75. },
  76. },
  77. }
  78. </script>
  79. <style scoped lang='less'>
  80. .uploadWarp {
  81. position: fixed;
  82. right: 64px;
  83. bottom: 80px;
  84. width: 420px;
  85. height: 133px;
  86. box-shadow: 0px 0px 6px #aaa;
  87. & /deep/ .el-collapse-item__header {
  88. padding: 16px;
  89. border-bottom: 1px solid #EBEEF5;
  90. }
  91. & /deep/ .el-collapse-item__content {
  92. padding: 25px 16px;
  93. }
  94. & /deep/ .el-collapse-item__arrow {
  95. position: relative;
  96. right: 20px
  97. }
  98. & /deep/ .el-icon-close {
  99. position: absolute;
  100. right: 20px;
  101. top: 16px
  102. }
  103. .full-progress {
  104. position: absolute;
  105. top: -1px;
  106. left: 0;
  107. height: 47px;
  108. opacity: 0.2;
  109. }
  110. .smallProgess {
  111. position: absolute;
  112. left: 0;
  113. width: 100%;
  114. top: 46px;
  115. & /deep/ .el-progress-bar__inner {
  116. transition: none;
  117. }
  118. }
  119. .tip {
  120. display: flex;
  121. justify-content: space-between;
  122. padding-bottom: 8px;
  123. }
  124. }
  125. </style>