您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“vue怎么实现移动端的开关按钮”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue怎么实现移动端的开关按钮”吧!
1.写一个椭圆形的div
2.动态改变这个椭圆形的div的背景颜色
3.写一个圆点,这个圆点采用绝对定位的方式,定位在椭圆形的div上
4.开关来回切换的时候,要使用translateX移动圆点的位置,并且动态改变椭圆形 div的背景颜色
html:
<!--部门功能--> <div class="department"> <div class="department-l">部门功能</div> <div class="department-r"> {{isShow?'开启':'关闭'}} <span class="switch" :class="{on:isShow}" @click.stop="switchDepartment"> <div class="switch-circle" :class={right:isShow}></div> </span> </div> </div>
css:
.department { height: px2rem(178); background: #ffffff; padding: 0 px2rem(66) 0; margin-top: px2rem(4); display: flex; justify-content: space-between; .department-l { line-height: px2rem(178); font-size: px2rem(53); ccolor: #303030; } .department-r { line-height: px2rem(178); font-size: px2rem(50); color: #454545; } } .switch{ display: inline-block; width: px2rem(140); height: px2rem(86); background: #DBDBDB; border-radius: px2rem(331); position: relative; vertical-align: middle; margin-left: px2rem(31); .switch-circle{ position: absolute; left: px2rem(6); top: px2rem(6); width: px2rem(73); height: px2rem(73); border-radius: 50%; background: #fff; } } .on{ background: -webkit-linear-gradient(left, #19A89F, #9CDD97); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right, #19A89F, #9CDD97 ); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right, #19A89F , #9CDD97); /* Firefox 3.6 - 15 */ background: linear-gradient(to right, #19A89F, #9CDD97); /* 标准的语法(必须放在最后) */ } .right{ transform :translateX(px2rem(55)) }
js:
<script> export default { name: "clientCreate", data() { return { isShow:false } }, created: function () { }, mounted: function () { }, methods: { switchDepartment:function(){ this.isShow=!this.isShow; }, } } </script>
到此,相信大家对“vue怎么实现移动端的开关按钮”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。