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 ...
随机推荐
- 关于SQL\SQL Server的三值逻辑
在SQL刚入门的时候,我们筛选为某列值为NULL的行,一般会采用如下的方式: SELECT * FROM Table AS T WHERE T.Col=NULL 而实际上此种写法无法得到想要的结果.此 ...
- ASP.NET MVC下使用AngularJs语言(三)：ng-options
今天使用angularjs的ng-options实现一个DropDownList下拉列表. 准备ASP.NET MVC的model: public class MobilePhone { public ...
- [转]kaldi中的特征提取
转:http://blog.csdn.net/wbgxx333/article/details/25778483 本翻译原文http://kaldi.sourceforge.net/feat.html ...
- linux安全加固浅谈
难易程度:★★★阅读点:linux;python;web安全;文章作者:xiaoye文章来源:i春秋关键字:网络渗透技术 前言linux被越来越多的企业使用,因此掌握一些基本的linux安全加固是有必 ...
- 开源播放器 ijkplayer (四) ：Ijkplayer切换网络时停止播放的问题处理
问题起因: 在进行ijkplayer播放器的测试时,发现ijkplayer播放器在切换网络时出现直播画面停止的问题. 问题分析: 抓取日志发现:tv.danmaku.ijk.media.player. ...
- LeetCode--No.016 3Sum Closest
16. 3Sum Closest Total Accepted: 86565 Total Submissions: 291260 Difficulty: Medium Given an array S ...
- django rest framework通用view
官方文档:http://www.django-rest-framework.org/ drf为我们提供强大的通用view的功能,本博客对这些view进行简要的总结分析. 首先,我们看一下主要的几种vi ...
- 【sping揭秘】20、spring的orm
面向对象的操作方式,spring统一定义在org.springframework.jdbc.object以RdbmsOperation作为顶层抽象定义 Spring对各种ORM的集成 Spring的集 ...
- 【转】浮点数与IEEE 754
http://www.cnblogs.com/kingwolfofsky/archive/2011/07/21/2112299.html 浮点数 1. 什么是浮点数 在计算机系统的发展过程中,曾经 ...
- C# 算法之链表、双向链表以及正向反向遍历实现
1.简介 链表是一种非常基础的数据结构之一,我们在日常开发种都会接触到或者是接触到相同类型的链表数据结构.所以本文会使用C#算法来实现一个简单的链表数据结构,并实现其中几个简单的api以供使用. 2. ...