vue自定义switch开关组件,实现样式可自行更改


Posted in Javascript onNovember 01, 2019

用法:

import switchc from './public/switch'
<switchc v-model="value1" text="on|off"></switchc>

属性

text 非必填,类型为string,要求格式为“on|off” ,以 | 分隔

事件

change

html部分:

<template>
 <div>
   <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:relative">
  <div v-if="isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;line-height:20px;color:#FFF;user-select:none">
  {{direction[0]}}
  </div>
  <div v-if="!isChecked && direction.length > 0" style="width:100%;height:100%;position:absolute;padding:0 5px;right:2px;line-height:22px;color:#7A7A7A;text-align:right;user-select:none">
  {{direction[1]}}
  </div>
   </span>
 </div>
</template>

js部分:

<script>
 export default {
 name: 'switchComponent',
 props: {
    value: {
     type: Boolean,
     default: true
    },
    text: {
    type: String,
    default: ''
    }
   },
 data () {
  return {
  isChecked: this.value
  }
 },
 computed: {
  direction () {
  if (this.text) {
   return this.text.split('|')
  } else {
   return []
  }
  }
 },
 watch: {
     value (val) {
      this.isChecked = val
     },
    isChecked(val) {
     this.$emit('change', val);
    }
   },
   methods: {
    toggle() {
     this.isChecked = !this.isChecked;
    }
   }
 } 
</script>

style部分:

<style>
 .weui-switch {
   display: block;
   position: relative;
   width: 52px;
   height: 24px;
   border: 1px solid #DFDFDF;
   outline: 0;
   border-radius: 16px;
   box-sizing: border-box;
   background-color: #DFDFDF;
   transition: background-color 0.1s, border 0.1s;
   cursor: pointer;
  }
  .weui-switch:before {
   content: " ";
   position: absolute;
   top: 0;
   left: 0;
   width: 50px;
   height: 22px;
   border-radius: 15px;
   background-color: #FDFDFD;
   transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  }
  .weui-switch:after {
   content: " ";
   position: absolute;
   top: 0;
   left: 0;
   width: 22px;
   height: 22px;
   border-radius: 15px;
   background-color: #FFFFFF;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
   transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  }
  .weui-switch-on {
   border-color: #6F6F6F;
   background-color: #1AAD19;
  }
  .weui-switch-on:before {
   border-color: #1AAD19;
   background-color: #409eff;
  }
  .weui-switch-on:after {
   transform: translateX(28px);
  }
</style>

以上这篇vue自定义switch开关组件,实现样式可自行更改就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery each()源代码
Feb 14 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
浅析JS异步加载进度条
May 05 Javascript
Node.js配合node-http-proxy解决本地开发ajax跨域问题
Aug 31 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
JavaScript正则获取地址栏中参数的方法
Mar 02 Javascript
js微信分享实现代码
Oct 11 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
node.js实现微信开发之获取用户授权
Mar 18 Javascript
vue组件间通信六种方式(总结篇)
May 15 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
JavaScript 语句之常用 for 循环详解
Mar 29 Javascript
Vue实现导航栏的显示开关控制
Nov 01 #Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 #Javascript
vue设置导航栏、侧边栏为公共页面的例子
Nov 01 #Javascript
Vue中jsx不完全应用指南小结
Nov 01 #Javascript
vue导航栏部分的动态渲染实例
Nov 01 #Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 #Javascript
Vue-cli项目部署到Nginx服务器的方法
Nov 01 #Javascript
You might like
PHP中error_reporting()用法详解
2015/08/31 PHP
php 多文件上传的实现实例
2016/10/23 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
js 单引号 传递方法
2009/06/22 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
基于jquery实现无限级树形菜单
2016/03/22 Javascript
jQuery动态加载css文件实现方法
2016/06/15 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
vue-cli3.0 特性解读
2018/04/22 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
2020/04/13 Javascript
Python的pycurl包用法简介
2015/11/13 Python
Python jieba库分词模式实例用法
2021/01/13 Python
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
2013/02/07 HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Boston Proper官网:美国女装品牌
2017/10/30 全球购物
德国运动鞋网上商店:Afew Store
2018/01/05 全球购物
播音主持专业个人自我评价
2014/01/09 职场文书
优秀语文教师事迹
2014/05/18 职场文书
学校社会实践活动总结
2014/07/03 职场文书
预备党员个人总结
2015/02/14 职场文书
家庭经济困难证明
2015/06/23 职场文书
小学总务工作总结
2015/08/13 职场文书
省级三好学生主要事迹材料
2015/11/03 职场文书
使用Django实现商城验证码模块的方法
2021/06/01 Python