vue怎么实现移动端的开关按钮

本篇内容主要讲解"vue怎么实现移动端的开关按钮"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"vue怎么实现移动端的开关按钮"吧!

逻辑：

1.写一个椭圆形的div

2.动态改变这个椭圆形的div的背景颜色

3.写一个圆点，这个圆点采用绝对定位的方式，定位在椭圆形的div上

4.开关来回切换的时候，要使用translateX移动圆点的位置，并且动态改变椭圆形 div的背景颜色

代码：

html:

        
            
部门功能
            
                {{isShow?'开启':'关闭'}}                                    
                            

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:

到此，相信大家对"vue怎么实现移动端的开关按钮"有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！