這種功能怎么實現(xiàn)？
vue.js怎么實現(xiàn)這種切換功能？
德瑪西亞99
2018-09-13 10:09:55
1 回答
慕妹3242003
TA貢獻1824條經(jīng)驗 獲得超6個贊
用綁定不同class的方法來做：
<span v-bind:class="{'left': isClose, 'right': isOpen} switcher" v-on:click="switcher"></span>
<!--這個span就是圓形開關(guān)，點擊的時候觸發(fā)switcher方法-->在vue實例中寫入標記和開關(guān)方法：
data: { isClose: true, isOpen: false//假設(shè)默認關(guān)閉},methods: { switcher: function() { //實現(xiàn)開關(guān)切換
isClose = !isClose;
isOpen = !isOpen;
}
}css樣式：
.switcher { transition: left 0.8s;
}.left { left: 0;
}.right { left: 50px;//移動50px}這樣就能通過點擊時改變css屬性，并配合transition來實現(xiàn)動態(tài)開關(guān)了。
添加回答
舉報
0/150
提交
取消