vue mixin妙用

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

Vuemixin大部分人应该是知道的,不过使用可能不多,倒不是不会用,较大的可能是想不到要用。今天分享一点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的,所以在activeddeactivated来操作,因为这些混入的钩子函数会和组件合并,所以只要在组件的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,便捷的实现更多有趣的东西。

推荐阅读更多精彩内容

  • https://github.com/coolriver/coolriver-site/blob/master/m...
    videring阅读 426评论 0 0
  • emmmm……一直是个计算机的渣渣 加上自己特别粗心 第一次自己配Tomcat和PHP 简直要哭晕在厕所 Tomc...
    enmmmm阅读 3,525评论 0 0
  • 精致的 摆放 收获啧啧声一片 霓虹灯下 迷惑 马在跑 舞在跳 谁是依靠 旋转的舞台 始于足下 熠熠生辉的 是谁的人...
    E行动派阅读 38评论 0 3
  • Fractionated Coconut Oil 多特瑞的分馏椰子油是一种全天然的基底油,能瞬间被肌肤吸收,很适合...
    豌豆的芳香小家阅读 120评论 0 0
  • 最近在网上看到一个很火的段子。 女:你爱我吗? 男:我爱你,我超级爱你,我可以向全世界证明,我爱你! 女:那你发朋...
    笑晨暖阳阅读 178评论 0 5