elementui 开关文字显示在开关里面

  • 效果图

  • 在app.vue中直接添加一下代码即可
    在这里插入图片描述

<style lang="scss">
  .el-switch__label--left {
    position: relative;
    left: 45px;
    color: #fff;
    z-index: -1111;
  }
  .el-switch__core{
    width: 50px !important;
  }
  .el-switch__label--right {
    position: relative;
    right: 46px;
    color: #fff;
    z-index: -1111;
  }
  .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }

</style>
  • 开关上的字改为 开 关

active-text=“开”
inactive-text=“关”

posted @   HumorChen99  阅读(13)  评论(0编辑  收藏  举报  
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
点击右上角即可分享
微信分享提示