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&
·
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>
效果图
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献3条内容
所有评论(0)