elementUI switch 内部显示文字

最新推荐文章于 2024-08-15 23:24:36 发布

EZZGJJA1

最新推荐文章于 2024-08-15 23:24:36 发布

阅读量530

点赞数

文章标签： elementui 前端 javascript

本文链接：https://blog.csdn.net/zhuangjiajia09/article/details/127769852

版权

这篇博客介绍了如何通过CSS来修改`.el-switch__core`元素的伪元素内容，实现自定义切换按钮显示的'高'和'低'文字。这种方法允许开发者在不改变HTML结构的情况下，轻松调整前端界面的状态指示。

摘要由CSDN通过智能技术生成

只需要加入一些css即可

/deep/ .el-switch__core::before {
    content: "高";
    position: absolute;
    top: 0;
    right: 5px;
    color: #fff;
  }
  .is-checked /deep/ .el-switch__core::before {
    content: "低";
    position: absolute;
    top: 0;
    left: 5px;
    color: #fff;
  }