由于el-switch原生不支持文字内置,我们可以通过以下几种方式来实现这一功能: 方案一:修改CSS样式 通过CSS样式调整,可以将active-text和inactive-text的文字定位到开关按钮内部。这种方法需要对Element UI的CSS结构有一定了解,并可能涉及到使用!important等强制覆盖样式的方式。 示例CSS: css .el-switch__label { positi...
el-element plus已经实现了该功能了,其实主要就是改样式。 效果图 样式修改 <el-switchv-model="value"active-color="#13ce66"active-text="在读"inactive-text="毕业"inactive-color="#ff4949"></el-switch> .el-switch__core{width:65px!important; }.el-switch__label--left{position: absolute;left:...
开启关闭switch组件的说明文字功能注意事项 如下图: 关于开启时候文字在左侧,关闭时候文字在右侧,也开始可以通过弹性盒样式控制justifyContent:flex-start / flex-end;,当然动态padding也要加上,详情见代码 若将文字加入切换框内部,那么就需要让切换框背景容器dom的宽度自适应,即根据内容文字的多少来控制,所以要提到widt...
关于开启时候文字在左侧,关闭时候文字在右侧,也开始可以通过弹性盒样式控制justifyContent:flex-start / flex-end;,当然动态padding也要加上,详情见代码 若将文字加入切换框内部,那么就需要让切换框背景容器dom的宽度自适应,即根据内容文字的多少来控制,所以要提到width: fit-content;属性(使用fit-content属性,让宽度随...