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

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

逻辑：

写一个椭圆形的div

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

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

开关来回切换的时候，要使用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);     background: -o-linear-gradient(right, #19A89F, #9CDD97 );     background: -moz-linear-gradient(right, #19A89F , #9CDD97);     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怎么实现移动端的开关按钮”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！