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 相关文章推荐
Js中获取frames中的元素示例代码
Jul 30 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
Mar 27 Javascript
js图片轮播手动切换特效
Jan 12 Javascript
angularjs下拉框空白的解决办法
Jun 20 Javascript
详解webpack进阶之插件篇
Jul 06 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
Nov 07 Javascript
node作为中间服务层如何发送请求(发送请求的实现方法详解)
Jan 02 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
Vue 列表上下过渡效果的实例代码
Jun 25 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&amp;MYSQL留言板源码
2020/07/19 PHP
MySql中正则表达式的使用方法描述
2008/07/30 PHP
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
用PHP代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
8个PHP程序员常用的功能汇总
2014/12/18 PHP
PHP使用逆波兰式计算工资的方法
2015/07/29 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
PHP实现字母数字混合验证码功能
2019/07/11 PHP
javascript版2048小游戏
2015/03/18 Javascript
js实现圆盘记速表
2015/08/03 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
分享javascript实现的冒泡排序代码并优化
2016/06/05 Javascript
Node.js中npm常用命令大全
2016/06/09 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
老生常谈angularjs中的$state.go
2017/04/24 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
[02:40]2018年度DOTA2最佳新人-完美盛典
2018/12/16 DOTA
Python实现远程调用MetaSploit的方法
2014/08/22 Python
python利用sklearn包编写决策树源代码
2017/12/21 Python
wxPython的安装图文教程(Windows)
2017/12/28 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python异常的检测和处理方法
2018/10/26 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
在python中使用pymysql往mysql数据库中插入(insert)数据实例
2020/03/02 Python
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
杨善洲电影观后感
2015/06/04 职场文书
离职证明范本
2015/06/12 职场文书