“ 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，便捷的实现更多有趣的东西。
网友评论