<!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. 6.装配Bean基于注解

    1.注解:就是一个类,使用@注解名称 开发中:使用注解 取代 xml配置文件. @Component取代<bean class=""> @Component(" ...

  2. Swift学习目录

    本学习基于苹果官方Swift学习材料,保留了原版90%左右的内容(一些项目开发中基本不用的知识点没有整理),并根据理解进行整理.如对原版感兴趣,可以直接单击链接阅读和学习. 第一部分 基础篇 1.基本 ...

  3. Rabbit RPC 代码阅读（一）

    前言 因为想对RPC内部的机制作一个了解,特作以下阅读代码日志,以备忘. RPC介绍 Rabbit RPC 原理可以用3点概括: 1.服务端启动并且向注册中心发送服务信息,注册中心收到后会定时监控服务 ...

  4. 浅谈ESB中的DataRow、DataSet、DataBag 、DataBox

    1 背景概述 笔者在学习公司产品AEAI ESB 的时候经常需要从数据库获取信息并将数据信息保存到一个结果变量中,为统计分析提供特定格式的数据以及跨数据库同步数据时通常会用到DataRow.DataS ...

  5. Cordova - 安装camera插件之后编译错误解决方法！

    安装camera插件之后,编译出错,错误截图如下: 刚开始以为是AAPT编译导致的,尝试关闭AAPT编译选项,但是不行,认真看了一下编译出错信息,应该是缺少文件导致的,随后在对应的目录中加入了缺失的文 ...

  6. Trinity的分步运行

    当使用Trinity组装时,如果数据量过大,可以考虑使用--min_kmer_cov 2参数丢弃uniquely occurring kmer, 从而降低内存消耗 设置--no_distributed ...

  7. IPv6技术详解：基本概念、应用现状、技术实践（下篇）

    本文来自微信技术架构部的原创技术分享. 1.前言 在上篇<IPv6技术详解:基本概念.应用现状.技术实践(上篇)>,我们讲解了IPV6的基本概念. 本篇将继续从以下方面展开对IPV6的讲解 ...

  8. Android Studio 配置 androidAnnotations框架详细步骤

    第一步:打开app的build.gradle文件 第二步:添加下面红色的部分 apply plugin: 'com.android.application' android { compileSdkV ...

  9. Swift5 语言指南(十八) 可选链接

    可选链接是一个查询和调用当前可选的可选项的属性,方法和下标的过程nil.如果optional包含值,则属性,方法或下标调用成功; 如果是可选的nil,则返回属性,方法或下标调用nil.多个查询可以链接 ...

  10. Typescript 学习笔记四：回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...