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

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

本篇内容主要讲解“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怎么实现移动端的开关按钮”有了更深的了解，不妨来实际操作一番吧！这里是高防服务器网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！

[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[