Vue实现 Switch 开关按钮demo

HTML代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>switch 开关按钮</title&

Taojunhao

5067人浏览 · 2020-10-27 15:18:48

Taojunhao · 2020-10-27 15:18:48 发布

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>switch 开关按钮</title>
</head>
<body>
    <div id="app">
        <div class="switch">
            <div class="switch-bg" :class="{on:cur==1}">
                <div class="switch-btn" :class="{on:cur==1}" @click="openSwitch" ></div>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码

<style>
    .switch{
        width: 2rem;
        height: 1.1rem;
        border-radius: 50px;
        border: 1px solid #efefef;
        position: relative;
       
    }
    .switch-btn{
        width: 1.1rem;
        height: 1.1rem;
        border-radius: 50%;
        border: 1px solid #efefef;
        position: absolute;
        background-color: #fff;
        top: -1px;
        left: -1px;
        transition:left .5s;
        -moz-transition:left .5s; /* Firefox 4 */
        -webkit-transition:left .5s; /* Safari and Chrome */
        -o-transition:left .5s; /* Opera */
    }
    .switch-bg{
        background-color: #fd9152;
        width: 1rem;
        height: 1.1rem;
        border-radius: 50px;
        transition: width .5s;
        -moz-transition: width .5s; /* Firefox 4 */
        -webkit-transition:  width .5s; /* Safari and Chrome */
    }
    .switch-btn.on{
        left: 1rem;
    }
    .switch-bg.on{
       width: 2rem;
    }
    
</style>

JS代码

<script type="text/javascript" src="../../script/vuejs/vue.min.js"></script>
<script>
 window.onload = function(){
            var app = new Vue({
                el:'#app',
                data:{
                    cur:0
                },
                methods: {
                    openSwitch:function(){
                        this.cur = !this.cur;
                    }
                },
            });
        }
</script>

效果图
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^