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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
| <template>
| <div class="v-progress-rank" ref="rank" :style="{width: width ? width + 'px' : '169px',}">
| <div
| :class="`progress-${rankIndex}`"
| :style="{width: percentWidth, background: color}"
| ></div>
|
| </div>
| </template>
|
| <script>
| export default {
| name: 'vueName',
| props: {
| rankIndex: {
| type: [Number, String],
| default: 'more'
| },
| width: [Number, String],
| color: String,
| percent: {
| type: [Number, String],
| default: 0
| }
| },
| data () {
| return {
| percentWidth: 0,
| style: null,
| }
| },
| mounted() {
| let width = this.width || 169;
|
| if(+this.percent > 100) {
| this.percentWidth = '100%';
| } else {
| this.percentWidth = +this.percent*width/100 + 'px'
| }
|
| this.style = document.styleSheets[0];
| this.style.insertRule(`@keyframes
| barAnimate{
| from{ width: 0; }
| to{ width: ${this.percentWidth}px }}`,this.rankIndex);//写入样式
|
|
| },
| computed: {
| percentStyle() {
|
| }
| },
| destroy() {
| this.style.deleteRule(this.rankIndex)
|
| }
|
| }
| </script>
|
| <style lang="less">
| .v-progress-rank{
| width: 169px;
| height: 6px;
| background: linear-gradient(90deg,rgba(255,255,255,0.00) 4%, rgba(255,255,255,0.1));
| border-radius: 3px;
| position: relative;
| .progress-1, .progress-2, .progress-3, .progress-more{
| width: 139px;
| position: absolute;
| left: 0;
| right: 0;
| height: 6px;
| display: inline-block;
| border-radius: 3px;
| animation: barAnimate 1s 0.4s forwards;
| }
| .progress-1 {
| background: linear-gradient(90deg,rgba(0,244,237,0.00) 2%, #00f4ed 98%);
| }
| .progress-2 {
| background: linear-gradient(90deg,rgba(7,107,231,0.00) 2%, #0b6be9 98%);
| }
| .progress-3 {
| background: linear-gradient(90deg,rgba(223,224,131,0.00) 2%, #e3e680 98%);
| }
| .progress-more{
| background: linear-gradient(90deg,rgba(1,255,255,0.00) 2%, #09f9fc 98%);
| }
| }
|
| </style>
|
|
