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 相关文章推荐
JQery 渐变图片导航效果代码 漂亮
Jan 01 Javascript
JS的replace方法介绍
Oct 20 Javascript
多种方法判断Javascript对象是否存在
Sep 22 Javascript
ECMAScript6中Set/WeakSet详解
Jun 12 Javascript
JavaScript数组对象赋值用法实例
Aug 04 Javascript
jQuery实现获取绑定自定义事件元素的方法
Dec 02 Javascript
详解iframe与frame的区别
Jan 13 Javascript
jquery.validate提示错误信息位置方法
Jan 22 Javascript
前端学习笔记style,currentStyle,getComputedStyle的用法与区别
May 28 Javascript
微信小程序 实现拖拽事件监听实例详解
Nov 16 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
对vuex中getters计算过滤操作详解
Nov 06 Javascript
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
PHP函数引用返回的实例详解
2016/09/11 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
子页向父页传值示例
2013/11/27 Javascript
JavaScript省市联动实现代码
2014/02/15 Javascript
浅谈Javascript Base64 加密解密
2014/12/28 Javascript
jQuery调取jSon数据并展示的方法
2015/01/29 Javascript
深入分析Javascript跨域问题
2015/04/17 Javascript
jquery读取xml文件实现省市县三级联动的方法
2015/05/29 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
vue2.0使用swiper组件实现轮播效果
2017/11/27 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
2018/12/13 Javascript
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
2019/11/01 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
[17:45]DOTA2 HEROES教学视频教你分分钟做大人-军团指挥官
2014/06/11 DOTA
Python urllib、urllib2、httplib抓取网页代码实例
2015/05/09 Python
python实现决策树
2017/12/21 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
四种会话跟踪技术
2015/05/20 面试题
蛋糕店的商业计划书范文
2014/01/27 职场文书
公务员综合考察材料
2014/02/01 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
情人节活动策划方案
2014/02/27 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
党的群众路线教育实践活动个人自我剖析材料
2014/10/07 职场文书
计划生育工作总结2015
2015/04/03 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
快速学习Oracle触发器和游标
2021/06/30 Oracle
SQL Server删除表中的重复数据
2022/05/25 SQL Server