elementUI switch控件应用记录

文字显示在switch内

问题场景

在使用时，switch开关表达意思不明显需要将相应的text文字信息展示出来。原控件显示文字在控件外，额外占用了页面空间，当在table中应用时页面体验不好。需要修改样式将文字显示在switch内。

方法

.el-switch {.el-switch__label {position: absolute;display: none;color: #fff;&.is-active {display: block;}}/*打开时文字位置设置*/.el-switch__label--right {z-index: 1;right: 6px;}/*关闭时文字位置设置*/.el-switch__label--left {z-index: 1;left: 6px;}.el-switch__core,.el-switch__label {width: 55px !important;}}

增加click事件(请求后再修改值)

问题场景

在使用swicth控件时，希望点击switch后，提交修改请求，请求返回正确后修改switch状态，否则，不修改。原switch只有change事件，可以在请求返回错误后将状态修改回去，但是这样页面会有一瞬间看到switch的改变且在状态复杂的情况下要做复杂的逻辑处理。

分析

change事件不能完美地满足需求，考虑如何为switch增加click事件，在click事件中进行操作

方法

switch设置disabled属性为true，阻止点击后自动切换状态
把@click换成@click.native(添加native监听根元素的原生事件，等同于子组件内部处理click事件然后向外发送click事件$emit("click".fn))
在click.native的事件处理里面改变status的值

<el-switchv-model="status"active-color="#13ce66"active-value="1"inactive-color="#ff4949"inactive-value="0"disabled@click.native="toggleStatus()"/>  <!-- 注意：在table中使用时，应该传row，这样在修改值后改行数据会相应地发生变化  -->methods: {toggleStatus() {console.log(this.status) // 原始值// 接口请求，数据处理，赋新值console.log(this.status) // 处理后的新值}
}

为了使添加了disabled switch样式保持非disabled样式，设置样式：

.el-switch {opacity: 1;&.is-disabled .el-switch__core, &.is-disabled .el-switch__label {cursor: pointer;}}

注意：设置样式不要影响正常disabled使用。

ClickSwitch组件

<template><div :class="{ disabled: !isDisabled }"><el-switchv-model="statue":active-value="activeValue":inactive-value="inactiveValue"active-color="#13ce66"inactive-color="#ff4949"disabled@click.native="toggleStatus()"/></div>
</template>
<script>
export default {name: 'ClickSwitch',props: {statue: {type: String,required: true},activeValue: {type: String,required: true},inactiveValue: {type: String,required: true},isDisabled: {type: Boolean,default: false}},methods: {toggleStatus() {this.$emit('toggleStatus', this.status)}}
}
</script>
<style lang="scss" rel="stylesheet/scss">.disabled .el-switch {opacity: 1;&.is-disabled .el-switch__core, &.is-disabled .el-switch__label {cursor: pointer;}}
</style>

使用

<click-switch:status="status":active-value="'1'":inactive-value="'0'"@toggleStatus="toggleStatus"
/>

elementUI switch控件应用记录相关推荐

基于vue和ElementUI时间选择控件的封装
基于vue和ElementUI时间选择控件的封装最近有个需求就是需要把查询控制在最近六个月,还要要求时间的可选范围,在网上找了好久都没有找到,于是就自己动手写了一个,希望对大家有所帮助,也是记录自己 ...
实现Repeater控件的记录单选(二)
前一篇<实现Repeater控件的记录单选>http://www.cnblogs.com/insus/p/7426334.html 虽然可以实现对Repeater控件的记录进行单选,但是, ...
laravel-admin form中的switch控件不改变状态提交后值为0
我的个人博客:逐步前行STEP 我把一个字段设默认值为0 需要审核操作通过设为1 不通过设为2 $states = ['on' => ['value' => 1, 'text' => ...
android switch 未定义,源生Switch控件在Android4.4无法显示？
首先,layout.xml代码如下: xmlns:tools="http://schemas.android.com/tools" android:layout_width=&qu ...
Switch控件详解
Switch控件详解原生效果 5.x 4.x 布局 <Switch android:id="@+id/setting_switch"android:layout_width ...
【Android控件属性记录】
#Android 控件属性记录方便查找控件属性: android属性 android功能强大,界面华丽,但是众多的布局属性就害苦了开发者,下面这篇文章结合了网上不少资料, 第一类:属性值为true ...
Android Switch控件修改样式
Android中自带的Switch控件在很多时候总觉得和整体系统风格不符,很多时候,自定义Switch是一种方法. 但其实不用这么麻烦,安卓自带的Switch通过修改一些属性,也可以达到和自定义Swi ...
ElementUI tree控件如何取得被选中的节点,以及父节点(即使没被全选)
ElementUI tree控件如何取得被选中的节点,以及父节点(即使没被全选) <el-tree:data="roleMenuData"node-key="id& ...
Switch控件的介绍和使用
写在前面 Switch控件的介绍和使用先看东西布局属性介绍 <Switchandroid:id="@+id/mSwitchView"android:theme=" ...
Android 4.0 Switch 控件用源代码实现
最近项目需要,在4.0 以前的版本上实现一个android 4.0 上的Switch控件,上网找了些例子,都不尽如人意.自己动手,丰衣足食.于是便翻看源码,找到4.0源码中Switch实现的方法.照样 ...

elementUI switch控件应用记录

目录

文字显示在switch内

问题场景

方法

增加click事件(请求后再修改值)

问题场景

分析

方法

ClickSwitch组件

使用

elementUI switch控件应用记录相关推荐

最新文章

热门文章