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-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
Jun 02 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
jQuery中$(function() {});问题详解
Aug 10 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
简单实现jQuery手风琴效果
Aug 18 jQuery
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
jQuery实现小火箭返回顶部特效
Feb 03 jQuery
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
解析dedecms空间迁移步骤详解
2013/05/15 PHP
如何利用PHP执行.SQL文件
2013/07/05 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
jQuery EasyUI API 中文文档 - ValidateBox验证框
2011/10/06 Javascript
js有序数组的连接问题
2013/10/01 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
js的回调函数详解
2015/01/05 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
2019/06/18 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
Python3如何解决字符编码问题详解
2017/04/23 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python opencv 直方图反向投影的方法
2018/02/24 Python
python: 自动安装缺失库文件的方法
2018/10/22 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
python实现浪漫的烟花秀
2019/01/30 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
jupyter notebook 中输出pyecharts图实例
2020/04/23 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
python多线程分块读取文件
2019/08/29 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
CSS3 Flexbox中flex-shrink属性的用法示例介绍
2013/12/30 HTML / CSS
联想美国官方商城:Lenovo美国
2017/06/19 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
高级电工工作职责
2013/11/21 职场文书
小学运动会班级口号
2014/06/09 职场文书
中文专业求职信
2014/06/20 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
小学体育教学随笔
2015/08/14 职场文书