vue3+element-plus动态设置字体大小

1.先定义一个字体数据

 setup() {
   
    const state = reactive({
      size: 1, //默认字体大小值
      val: "",//双向绑定的值
      //字体数组
      posts: [
        { id: 1, name: "28", size: 1 },
        { id: 2, name: "32", size: 2 },
        { id: 3, name: "10", size: 2 },
      ],
})

2.动态绑定需要改变字体大小的内容 再遍历该数组

<span :style="{ fontSize: size + 'em' }">字体大小</span>
    <el-select v-model="val" @change="changtext">
      <el-option
        v-for="(item, index) in posts"
        :key="index"
        :label="item.name"
        :value="item.id"
      />
    </el-select>

3.选中事件   

 //选择字体事件
      changtext(val) {
        //如果选中的是10号字体就字体大小相减
        if (val == 3) {
          state.size = state.size -= 1;
        } else {
          state.size = state.size += 1;
        }
      },

效果图：