首先,我们需要隐藏Switch组件默认的文字描述,这可以通过CSS的text-indent属性或者visibility属性来实现。 添加自定义的文字: 然后,我们可以在Switch组件的容器内部添加一个自定义的文字元素,并通过CSS定位将其放置在Switch的内部。 调整样式: 最后,我们需要调整自定义文字的样式,以确保其能够正确地显示在Switch的内部,并且...
.el-switch__core{width:65px!important; }.el-switch__label--left{position: absolute;left:24px;color:#fff;z-index: -1111;cursor: default; user-select: none; }.el-switch__label--right{position: absolute;right:24px;color:#fff;z-index: -1111;cursor: default; user-select: none; }.el-...
.el-switch__core { &:after { margin-left: -20px; left: 100%; } } } } &.is-checked { .el-switch__label--left { opacity: 0; } .el-switch__label--right { opacity: 1; } } .el-switch__label { position: absolute; top: 0; } .el-switch__label--left { right: 0; color...
<el-form-itemlabel="状态"prop="userSts">{{form.status?'启用':'禁用'}}<el-switchv-model="status":width="50"inactive-color="transparent"active-color="transparent"></el-switch></el-item-form> 最后编辑于:2022.06.27 23:31:46 ©著作权归作者所有,转载或内容合作请联系作者 UI库配置 更多精...
/deep/.switch .el-switch__label--left { z-index: 1; } /* 调整关闭时文字的显示位子 */ /deep/.switch .el-switch__label--left span{ margin-left: 9px; } /*显示文字*/ /deep/.switch .el-switch__label.is-active { display: block; ...
在styles中新建一个switch.scss的样式文件,并在index中引入。 通过改变文字的位置,做出这种好像是在开关上面显示文字的效果。 .el-switch__label{position:absolute;display:none;font-size:11px!important;color:#fff!important;}.el-switch__label*{font-size:11px!important;}/*打开时文字位置设置*/.el-switch...
Reproduction Related Component el-switch Reproduction Link Element Plus Playground Steps to reproduce 在el-form里面使用el-switch,点击el-form-item的label文案,会导致el-switch自动切换 What is Expected? 点击文案不会导致el-switch切换 What is actually happening?
element-plus / element-plus Public Sponsor Notifications Fork 16.5k Star 24.5k Code Issues 1.4k Pull requests 397 Discussions Actions Projects 2 Security Insights Issue Mark Duplicate [Component] [switch] 在el-form里面使用el-switch的时候,点击表单的文字会触发switch的切换 ...
开启关闭switch组件的说明文字功能注意事项 如下图: 关于开启时候文字在左侧,关闭时候文字在右侧,也开始可以通过弹性盒样式控制justifyContent:flex-start / flex-end;,当然动态padding也要加上,详情见代码 若将文字加入切换框内部,那么就需要让切换框背景容器dom的宽度自适应,即根据内容文字的多少来控制,所以要提到widt...
<el-switchclass="switchStyle"v-model="status":active-value="1":inactive-value="0"active-text="上架"inactive-text="下架"active-color="#13ce66"inactive-color="#ff4949"></el-switch>//css.switchStyle.el-switch__label{position:absolute;display:none;color:#fff;}.switchStyle.el-switch__label...