<!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>