Vue造轮子-Tabs测试(上)

    // 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)
     }
   })
 }
      })
    }

 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一开始会从左往右滑
      })
    }

  // tabs-head.vue
    

    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)`
 })
      })
    }

    // 增加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)
      }
    }