vue實現(xiàn)移動端的開關(guān)按鈕

更新時間：2022年02月24日 13:08:05 作者：HainesFreeman

這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端的開關(guān)按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)移動端的開關(guān)按鈕的具體代碼，供大家參考，具體內(nèi)容如下

邏輯：

1.寫一個橢圓形的div

2.動態(tài)改變這個橢圓形的div的背景顏色

3.寫一個圓點，這個圓點采用絕對定位的方式，定位在橢圓形的div上

4.開關(guān)來回切換的時候，要使用translateX移動圓點的位置，并且動態(tài)改變橢圓形 div的背景顏色

代碼：

html:

<!--部門功能-->
?? ??? ?<div class="department">
?? ??? ??? ?<div class="department-l">部門功能</div>
?? ??? ??? ?<div class="department-r">
?? ??? ??? ??? ?{{isShow?'開啟':'關(guān)閉'}}
?? ??? ??? ??? ?<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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: