Vue造輪子-Tabs測試(上)

1. 點擊出現下劃線的問題

// tabs-item.vue
    methods: {
      xxx() {
        this.eventBus.$emit('update:selected', this.name, this) 
      }
    }
    // tabs.vue
    mounted(){
      this.eventBus.$emit('update:selected', this.selected) 
    }
    // tabs-head
    created(){
      this.eventBus.$on('update:selected', (item, vm) => {
        console.log(item)
        console.log(vm) // 初始化的時候打印出的值爲undefined 
      })
    }
    
    // 爲了解決初始化打印出爲undefined的問題
    // tabs.vue 經過兩層循環解決找到item
    mounted(){
      this.$children.forEach((vm)=>{
        if(vm.$options.name === 'GuluTabsHead'){ // 找兒子
          vm.$children.forEach((childVm)=>{ // 找孫子
            if(childVm.$options.name === 'GuluTabsItem' && childVm.name === this.selected){
              this.eventBus.$emit('update:selected', this.selected,childVm)
            }
          })
        }
      })
    }

2. 找到item以後開始作動畫

mounted(){
      this.eventBus.$on('update:selected', (item, vm) => {
        let {width, height, top, left} = vm.$el.getBoundingClientRect()
        this.$refs.line.style.width = `${width}px` // 寬度就會跟着咱們點的元素的寬度變,
        // this.$refs.line.style.left = `${left}px` // 寬度變了咱們再修改位置
        this.$refs.line.style.transform = `translateX(${left}px)` 
        // 能夠這樣優化寫來實現硬件3d加速
        // 可是這樣寫有個bug一開始會從左往右滑
      })
    }

3. 嘗試解決一開始從走往右滑動的bug

// tabs-head.vue
    <template>
        <div class="tabs-head">
            <slot></slot>
                <div class="line" ref="line" v-if="x"></div>
            </div>
        </div>
    </template>

    data(){
      return {
        x: false
      }
    },
    mounted(){
      this.eventBus.$on('update:selected', (item, vm) => {
        this.x = true
        // 新增一個[更新UI任務]到任務隊列裏面,
        // 會先把下面js執行完了再更新，因此 this.$refs.line.style.width會報錯
        // 咱們只要把代碼放到[更新UI任務]的後面就能解決
        this.$nextTick(()=>{
          // 新增一個函數，放到任務隊列裏面，因爲[更新UI任務]是先放進去那麼就會先執行
          // 可是這樣作仍是沒解決從左往右滑的bug,因此仍是改回left
          let {width, height, top, left} = vm.$el.getBoundingClientRect()
          this.$refs.line.style.width = `${width}px`
          this.$refs.line.style.transform = `translateX(${left}px)`
        })
      })
    }

4.增長禁用功能和禁用樣式

// 增長disabled樣式
    computed: {
      classes() { // classes是一個計算屬性
        return {
          active: this.active,
          disabled: this.disabled,
        }
      }
    },
    // 增長disabled行爲
    methods: {
      onClick() {
        if (this.disabled) {
          return
        }
        this.eventBus.$emit('update:selected', this.name, this)
      }
    }

最後，歡迎交流!

<img src="https://i.loli.net/2020/01/27/gS4ZwP6zfAvULYT.jpg" alt="微信" width="400" height="400" align="bottom" /> > 本文由博客一文多發平臺 [OpenWrite](https://openwrite.cn?from=article_bottom) 發佈！