Vue switch开关组件
时间:2020-05-30
本文章向大家介绍Vue switch开关组件,主要包括Vue switch开关组件使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
新建一个Switch组件
1 <template> 2 <div> 3 <span class="weui-switch" :class="{'weui-switch-on' : isChecked}" :value="value" @click="toggle" style="position:relative"> 4 <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"> 5 {{direction[0]}} 6 </div> 7 <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"> 8 {{direction[1]}} 9 </div> 10 </span> 11 </div> 12 </template> 13 <script> 14 export default { 15 name: 'switchComponent', 16 props: { 17 value: { 18 type: Boolean, 19 default: true 20 }, 21 text: { 22 type: String, 23 default: '' 24 } 25 }, 26 data () { 27 return { 28 isChecked: this.value 29 } 30 }, 31 computed: { 32 direction () { 33 if (this.text) { 34 return this.text.split('|') 35 } else { 36 return [] 37 } 38 } 39 }, 40 watch: { 41 value (val) { 42 this.isChecked = val 43 }, 44 isChecked(val) { 45 this.$emit('change', val); 46 } 47 }, 48 methods: { 49 toggle() { 50 this.isChecked = !this.isChecked; 51 } 52 } 53 } 54 </script> 55 <style> 56 .weui-switch { 57 display: block; 58 position: relative; 59 width: 52px; 60 height: 24px; 61 border: 1px solid #DFDFDF; 62 outline: 0; 63 border-radius: 16px; 64 box-sizing: border-box; 65 background-color: #DFDFDF; 66 transition: background-color 0.1s, border 0.1s; 67 cursor: pointer; 68 } 69 .weui-switch:before { 70 content: " "; 71 position: absolute; 72 top: 0; 73 left: 0; 74 width: 50px; 75 height: 22px; 76 border-radius: 15px; 77 background-color: #FDFDFD; 78 transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1); 79 } 80 .weui-switch:after { 81 content: " "; 82 position: absolute; 83 top: 0; 84 left: 0; 85 width: 22px; 86 height: 22px; 87 border-radius: 15px; 88 background-color: #FFFFFF; 89 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); 90 transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35); 91 } 92 .weui-switch-on { 93 border-color: #6F6F6F; 94 background-color: #1AAD19; 95 } 96 .weui-switch-on:before { 97 border-color: #1AAD19; 98 background-color: #409eff; 99 } 100 .weui-switch-on:after { 101 transform: translateX(28px); 102 } 103 </style>
在父组件中引入
<template> <div> <switch v-model="value" text="on|off"></switch> </div> </template> <script> import switch from './components/Switch' export default { name: "App", components: { switch }, data() { return { value:'' }, methods:{ } }; </script> <style lang="less"> </style>
效果如下
原文地址:https://www.cnblogs.com/z-j-c/p/12993933.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Pwnhub Web题Classroom题解与分析
- WTForm的URLXSS谈开源组件的安全性
- 谈一谈复杂的正则表达式分析
- Linux 用户名、主机添加背景色
- percona-toolkit大表操作DDL使用 2.1. 数据库字符集修改2.2. 数据库建库、授权操作2.3. 数据库建表、插入数据4.1. 添加表字段【
- PHPMailer 代码执行漏洞(CVE-2016-10033)分析(含通用POC)
- linux 平均负载 load average 的含义【转】
- zookeeper-01 概述
- zookeeper-02 部署
- zookeeper-03 命令行操作
- java连接zookeeper服务器出现“KeeperErrorCode = ConnectionLoss for ...”
- Linux 内存使用率
- CentOS7.4下编译Hadoop-2.7.6
- VMware安装CentOS6
- VMware安装CentOS7 3.1 主机名修改3.2 网卡名修改3.3 ifconfig安装