脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 修改ElMessage文字大小

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

 更新时间：2023年09月18日 15:42:23   作者：专业研究祖传Bug编写术  
在使用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的弹窗是弹出时才加上去的，所以提交修改样式并没有起到作用。

我们可以通过动态添加CSS样式来修改Element Plus中ElMessage的文字大小。以下是一个示例：我们设置了 .el-message__content 选择器的字体大小为28px。您可以根据自己的需要调整字体大小。

<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动态设置字体大小

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

效果图：

到此这篇关于VUE3使用Element-Plus时，修改ElMessage中的文字大小的文章就介绍到这了,更多相关vue 修改ElMessage文字大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论