vue mixin妙用

“ less is more！” 写代码到现在，越来越喜欢这一句话。以少量的代码，实现好的功能，这应该是我们所追求的，写出优雅的代码。

Vue的mixin大部分人应该是知道的，不过使用可能不多，倒不是不会用，较大的可能是想不到要用。今天分享一点mixin的妙用，希望给各位一点小启发，以后可以多用并且善用mixin。

移动端开发，很多ui会出层次分明的样式结构，比如背景色，可能会有一个统一风格的颜色。这时候我们需要给背景添加颜色，如果是将整个页面框在一个组件内的，而组件又没有提供背景色props去修改，这时如果要修改背景色，通常想的就是修改原组件样式，或者在组件外加个div设置样式，但是这些都会导致一个问题，样式变成全局的了，并且一个项目可能很多页面，每个页面都这么搞，那就要命了。要想一个办法，轻松的解决这个问题。

首先，为了比较少的写代码，修改原组件样式或在外层再加个样式控制，这样都不太优雅，没有体现可复用性。说到全局复用，就应该想到mixin，上面的问题，一个轻松的混入方法就能解决。

export default{
    data(){
         return {
            backgroundColor: 'white',
         }
    },
    activated() {
        this.$el.style.backgroundColor = this.backgroundColor;
      },
    deactivated() {
        this.$el.style.backgroundColor = "white";
    },
}

通常我们移动端项目都是设置keep-alive的，所以在actived和deactivated来操作，因为这些混入的钩子函数会和组件合并，所以只要在组件的data里设置一下backgroundColor的值为页面背景色值，即可完成页面内样式背景色的控制，这就是混入。

前两天有同事问我，他的页面弹出了popup，这时候安卓物理机点击了返回，直接就路由返回了，有什么办法可以解决阻止返回只隐藏popup呢？我直接就回答说在组件的钩子函数beforeRouteLeave里（项目必须要使用vue-router，这个钩子函数是router混入的）判断下popup是否关闭就行，没有关闭return next(false)就行，和我们常见的页面未保存点击返回提示一下是一样的道理。说完了解决方法之后，我又想了下，能否全局解决这个问题呢，确实是很多页面都会有popup弹出的问题。

首先，我想了下是不是可以使用vue-router的守卫函数beforeEach方法，确实是可以的。

router.beforeEach((to, from, next) => {
    const popup = document.querySelectorAll('.hips-popup')
    let ifNeedHide = false
    for (let i = 0; i < popup.length; i++) {
        if(popup[i].style.display !== 'none'){
            ifNeedHide = true
            popup[i].style.display = 'none'
            next(false)
            break
        }
     }
    !ifNeedHide && next()
});

因为这时候拿不到组件实例，所以我选择dom查询，顺便说一下querySelectorAll()得到的是一个NodeList，看着像数组，但是没法使用forEach去处理。上面的思路是找到当前页面上所有的popup组件，判断它display是否不为none，是的话表面当前页面返回要先关闭该popup，然后再返回。但是这样的话，有一些弊端，有些popup不需要关闭就应该可以进行路由跳转，比如说只是个提示框的那种popup，这时如果要跳转就必须先手动关闭popup，亲测关闭后的路由跳转必须要设置延时，时间还不小于几百毫秒才行(可能是由于dom渲染导致)，还有就是如果有多层popup父子嵌套，这也没法正确的关闭popup。所以很麻烦，还不如需要做拦截的时候自己拦截一下处理,而且尽量不直接操作dom是我们的宗旨。这也是个全局的问题，mixin当仁不让，并且超级简单。

export default {
  methods: {
    ifNeedHide(){
      return true
    }
  },
  beforeRouteLeave(to, from, next){
    if(!this.ifNeedHide()){
      return next(false)
    }
    next()
  }
}

归根结底问题所在就是路由跳转前做下拦截，那mixin只需要知道是否需要拦截即可。全局混入之后，如果组件需要拦截，那么复写ifNeedHide方法即可，返回一个false就拦截了，不需要重复的写beforeRouteLeave，写好业务逻辑就行。

还有个比较高级的用法，是以前写组件的时候，同事使用的，写的很好，一个混入方法，实现css样式在template里的简写。

/**
 * bem helper
 * b() // 'button'
 * b('text') // 'button__text'
 * b({ disabled }) // 'button button--disabled'
 * b('text', { disabled }) // 'button__text button__text--disabled'
 * b(['disabled', 'primary']) // 'button button--disabled button--primary'
 */
const ELEMENT = '__'
const MODS = '--'

const join = (name, el, symbol) => el ? name + symbol + el : name

const prefix = (name, mods) => {
  if (typeof mods === 'string') {
    return join(name, mods, MODS)
  }

  if (Array.isArray(mods)) {
    return mods.map(item => prefix(name, item))
  }

  const ret = {}
  Object.keys(mods).forEach(key => {
    ret[name + MODS + key] = mods[key]
  })
  return ret
}

export default {
  methods: {
    b (el, mods) {
      const { name } = this.$options

      if (el && typeof el !== 'string') {
        mods = el
        el = ''
      }
      el = join(name, el, ELEMENT)

      return mods ? [el, prefix(el, mods)] : el
    },
  },
}

<template>
  <button
    :class="[
      b([type, size, {
        loading,
        icon,
        block,
        ripple
    }])]"
    :disabled="disabled"
    :type="htmlType"
    @click="handleClick"
  >
    <spin v-if="loading" size="16px"/>

    <ripple v-if="ripple && !loading && !disabled" :ripple-opacity="rippleOpacity" :ripple-color="rippleColor"/>

    <slot name="icon">
      <icon v-if="icon" :name="icon" />
    </slot>

    <slot/>
  </button>
</template>

看看最上面的注释，对照着template，大家应该能看明白这块的规则是什么，也很符合我们前端的BEM规范，很优雅的简化了项目代码。

说这么多，就是希望大家能善用mixin，便捷的实现更多有趣的东西。