项目初始化

fuliqi

2024-01-24 29c1e7eb5ac16e90d8991a86c1c071bc312ec8d9

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
import Vue from 'vue'
import { Progress } from 'element-ui'
const ProgressIcon = Vue.extend(Progress)
export default {
    update(el, binding, vnode) {
        const dom = document.getElementById('containerBox')
        if (binding.value.isLoading) {
            Vue.nextTick(() => {
                if (!document.getElementById('customLoadingMask')) {
                    // 创建一个遮罩dom
                    const loadingMask = document.createElement('div')
                    loadingMask.setAttribute('id', 'customLoadingMask')
                    loadingMask.style.width = dom.offsetWidth + 'px'
                    dom.appendChild(loadingMask)
                        // 引入进度条组件
                    const progress = new ProgressIcon({
                        el: document.createElement('div'),
                        props: { percentage: 0 }
                    })
                    progress.type = 'circle'
                    progress.color = 'rgba(215, 0, 18, .8)'
                    progress.width = 150
                    progress.height = 150
                        // 用一个变量接住copy实例
                    loadingMask.instance = progress
                    loadingMask.appendChild(progress.$el)
                }
 
                const customLoadingMask = document.getElementById('customLoadingMask')
 
                // 动态设置进度条数值
                customLoadingMask.instance.percentage = binding.value.percentage
                    // customLoadingMask.instance.circlePathStyle.transition = 'stroke-dasharray 3s ease 0s, stroke 3s ease'
            })
        } else {
            if (document.getElementById('customLoadingMask')) {
                const customLoadingMask = document.getElementById('customLoadingMask')
                dom.removeChild(customLoadingMask)
            }
        }
    }
}