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 相关文章推荐
javascript add event remove event
Apr 07 Javascript
js根据日期判断星座的示例代码
Jan 23 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
本人自用的global.js库源码分享
Feb 28 Javascript
jQuery中使用animate自定义动画的方法
May 29 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
浅谈jquery fullpage 插件增加头部和版权的方法
Mar 20 jQuery
jQuery实现列表的增加和删除功能
Jun 14 jQuery
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
Vue项目接入Paypal实现示例详解
Jun 04 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 常用函数库和一些实用小技巧
2009/01/01 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
JS实现pasteHTML兼容ie,firefox,chrome的方法
2016/06/22 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
基于jQuery和Bootstrap框架实现仿知乎前端动态列表效果
2016/11/09 Javascript
DVA框架统一处理所有页面的loading状态
2017/08/25 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
2017/10/14 Javascript
解决jquery的ajax调取后端数据成功却渲染失败的问题
2018/08/08 jQuery
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
jQuery实现的记住帐号密码功能完整示例
2019/08/03 jQuery
VUE项目中加载已保存的笔记实例方法
2019/09/14 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
vue 解决provide和inject响应的问题
2020/11/12 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[06:44]2018DOTA2亚洲邀请赛4.5 SOLO赛 MidOne vs Sumail
2018/04/06 DOTA
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
在Python的Django框架中使用通用视图的方法
2015/07/21 Python
python交互式图形编程实例(二)
2017/11/17 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
selenium设置浏览器为headless无头模式(Chrome和Firefox)
2021/01/08 Python
使用Python下载抖音各大V视频的思路详解
2021/02/06 Python
Stuart Weitzman美国官网:美国奢华鞋履品牌
2016/08/18 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
建材业务员岗位职责
2013/12/08 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
OpenCV绘制圆端矩形的示例代码
2021/08/30 Python
Spring Security中用JWT退出登录时遇到的坑
2021/10/16 Java/Android