<!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滑块的更多相关文章

  1. vue中引入swiper(vue中的滑块组件vue-awesome-swiper)

    第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import VueAwesomeSwiper from 'vue-awesome ...

  2. vue elementui switch开关控件的使用

    <el-switch @change="test" on-value="1" off-value="0" v-model=" ...

  3. [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 ...

  4. vue自定义switch开关，使用less支持换肤

    实际项目用到了,记录一下,也方便以后使用,这样也可以避免为了使用一个switch,引入整个外部web框架: 也可以方便更好的理解是和使用less. 基础代码使用的是网上的,然后自己添加了less换肤, ...

  5. vue mint ui 手册文档对于墙的恐惧

    http://www.cnblogs.com/smallteeth/p/6901610.html npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm ...

  6. vue mint ui 手册文档

    npm 安装 推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用. npm i mint-ui -S CDN 目前可以通过 unpkg.com/mint-ui 获取到最新版本 ...

  7. iOS系列 基础篇 09 开关、滑块和分段控件

    iOS系列 基础篇 09 开关.滑块和分段控件 目录: 案例说明 开关控件Switch 滑块控件Slider 分段控件Segmented Control 1. 案例说明 开关控件(Switch).滑块 ...

  8. 如何优雅的使用vue+vux开发app -03

    如何优雅的使用vue+vux开发app -03 还是一个错误的示范,但是离优雅差的不远了... <!DOCTYPE html> <html> <head> < ...

  9. 如何优雅的使用vue+vux开发app -02

    如何优雅的使用vue+vux开发app -02 很明显这又是一个错误的示范,请勿模仿 使用动态组件实现保留状态的路由 <!DOCTYPE html> <html> <he ...

随机推荐

  1. python实战提升--1

    #python实战提升 1. 如何在列表.字典.集合中根据条件筛选数据? python中for _ in range(10)与for i in range(10)有何区别 下划线表示 临时变量, 仅用 ...

  2. issue：ssh自动断开

    使用ssh连接云服务器的时候,几分钟不操作terminal就会卡住,实际上ssh连接已经断开了,感觉很不爽.(可能云服务器供应商在系统中做了设置) 解决办法: step1:vim /etc/ssh/s ...

  3. 二叉搜索树的平衡--AVL树和树的旋转

    二叉搜索树只有保持平衡时其查找效率才会高. 要保持二叉搜索树的平衡不是一件易事.不过还是有一些非常经典的办法可以做到,其中最好的方法就是将二叉搜索树实现为AVL树. AVL树得名于它的发明者 G.M. ...

  4. 完善版封装canvas分享组件

    import regeneratorRuntime from "../../../lib/regenerator-runtime/runtime"; let ctx = false ...

  5. Java学习笔记47（JDBC、SQL注入攻击原理以及解决）

    JDBC:java的数据库连接 JDBC本质是一套API,由开发公司定义的类和接口 这里使用mysql驱动,是一套类库,实现了接口 驱动程序类库,实现接口重写方法,由驱动程序操作数据库 JDBC操作步 ...

  6. python中不同文件中函数和类的调用

    最近在学习Python的时候,遇到了一个不同文件中类无法调用的问题,搜了很多,发现很多人针对 这个问题都说的相当含糊,让我费了好大劲才把这个东东搞明白.记录一下,权且温习. 调用分两种,一种是同种文件 ...

  7. Win10 Hyper-v下虚拟机使用无线网络

    首先要承认一点的是写这个随笔更大的初衷是想吐槽,搜了半天,全是一种方法,就是创建一个新的网络适配器,配置为外部网络啥啥啥,用倒是能用,就是网速那叫一个感人,我的是电信百兆光纤网页打开都如蜗牛爬,无法忍 ...

  8. Cellular Traffic Offloading

    Reference: [1] Mobile Data Offload for 3G Networks [2] Mobile Data Offloading through Opportunistic ...

  9. linux中变量的一些操作方法

    常见的一般有如下操作,可以对字符串进行简单操作: echo ${#var}打印变量var长度 echo "$var:3:8" 打印变量var第4个字符开始的8个字符echo ${v ...

  10. WebSocket connection to 'ws://xx:9502/' failed:Error in connection establishment:net::ERR_CONNECTION_TIMED_OUT

    1.首先看能否ping通服务器 2.telnet xx 9502之后能不能连通 3.如果连不通有可能是防火墙的问题 可以试试清空防火墙规则,或者关闭防火墙 iptables -F