<!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. docker 容器和镜像理解

    1.镜像是Docker容器的基石,容器是镜像的运行实例,有了镜像才能启动容器.容器和镜像是一对一的,一个容器里就运行一个镜像. 1.base镜像----提供了一个基本的操作系统环境,用户可以根据需要安 ...

  2. AFNetworking 3.0中调用[AFHTTPSessionManager manager]方法导致内存泄漏的解决办法

    在使用AFNetworking3.0框架,使用Instruments检查Leaks时,检测到1000多个内存泄漏的地方,定位到 [AFHTTPSessionManager manager] 语句中,几 ...

  3. Go Code Review Comments 译文（截止2018年7月27日）

    持续更新中- 原文最新链接 https://github.com/golang/go/wiki/CodeReviewComments/5a40ba36d388ff1b8b2dd4c1c3fe820b8 ...

  4. visual studio单项目一次生成多框架类库、多框架项目合并

    目录 不同平台框架项目使用同一套代码,一次编译生成多个框架类库 需要先了解的东西 分析 添加PropertyGroup 多目标平台 编译符号和输出目录设置 添加依赖 代码文件处理 主副平台项目文件处理 ...

  5. kaldi的TIMIT实例一

    TIMIT语音库是IT和MIT合作音素级别标注的语音库,用于自动语音识别系统的发展和评估,包括来自美式英语,8个地区方言,630个人. 每个人读10个句子,每个发音都是音素级别.词级别文本标注,16k ...

  6. “全栈2019”Java多线程第三十七章：如何让等待的线程无法被中断

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  7. apache环境之困扰，Rewrite导致无法加载多个不同的.html文件

    又是一个项目,为访问多个纯静态html页面h5游戏页,能够做一些简单分享和跳转即可.原本是一个简单得不能的项目,但是却多生了事端. 我按照apache的惯例,将文件上传到服务器的DocumentRoo ...

  8. Web开发经验谈之F12开发者工具/Web调试[利刃篇]

    引语:如今的整个Web开发行业甚至说整个软件开发行业,已经相当成熟,基本上已经很少找不到没有前人做过的东西了,或者换句话说,你想要实现的功能,你总能在某个地方搜索到答案,关键是你有没有这个时间精力去搜 ...

  9. 人脸检测----Adaboost学习方法

    有了haar特征,有了提升性能的积分图,是不是已经可以很好的解决人脸检测问题了?答案是:no. 因为,计算每一个特征值的时候速度都大幅提升了,但是,一个小小的24*24是人脸图像根据不同的位置, 以及 ...

  10. Liferay7 BPM门户开发之20: 理解Asset Framework

    Asset框架用于将您开发的门户内容添加Liferay的核心系统功能.打个比方,你开发了一个事件TodoList管理的插件,在列表显示的时候,你可以集成Asset框架,让你的自定义内容支持Tag标签. ...