本文實(shí)例為大家分享了原生JS封裝vue Tab切換的具體代碼，供大家參考，具體內(nèi)容如下

vue,js,css3

vue組件 可以直接使用

<template> <div class='bookcircle-header'> <ul :class='headerActive == 0 ? ’friend’ : ’booklist’'> <li @click='headerChange(0)' :class='headerActive == 0 ? ’active’ : ’’'>書友 </li> <li @click='headerChange(1)' :class='headerActive == 1 ? ’active’ : ’’'>書單 </li> </ul> </div></template><script>export default { components: {}, data() { return { headerActive: 0, }; }, computed: {}, created() {}, mounted() { //初始化拋發(fā) this.$emit('change', this.headerActive); }, methods: { headerChange(index) { this.headerActive = index; this.$emit('change', index); }, },};</script><style lang='less' scoped>.bookcircle-header { height: 42px; display: flex; justify-content: center; align-items: center; .wrapper { width: 286px; font-size: 14px; height: 29px; color: #1489fe; border: 1px solid #1489fe; border-radius: 14px; display: flex; justify-content: center; align-items: center; position: relative; box-sizing: border-box; // 解決邊框溢出，將border包含在盒子內(nèi)部 li { flex: 1; height: 100%; display: flex; justify-content: center; align-items: center; z-index: 2; } .active { color: white; } &::before { content: ''; width: 143px; height: 100%; background-color: #1489fe; position: absolute; top: 0px; left: 0px; border-radius: 13px 0px 0px 13px; z-index: 1; transition: all 0.3s; } &.firend::before { transform: translateX(0); border-radius: 13px 0px 0px 13px; } &.booklist::before { transform: translateX(100%); border-radius: 0px 13px 13px 0px; } }}</style>實(shí)現(xiàn)原理：

使用ul,li以及彈性盒子，首先給父元素設(shè)置寬高，然后通過彈性盒子將子元素 li 水平方向展開， 給子元素 li 設(shè)置 flex：1,讓子元素平分父元素的寬。

然后給父元素設(shè)置偽元素，以絕對定位的方式覆蓋第一個(gè) li 元素， 通過z-index屬性，控制偽元素和子元素的層級(jí)顯示關(guān)系。

然后給偽元素設(shè)置 transition 屬性 搭配 transform: translateX(); 屬性，讓元素水平移動(dòng)就可以了

注意點(diǎn)：

1、雖然切換的點(diǎn)擊事件在子元素上，并且也給子元素添加 了active樣式，但tab的切換效果并不是通過子元素來實(shí)現(xiàn)的，而是通過父元素的偽元素來實(shí)現(xiàn)切換效果。2、必須要根據(jù)子元素的 index 給父元素設(shè)置動(dòng)態(tài)class, 這樣父元素的偽元素才能根據(jù)選中的子元素執(zhí)行切換動(dòng)畫3、本組件使用的是 淘寶amfe-flexible、 postcss適配，使用時(shí)注意適配問題

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。