vue.js封装switch开关组件的操作


Posted in Javascript onOctober 26, 2020

我的项目本来用的element,但是switch开关不符合设计要求,于是自己封装了一个switch组件,并且实现了switch开关的双向数据绑定

vue.js封装switch开关组件的操作

<template>
<label role="checkbox" :class="['switch', { toggled }]">
<input type="checkbox" class="switch-input" @change="toggle" />
<div
class="switch-core"
:style="{ backgroundColor: toggled ? colorChecked : colorUnchecked }"
>
<div
class="switch-button"
:style="{
transition: `transform ${speed}ms`,
transform: toggled ? null : `translate3d(32px, 0px, 0px)`
}"
></div>
</div>
<span class="switch-label label-right" v-if="toggled" v-html="labelChecked">
</span>
<span class="switch-label label-left" v-html="labelUnchecked" v-else>
</span>
</label>
</template>
<script>
export default {
 name: "ToggleSwitch",
 data() {
  return {
   toggled: this.value
  };
 },
 props: {
  value: {
   type: Boolean,
   default: true
  },
  speed: {
   type: Number,
   default: 100
  },
  labelChecked: {
   type: String,
   default: "启用"
  },
  labelUnchecked: {
   type: String,
   default: "停用"
  },
  colorChecked: {
   type: String,
   default: "#11CED2"
  },
  colorUnchecked: {
   type: String,
   default: "#E6EAF1"
  }
 },
 watch: {
  value: function(val) {
   this.value = val;
  }
 },
 methods: {
  toggle(event) {
   this.toggled = !this.toggled;
   this.$emit("update:value", this.toggled);
   this.$emit("change", event);
  }
 }
};
</script>
<style lang="scss" scoped>
.switch {
 display: inline-block;
 position: relative;
 overflow: hidden;
 vertical-align: middle;
 user-select: none;
 font-size: 10px;
 cursor: pointer;
 
 .switch-input {
  display: none;
 }
 
 .switch-label {
  position: absolute;
  top: 0;
  font-weight: 600;
  color: white;
 
  z-index: 2;
 
  &.label-left {
   left: 10px;
   line-height: 20px;
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
   color: #b5bdc8;
  }
 
  &.label-right {
   right: 10px;
   line-height: 20px;
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
  }
 }
 
 .switch-core {
  display: block;
  position: relative;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  transition: border-color 0.3s, background-color 0.3s;
  user-select: none;
  width: 46px;
  height: 20px;
  border-radius: 4px;
  line-height: 20px;
 
  .switch-button {
   width: 8px;
   height: 16px;
   display: block;
   position: absolute;
   overflow: hidden;
   top: 2;
   left: 2;
   z-index: 3;
   transform: translate3d(0, 0, 0);
   background-color: rgba(255, 255, 255, 1);
   border-radius: 4px;
   margin-top: 2px;
   margin-left: 2px;
  }
 }
}
</style>

调用开关组件

<toggle-switch
       v-model="value"
       :value.sync="value"
       @change="switchChange"
      >
      </toggle-switch>

组件实现了switch开关的双向数据绑定,在父组件的methods中写一个@change事件

switchChange() {
   console.log("switch值改变");
  },

补充知识:vue 监控el-switch控件值的变化

我要的效果是根据系统消息的推送范围决定推送人标签的显示,如下图两种情况:

——选择全站推送

vue.js封装switch开关组件的操作

——选择个人推送

vue.js封装switch开关组件的操作

——页面定义的data对象

vue.js封装switch开关组件的操作

el-switch标签控件的代码, v-model="entity.pushRange"绑定的是推送范围字段

<el-form-item label="推送范围:" :label-width="formLabelWidth" prop="pushRange">
    <el-switch
     v-model="entity.pushRange"
     active-color="#13ce66"
     inactive-color="#ff4949"
     active-text="全站"
     inactive-text="个人"
     @change="parens2($event)">
    </el-switch>
 </el-form-item>

下面的推送人id文本框,v-if=“FalgpushId”用来控制该文本框的显示,等于false时隐藏,true时显示(默认值为初始化时定义的FalgpushId = false,所以隐藏掉了)

<!-- 推送人id -->
 <el-form-item label="推送人ID:" :label-width="formLabelWidth" prop="pushId" v-if="FalgpushId">
   <el-input v-model="entity.pushId" :disabled="disabled" clearable></el-input>
 </el-form-item>

methods中的方法,通过$event写法来监控该控件值的变化

methods:{
 
  //该方法传入推送范围值,根据判断,决定是否展示其下面的推送人ID文本框
     parens2(value){
      let self = this ;
      if(value == false){
       //el-switch控件为 个人推送时,value为false
       self.FalgpushId = true;   //推送人id文本框显示  
       self.entity.pushRange = false; 
      }else if(value == true){
       //el-switch控件为 true 全站推送,value为true
       self.FalgpushId = false;   //推送人id文本框隐藏
       self.entity.pushRange = true;
      }
     },
 }

以上这篇vue.js封装switch开关组件的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 变量基础知识
Nov 07 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
jquery制作select列表双向选择示例代码
Sep 02 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
Jan 04 Javascript
原生js实现弹出层登录拖拽功能
Dec 05 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
vue中选中多个选项并且改变选中的样式的实例代码
Sep 16 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
Node.js利用Express实现用户注册登陆功能(推荐)
Oct 26 #Javascript
vue render函数动态加载img的src路径操作
Oct 26 #Javascript
vue实现简单的登录弹出框
Oct 26 #Javascript
让你30分钟快速掌握vue3教程
Oct 26 #Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 #Javascript
vue3+typescript实现图片懒加载插件
Oct 26 #Javascript
原生js实现简单轮播图
Oct 26 #Javascript
You might like
如何把php5.3版本升级到php5.4或者php5.5
2015/07/31 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
用js判断输入是否为中文的函数
2014/03/10 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
js倒计时简单实现代码
2016/08/11 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
2016/09/05 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
node上的redis调用优化示例详解
2018/10/30 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
2019/09/10 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
2019/11/01 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
[49:15]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第二场 1月19日
2021/03/11 DOTA
如何用Python合并lmdb文件
2018/07/02 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python中提高pip install速度
2020/02/14 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
python logging模块的使用
2020/09/07 Python
Python tkinter之Bind(绑定事件)的使用示例
2021/02/05 Python
四年大学自我鉴定
2014/02/17 职场文书
大学学习计划书范文
2014/05/02 职场文书
体育口号大全
2014/06/18 职场文书
检讨书大全
2015/01/27 职场文书
导游词之襄阳古城
2019/09/27 职场文书
浅谈Python实现opencv之图片色素的数值运算和逻辑运算
2021/06/23 Python
Python语言内置数据类型
2022/02/24 Python