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 相关文章推荐
js innerHTML 的一些问题的解决方法
Jun 22 Javascript
javascript学习(二)javascript常见问题总结
Jan 02 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
Jun 26 Javascript
原生js实现ajax方法(超简单)
Sep 20 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
浅谈Koa服务限流方法实践
Oct 23 Javascript
在vue中使用jointjs的方法
Mar 24 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
Aug 02 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
通过实例了解Javascript柯里化流程
Mar 03 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脚本数据库功能详解(上)
2006/10/09 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
php计算两个文件相对路径的方法
2015/03/14 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
jquery处理页面弹出层查询数据等待操作实例
2015/03/25 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
浅析JS中回调函数及用法
2018/07/25 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
2019/03/05 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
[03:04]2018年国际邀请赛典藏宝瓶&莱恩声望物品展示 片尾有彩蛋
2018/06/04 DOTA
python搜索指定目录的方法
2015/04/29 Python
python爬虫入门教程--利用requests构建知乎API(三)
2017/05/25 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
python使用tensorflow保存、加载和使用模型的方法
2018/01/31 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Django 在iframe里跳转顶层url的例子
2019/08/21 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
如何把python项目部署到linux服务器
2020/08/26 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
python中re模块知识点总结
2021/01/17 Python
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
adidas马来西亚官网:adidas MY
2020/09/12 全球购物
大专会计自我鉴定
2014/02/06 职场文书
小学教师培训感言
2014/02/11 职场文书
幼儿园运动会加油词
2014/02/14 职场文书
局机关干部群众路线个人对照检查材料思想汇报
2014/10/05 职场文书
2014年第四季度入党积极分子思想汇报(十八届四中全会)
2014/11/03 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
企业团队精神心得体会
2016/01/19 职场文书