VUE3使用Element-Plus時如何修改ElMessage中的文字大小

更新時間：2023年09月18日 15:42:23 作者：專業(yè)研究祖?zhèn)鰾ug編寫術

在使用Element-plus的Elmessage時使用默認的size無法滿足我們的需求時,我們可以自定義字體的大小,但是直接重寫樣式后,并沒有起作用,甚至使用::v-deep深度選擇器也沒有效果,本文介紹VUE3使用Element-Plus時如何修改ElMessage中的文字大小,感興趣的朋友一起看看吧

VUE3使用Element-Plus時，修改ElMessage中的文字大小

在使用Element-plus的Elmessage時使用默認的size無法滿足我們的需求時，我們可以自定義字體的大小，但是直接重寫樣式后，并沒有起作用，甚至使用::v-deep深度選擇器也沒有效果。

<style >
.el-message__content {
  font-size: 28px;
}
</style>

因為ElMessage的彈窗是彈出時才加上去的，所以提交修改樣式并沒有起到作用。

我們可以通過動態(tài)添加CSS樣式來修改Element Plus中ElMessage的文字大小。以下是一個示例：我們設置了 .el-message__content 選擇器的字體大小為28px。您可以根據(jù)自己的需要調整字體大小。

<template>
</template>
<script setup>
import { ElMessage } from 'element-plus'
let style= document.createElement("style");
style.innerHTML = ".el-message__content{font-size:28px;}";
document.body.appendChild(style);
ElMessage({message: "測試提示",type: "warning",duration:0})
</script>
<style>
</style>

vue3+element-plus動態(tài)設置字體大小

1.先定義一個字體數(shù)據(jù)

 setup() {
    const state = reactive({
      size: 1, //默認字體大小值
      val: "",//雙向綁定的值
      //字體數(shù)組
      posts: [
        { id: 1, name: "28", size: 1 },
        { id: 2, name: "32", size: 2 },
        { id: 3, name: "10", size: 2 },
      ],
})

2.動態(tài)綁定需要改變字體大小的內容再遍歷該數(shù)組

<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;
        }
      },

效果圖：