Blame view

admin-web-master/canvas-container/components/toolBar/toolModule/font-size-select.vue 1.42 KB
3f535f30   杨鑫   '初始'
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
  <template>
    <el-select class="fontSizeSelect" v-model="fontVal" placeholder="请选择" @change="fontChange">
      <el-option
        v-for="item in fontList"
        :key="item.value"
        :label="item.label"
        :value="item.value">
        <span :style="{fontSize:item.value+'px'}">{{ item.label }}</span>
      </el-option>
    </el-select>
  </template>
  
  <script>
    export default {
      name: 'font-size-select',
      props: {
        fontSize: {
          type: String,
          default: '12'
        }
      },
      data () {
        return {
          fontVal: '',
          fontList: [{
            value: '12',
            label: '12px'
          }, {
            value: '14',
            label: '14px'
          }, {
            value: '16',
            label: '16px'
          }, {
            value: '18',
            label: '18px'
          }, {
            value: '20',
            label: '20px'
          }, {
            value: '22',
            label: '22px'
          }, {
            value: '24',
            label: '24px'
          }, {
            value: '28',
            label: '28px'
          }, {
            value: '32',
            label: '32px'
          }, {
            value: '36',
            label: '36px'
          }]
        }
      },
      mounted () {
        this.fontVal = this.fontSize
      },
      methods: {
        // 获取类别
        fontChange (val) {
          this.$emit('update:fontSize', val)
        }
      }
    }
  </script>
  
  <style lang="scss" scoped>
    .fontSizeSelect{
      width: 100px;
    }
  </style>