Switch 开关文字设置在一边显示

效果图

1.html

<el-switchv-model="value2"active-text="允许"inactive-text="禁止"active-value="1"inactive-value="0"active-color="#118a84"inactive-color="#d9d9d9"@input="clickSwitch(rowData)">
</el-switch>

2.css样式


::v-deep .el-switch {// width: 38px;// height: 20px;width: 44px;height: 22px;margin-left: 40px;
}::v-deep .el-switch__label {position: absolute;display: none;color: #606266;
}/*打开时文字位置设置*/
::v-deep .el-switch__label--right {z-index: 1;// left: 40px;right: 40px;
}/*关闭时文字位置设置*/
::v-deep .el-switch__label--left {z-index: 1;right:30px;
}::v-deep .el-switch__label * {line-height: 1.5;font-size: 16px;display: inline-block;
}/*显示文字*/
::v-deep .el-switch__label.is-active {display: block;width: 40px;
}::v-deep.el-switch .el-switch__core,
.el-switch .el-switch__label {width: 50px !important;
}

Switch 开关文字设置在一边显示相关推荐

android开发中Switch开关在Dialog中不显示
今天遇到个问题,在dialog中switch开关不显示,而且还把texton 与textoff默认定为"开启","关闭".百度无果.google随便找了下也只看 ...
element-ui switch开关打开和关闭时的文字设置样式
element switch开关文字显示 element中switch开关把on-text 和 off-text 属性改为 active-text 和 inactive-text 属性.怎么把文字描述 ...
Android TextView 文字设置不同字体大小和颜色样式
在TextView中,由于开发需求,需要显示不同的字体形状和颜色,所以这就需要利用不同的样式来显示了查找相关资料发现有api可以提供 SpannableString 就可以对一段文字设置不同的显示 ...
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面
Element ui 中将switch开关自定义文字描述(ON/OFF)显示在开关里面官网示例可以看出文字描述在开关两边,看着很别扭. 上代码 <el-switchv-model=" ...
【小程序】手动实现switch开关中带文字效果（开关左右文字相同/不同都可以）
最终效果: 左右文字宽度相同左右文字宽度不同左右长度相同效果:配合wx:show切换注意:左右长度相同的话可以设置合适的相同的宽度. html: <view class="sw ...
uniapp switch开关插件带文字/icon图标功能实现
uniapp switch开关功能最近公司电商app确认订单页面种配送方式由默认的快递改为了快递+自提的可选择配送方式. 这个功能是需要用到switch开关功能. 为了实现能够展示文字的这种方式,通 ...
elementui中，表格里的文字设置指定行溢出显示省略号，并且鼠标放上去能看到全部的文字
嗨害嗨,我又来了奥.今天呢,遇到有人问了一个这样的问题,就是如果在elementui中,表格里的文字设置指定行溢出显示省略号,并且鼠标放上去能看到全部的文字,该怎么做. 首先,我们知道elementu ...
echarts饼图 mouseover中间部分文字样式设置，默认显示总和
需求描述需求要求利用echarts的饼图对企业数量进行统计,要求默认饼图中间显示全部企业数量,鼠标移动上去,则显示对应部分的企业数量,并且设置样式. 效果图具体代码 let TrendCha ...
IOS label设置多行显示并且文字在最上方显示
var customLabel = new UILabel (new RectangleF(10,10,300,30)); customLabel.Text ="Display this t ...

Switch 开关文字设置在一边显示

Switch 开关文字设置在一边显示相关推荐

最新文章

热门文章

Switch 开关 文字设置在一边显示

Switch 开关 文字设置在一边显示相关推荐

最新文章

热门文章

Switch 开关文字设置在一边显示

Switch 开关文字设置在一边显示相关推荐