将变量注入到CSS样式

1
<template>
2
  <div class="progress" :style="cssVars">
3
    <div class="rate" />
4
    <span>{{ content }}</span>
5
  </div>
6
</template>
7

8
<script>
9
export default {
10
  name: 'CustomProgress',
11
  props: {
12
    progressWidth: {
13
      type: String,
14
      default: '100%'
15
    },
87 collapsed lines
16
    progressHeight: {
17
      type: String,
18
      default: '100%'
19
    },
20
    borderSize: {
21
      type: String,
22
      default: '1px'
23
    },
24
    borderColor: {
25
      type: String,
26
      default: '#304156'
27
    },
28
    borderRadius: {
29
      type: String,
30
      default: '5px'
31
    },
32
    rate: {
33
      type: Number,
34
      default: 0
35
    },
36
    rateColor: {
37
      type: String,
38
      default: '#ccc'
39
    },
40
    content: {
41
      type: String,
42
      default: ''
43
    },
44
    contentFontSize: {
45
      type: String,
46
      default: '15px'
47
    },
48
    contentFontColor: {
49
      type: String,
50
      default: '#304156'
51
    },
52
    contentTextAlign: {
53
      type: String,
54
      default: 'center'
55
    }
56
  },
57
  computed: {
58
    cssVars() {
59
      return {
60
        '--progressWidth': this.progressWidth,
61
        '--progressHeight': this.progressHeight,
62
        '--borderSize': this.borderSize,
63
        '--borderColor': this.borderColor,
64
        '--borderRadius': this.borderRadius,
65
        '--rate': this.rate + '%',
66
        '--rateColor': this.rateColor,
67
        '--contentFontSize': this.contentFontSize,
68
        '--contentFontColor': this.contentFontColor,
69
        '--contentTextAlign': this.contentTextAlign
70
      }
71
    }
72
  }
73
}
74
</script>
75

76
<style lang="scss" scoped>
77
.progress{
78
  width: var(--progressWidth);
79
  height: var(--progressHeight);
80
  border: var(--borderSize);
81
  border-color: var(--borderColor);
82
  border-style: solid;
83
  border-radius: var(--borderRadius);
84
  overflow: hidden;
85
  position: relative;
86
  .rate {
87
    position: absolute;
88
    height: 100%;
89
    width: var(--rate);
90
    background-color: var(--rateColor);
91
  }
92
  span {
93
    position: absolute;
94
    height: 100%;
95
    width: 100%;
96
    line-height: 100%;
97
    font-size: var(--contentFontSize);
98
    color: var(--contentFontColor);
99
    text-align: var(--contentTextAlign);
100
  }
101
}
102
</style>