zoukankan      html  css  js  c++  java
  • vue自制switch滑块

    <!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>
  • 相关阅读:
    Apache(文章测试)
    这是一篇Markdown手册
    Linux MySQL 8.0 忘记密码
    composer 自动加载源码解析
    Linux 连接 Internet
    PHP namespace、abstract、interface、trait使用介绍
    网络基础知识
    CentOS7安装Nginx、MySQL、PHP
    局域网内使用ssh连接两台计算机总结
    整数和浮点数的表示方法
  • 原文地址:https://www.cnblogs.com/cengjingdeshuige/p/9152006.html
Copyright © 2011-2022 走看看