123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <template>
- <div>
- <div v-if='uploadVisible' class="uploadWarp">
- <el-collapse v-model="activeNames" style="position: absolute; width: 100%">
- <div class="full-progress" :style="{width: percentage + '%', 'background-color': PROGRESS_BG_COLOR.success }"></div>
- <el-progress :text-inside="true" :show-text='false' :stroke-width="3" :percentage="percentage" class="smallProgess"></el-progress>
- <i class="el-icon-close" @click="cancelUpload"></i>
- <el-collapse-item :title="uploading ? '上传中...' : '上传完成'" name="1">
- <div class="tip">
- <span>已成功同步100个文件,共200个文件</span>
- <Icon class="icon" :name="'tagCompleted'" />
- </div>
- <el-progress :text-inside="true" :show-text='false' :stroke-width="3" :percentage="percentage"></el-progress>
- </el-collapse-item>
- </el-collapse>
- </div>
- <Modal
- :show="modalStatusTip"
- title="警告"
- mode="tip"
- type="info"
- @close="modalClose"
- @confirm='confirmHandle'
- >
- <template #content>
- 确定取消上传
- </template>
- <template #handle>
- <Button @click="modalClose" type="default">取消</Button>
- <Button @click="confirmHandle" type="error">确定</Button>
- </template>
- </Modal>
- </div>
- </template>
- <script>
- import { mapState } from 'vuex'
- import { PROGRESS_BG_COLOR } from './constant'
- export default {
- components: {
- },
- data() {
- return {
- activeNames: '1',
- modalStatusTip: false,
- uploading: true,
- percentage: 0,
- PROGRESS_BG_COLOR,
- }
- },
- watch: {
- uploadVisible(nv, ov) {
- console.log({nv, ov})
- }
- },
- computed: {
- ...mapState('uploadFile', ['uploadVisible'])
- },
- mounted() {
- // setInterval(() => {
- // if (this.percentage < 99.9) {
- // this.percentage += 0.1
- // console.log(this.percentage)
- // }
- // }, 20);
- },
- methods: {
- cancelUpload() {
- this.modalStatusTip = true;
- },
- confirmHandle() {
- console.log(123)
- },
- modalClose() {
- this.modalStatusTip = false
- },
- },
- }
- </script>
- <style scoped lang='less'>
- .uploadWarp {
- position: fixed;
- right: 64px;
- bottom: 80px;
- width: 420px;
- height: 133px;
- box-shadow: 0px 0px 6px #aaa;
- & /deep/ .el-collapse-item__header {
- padding: 16px;
- border-bottom: 1px solid #EBEEF5;
- }
- & /deep/ .el-collapse-item__content {
- padding: 25px 16px;
- }
- & /deep/ .el-collapse-item__arrow {
- position: relative;
- right: 20px
- }
- & /deep/ .el-icon-close {
- position: absolute;
- right: 20px;
- top: 16px
- }
- .full-progress {
- position: absolute;
- top: -1px;
- left: 0;
- height: 47px;
- opacity: 0.2;
- }
- .smallProgess {
- position: absolute;
- left: 0;
- width: 100%;
- top: 46px;
- & /deep/ .el-progress-bar__inner {
- transition: none;
- }
- }
- .tip {
- display: flex;
- justify-content: space-between;
- padding-bottom: 8px;
- }
- }
- </style>
|