vue自制switch滑块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>swtich滑块插件</title>
<!--大神地址 https://segmentfault.com/a/1190000014187619-->
<style>
/* switch滑块的css */
.weui-switch {
display: block;
position: relative;
width: 52px;
height: 32px;
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: 30px;
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: 30px;
height: 30px;
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: #1AAD19;
background-color: #1AAD19;
}
.weui-switch-on:before {
border-color: #1AAD19;
background-color: #1AAD19;
}
.weui-switch-on:after {
transform: translateX(20px);
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<span class="weui-switch" :class="{'weui-switch-on' : me_checked}" @click="toggle"></span>
</div>
<script>
new Vue({
el: '#app',
data: {
me_checked: true
},
methods: {
toggle() {
this.me_checked = !this.me_checked;
}
}
})
</script>
</body>
</html>
vue自制switch滑块的更多相关文章
- vue中引入swiper(vue中的滑块组件vue-awesome-swiper)
第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...
- vue elementui switch开关控件的使用
<el-switch @change="test" on-value="1" off-value="0" v-model=" ...
- [Vue @Component] Switch Between Vue Components with Dynamic Components
A common scenario is to present different components based on the state of the application. Dynamic ...
- vue自定义switch开关，使用less支持换肤
实际项目用到了,记录一下,也方便以后使用,这样也可以避免为了使用一个switch,引入整个外部web框架: 也可以方便更好的理解是和使用less. 基础代码使用的是网上的,然后自己添加了less换肤, ...
- vue mint ui 手册文档对于墙的恐惧
http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...
- vue mint ui 手册文档
npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...
- iOS系列 基础篇 09 开关、滑块和分段控件
iOS系列 基础篇 09 开关.滑块和分段控件 目录: 案例说明 开关控件Switch 滑块控件Slider 分段控件Segmented Control 1. 案例说明 开关控件(Switch).滑块 ...
- 如何优雅的使用vue+vux开发app -03
如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...
- 如何优雅的使用vue+vux开发app -02
如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...
随机推荐
- zabbix docker - 安装和初始化配置
zabbix docker - 安装和初始化配置 安装zabbix server docker-mysql版本 zabbix server支持不同的数据库(详见zabbix的docker hub),这 ...
- Adobe Photoshop CC 2019画板背景色白底如何去掉？
Adobe Photoshop CC 2019画板背景色白底切透明图片很不方便,有两种方法可以解决: 第一种方法: 新建文档的时候直接背景内容直接选择透明 若设计师提供的设计稿是白底也没关系,就是第二 ...
- samba 配置文件解析
[global] #定义全局策略 workgroup=MYGROUP #定义工作组 netbios name=MYSERVER #指定NetBios名称 interfaces=lo 192.168.1 ...
- 一篇入门 -- Git
一. Git 介绍 Git作为一款分布式的==版本控制==工具,作为一名程序员,是必须要掌握的. 最初由林纳斯·托瓦兹(Linus Torvalds)创作,于2005年以GPL发布.最初目的是为更好地 ...
- Android开发工程师文集-layout_weight讲解
前言 大家好,给大家带来Android开发工程师文集-layout_weight讲解的概述,希望你们喜欢 Layout_weight的相关代码展示 <TextView android:layou ...
- Typescript 学习笔记四：回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- 初识Telerik for AJAX
由于项目需要,本人又刚入门.net开发,项目经理介绍了一个.net流行的开发框架telerik.于是我开始慢慢学习了,发现这个控件还是不错的,学习到的内容和初学者一起探讨一下. 1:第一步 什么是te ...
- 13-部署traefik-ingress插件
Kubernetes traefik ingress安装 Ingress简介 如果你还不了解,ingress是什么,可以先看下我翻译的Kubernetes官网上ingress的介绍Kubernetes ...
- 远程工作社区|远程工作|APCOW社区|AP社区
远程工作社区|远程工作|APCOW社区|AP社区 远程工作,那是高中时代就进入我眼帘的一种生活.由于各种电影的摧残,倒是我对国外程序员的生活一直很向往.今天在纽约,下周在旧金山,过段时间又回到了自己的 ...
- Android多线程编程<二>Handler异步消息处理机制之Message
Message(消息): 一. Message的字段: 在Android中,Message作为线程之间(主要是子线程和UI主线程之间)数据交换的载体,通过Handler去传递.它 ...