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文字大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • element中el-select的使用及说明

    element中el-select的使用及说明

    这篇文章主要介绍了element中el-select的使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue-lazyload使用总结(推荐)

    vue-lazyload使用总结(推荐)

    vue项目用到vue-lazyload做图片懒加载,这篇文章主要介绍了vue-lazyload使用总结,解决这个插件的坑,非常具有实用价值,需要的朋友可以参考下
    2018-11-11
  • vue2.0 和 animate.css的结合使用

    vue2.0 和 animate.css的结合使用

    animate.css是一款前端动画库,相似的有velocity-animate。这篇文章给大家介绍vue2.0 和 animate.css的结合使用,需要的朋友参考下吧
    2017-12-12
  • Vue中常见的几种传参方式小结

    Vue中常见的几种传参方式小结

    Vue组件的使用不管是在平常工作还是在面试面试中,都是频繁出现的,下面这篇文章主要给大家介绍了关于Vue中常见的几种传参方式的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • 基于VUE实现判断设备是PC还是移动端

    基于VUE实现判断设备是PC还是移动端

    这篇文章主要介绍了基于VUE实现判断设备是PC还是移动端,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • vue之数据代理详解

    vue之数据代理详解

    这篇文章主要为大家介绍了vue之数据代理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12
  • Vue中过滤器定义以及使用方法实例

    Vue中过滤器定义以及使用方法实例

    过滤器的功能是对要显示的数据进行格式化后再显示,其并没有改变原本的数据,只是产生新的对应的数据,下面这篇文章主要给大家介绍了关于Vue中过滤器定义以及使用方法的相关资料,需要的朋友可以参考下
    2022-11-11
  • vuejs 单文件组件.vue 文件的使用

    vuejs 单文件组件.vue 文件的使用

    本篇文章主要介绍了vuejs 单文件组件.vue 文件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue+vant-UI框架实现购物车的复选框全选和反选功能

    vue+vant-UI框架实现购物车的复选框全选和反选功能

    这篇文章主要介绍了vue+vant-UI框架实现购物车的复选框全选和反选功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-11-11
  • Vue中使用eslint和editorconfig方式

    Vue中使用eslint和editorconfig方式

    这篇文章主要介绍了Vue中使用eslint和editorconfig方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论