<!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. 使用gulp+bebal实现前端自动化es6转es5的构建

    说明:es6语法已经越来越普及,但是一些低版本的浏览器不支持es6的语法特性,所以我们在开发完前端项目后,往往需要统一把前端es6的代码编译成es5的代码.本文介绍的就是如何手动和自动的把es6转成e ...

  2. 源设置导致Docker镜像构建失败

    编写了一个Dockerfile,主要目的是构建一个镜像,镜像默认安装了openjdk-1.8-jre,还有另外一些包(这些包里面有dev版本的,也有release版本的),Dockerfile的内容大 ...

  3. 第二十三节：Java语言基础-详细讲解函数与数组

    函数 函数在Java中称为方法,在其他语言中可能称为函数,函数,方法就是定义在类中具有特定功能的程序.函数,在Java中可称为方法. 函数的格式: 修饰符 返回值类型 函数名(参数类型 参数1, 参数 ...

  4. MySQL-Cluster 和主从(Master,Slave)搭建总结

    双主互备,主从 什么是双主 MultiSource 多源复制 原理及流程图 主要步骤 1,在 Master Server 上开启 bin log 日志 和 设置 server-id  :(在my.cn ...

  5. keepalived-1

    keepalived所执行的外部脚本命令建议使用绝对路径 vrrp 广播 keepalived的主要功能 1,管理LVS负载均衡软件 2,对LVS集群节点健康检查功能.Healthcheck 3,

  6. Spring MVC 后端获取前端提交的json格式字符串并直接转换成control方法对应的参数对象

    场景: 在web应用开发中,spring mvc凭借出现的性能和良好的可扩展性,导致使用日渐增多,成为事实标准,在日常的开发过程中,有一个很常见的场景:即前端通过ajax提交方式,提交参数为一个jso ...

  7. Linux - 修改内核启动顺序及删除无用内核

    现象: CentOS7开机启动界面显示多个内核选项 原因: 正常情况下,有两个启动项,一个是"正常启动",另一个是"救援模式启动"(rescue). 如果启动项 ...

  8. Go标准库之读写文件(File)

    Go标准库之读写文件(File) 创建一个空文件 package main import ( "log" "os" ) func main() { file, ...

  9. 常用的 git 命令清单

    (来自阮一峰的网络日志,看别人对git命令掌握的如此熟练,羡慕,但每次又记不得,无奈.供自己学习) git工作区,暂存区,版本库之间的关系: 我们建立的项目文件夹就是工作区,在初始化git(git i ...

  10. [每天解决一问题系列 - 0011] 如何清除Windows中的Icon缓存

    问题描述: 当更换一个应用或者快捷方式的图标后,会看到图标并没有及时更新 问题原因: 原因是Windows为了使图标显示更快,做了缓存%localappdata%\IconCache.db 解决方案: ...