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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vite如何實(shí)現(xiàn)構(gòu)建vue3新項(xiàng)目
這篇文章主要介紹了vite如何實(shí)現(xiàn)構(gòu)建vue3新項(xiàng)目方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-05-05
Vue3的Composition API是一個(gè)全新的API，它允許開(kāi)發(fā)人員將Vue組件中的邏輯封裝在單獨(dú)的功能性組合中，而不是依賴于Vue選項(xiàng)對(duì)象。這篇文章將深入探討Vue3的Composition API及其使用方法,需要的朋友可以參考下2023-07-07
vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)
本文主要介紹了vue項(xiàng)目展示pdf文件的方法實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
為了像微信一樣方便地加載更多歷史消息，這篇文章將為大家介紹我們?nèi)绾问褂胿ant組件來(lái)實(shí)現(xiàn)下拉加載功能，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06
elementui之el-table如何通過(guò)v-if控制按鈕顯示與隱藏
這篇文章主要介紹了elementui之el-table如何通過(guò)v-if控制按鈕顯示與隱藏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
在當(dāng)今數(shù)字化時(shí)代,視頻內(nèi)容的傳播變得極為普遍,然而,出于隱私保護(hù)等需求,我們常常需要對(duì)視頻中的人臉進(jìn)行打碼處理,所以本文將詳細(xì)介紹如何使用?face-api.js?庫(kù)來(lái)實(shí)現(xiàn)視頻人臉打碼的功能,需要的朋友可以參考下2025-04-04
Vue 讀取HTMLCollection列表的length為0問(wèn)題
這篇文章主要介紹了Vue 讀取HTMLCollection列表的length為0問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue3無(wú)痛遷移到Lyt.js的實(shí)現(xiàn)示例
本文主要介紹了Vue3無(wú)痛遷移到Lyt.js的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2026-04-04
vue中echarts圖表大小適應(yīng)窗口大小且不需要刷新案例
這篇文章主要介紹了vue中echarts圖表大小適應(yīng)窗口大小且不需要刷新案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07