【el-switch 开关文字描述显示在按钮上】

原创已于 2022-02-21 15:29:45 修改 · 2.2k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Element

CSS

于 2022-02-21 14:45:40 首次发布

本文总结了el-switch组件的使用，并展示了如何将文字描述显示在开关按钮上的技巧，包括相关图示和实例代码。

文章目录

前言
- 开关文字描述显示在按钮上

前言

el-switch 使用总结

开关文字描述显示在按钮上

图示：
在这里插入图片描述
实例代码：


	// el-popover
	<el-popover
	   style="padding-right: 7px"
	   placement="bottom"
	   width="258"
	   trigger="click">
	   
		// switch 组件
		...
	    <div style="padding-top: 10px;display: flex;align-items: center;justify-content: space-between;">
	       <div style="display:flex; align-items: center;">
	       <span style="width: 8px;height: 8px;background: #FE8112;border-radius: 50%;"></span>
	       <span style="margin-left:5px;">IEP Children (In yellow color)</span>
	       </div>
	       <el-switch
	           class="defineSwitch"
	           v-model="iepShow"
	           active-color="rgb(136, 204, 136)"
	           inactive-color="rgb(224, 224, 224)"
	           :active-value=true
	           :inactive-value=false
	           active-text="on"
	           inactive-text="off">
	       </el-switch>
	   </div>
	   ...
       <el-button size="medium" slot="reference"><i class="fa fa-cog"></i>{{ $t('loc.settingType') }}</el-button>
    </el-popover>


	// el-switch 覆盖 CSS
	...
	.tableScopeSwitch .el-switch__label {
	    position: absolute;
	    display: none;
	    color: #fff;
	}
	/*打开时文字位置设置*/
	.tableScopeSwitch .el-switch__label--right {
	    z-index: 1;
	    right: 6px;    /*不同场景下可能不同，自行调整*/
	}
	/*关闭时文字位置设置*/
	.tableScopeSwitch .el-switch__label--left {
	    z-index: 1;
	    left: 6px;    /*不同场景下可能不同，自行调整*/
	}
	/*显示文字*/
	.tableScopeSwitch .el-switch__label.is-active {
	    display: block;
	}
	.tableScopeSwitch.el-switch .el-switch__core,
	.el-switch .el-switch__label {
	    width: 75px !important;    /*开关按钮的宽度大小*/
	}
	...

标签

#javascript #css #css3