快捷導(dǎo)航

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

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

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

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

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

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

因?yàn)镋lMessage的彈窗是彈出時(shí)才加上去的，所以提交修改樣式并沒(méi)有起到作用。

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

<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: "測(cè)試提示",type: "warning",duration:0})
</script>
<style>
</style>

vue3+element-plus動(dòng)態(tài)設(shè)置字體大小

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

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

2.動(dòng)態(tài)綁定需要改變字體大小的內(nè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號(hào)字體就字體大小相減
        if (val == 3) {
          state.size = state.size -= 1;
        } else {
          state.size = state.size += 1;
        }
      },

效果圖：

到此這篇關(guān)于VUE3使用Element-Plus時(shí)，修改ElMessage中的文字大小的文章就介紹到這了,更多相關(guān)vue 修改ElMessage文字大小內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: