<!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. java数组-如何在一堆数据中使用数组！

    数组 1.类型一致的一组数据,其实相当于集合概念. 数组描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成.其中,每一个数据称作一个数组元素(item),每个数组元素可以通过一个下标/索引来 ...

  2. InnoDB体系架构（二）内存

    InnoDB体系架构(二)内存 上篇文章 InnoDB体系架构(一)后台线程 介绍了MySQL InnoDB存储引擎后台线程:Master Thread.IO Thread.Purge Thread. ...

  3. Javascript高级编程学习笔记（3）—— JS中的数据类型（1）

    前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...

  4. [CocoaPods]CocoaPods安装详解

    安装CocoaPods之前先安装ruby: 1.安装ruby ruby官网rubygems.org已被屏蔽,替换当前镜像是否为国内镜像. $gem sources --add https://gems ...

  5. Python--DBUtil

    Python--DBUtil包 1 简介 DBUtils是一套Python数据库连接池包,并允许对非线程安全的数据库接口进行线程安全包装.DBUtils来自Webware for Python. DB ...

  6. JavaScript防篡改对象

    不可扩展对象 默认情况下,所有对象都是可扩展的,使用Object.preventExtensions()方法可以改变这一行为. var person = { name: "Hiram&quo ...

  7. [Umbraco] umbraco中如何分页

    分页功能应该说是web开发中最基本的功能了,常规的做法是通过查询sql语句进行分页数据显示.但在umbraco中却不是这样子的.而且通过xpath中的postion来定位.如下代码 <?xml ...

  8. Asp.Net Core 发布异常 502.5 [The Application process failed to Start]

    出现这个问题大部分时间都是因为发布时,少打包了一些文件.. 只打包了.Net Core的运行时库,没有打包Asp.Net Core 运行时.. 需要在打包指导文件中加入以下节点 <Propert ...

  9. A Painless Q-learning Tutorial (一个 Q-learning 算法的简明教程)

        本文是对 http://mnemstudio.org/path-finding-q-learning-tutorial.htm 的翻译,共分两部分,第一部分为中文翻译,第二部分为英文原文.翻译 ...

  10. Java基础 - 线程（一）

    一.什么是线程 首先,介绍一下线程.进程的概念. 进程是操作系统分配资源的最小单元,线程是操作系统调度的最小单元.进程是指运行中的应用程序,Windows任务管理器进程窗口看到的每一项都是一个进程.每 ...