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

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() { //初始化拋發 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包含在盒子內部 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>實現原理：

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

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

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

注意點：

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。