Vue实现 Switch 开关按钮demo

最新推荐文章于 2024-06-04 08:21:39 发布

Taojunhao

最新推荐文章于 2024-06-04 08:21:39 发布

阅读量5.1k

点赞数 1

分类专栏： HTML5 JavaScript CSS3 文章标签： css3 vue.js html5 css javascript

本文链接：https://blog.youkuaiyun.com/weixin_39994522/article/details/109311553

版权

JavaScript 同时被 3 个专栏收录

10 篇文章

订阅专栏

HTML5

5 篇文章

订阅专栏

CSS3

2 篇文章

订阅专栏

本文介绍了一个简单的开关按钮的实现方式，使用HTML、CSS和JavaScript（借助Vue.js）创建了一个具有平滑过渡效果的开关按钮。该按钮通过改变背景颜色和按钮位置来表示开关状态的变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

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