对于Java后端来说继承是必不可少的,对于Vue来说混入就像继承不可或缺。但是很多人都不喜欢或者很少用混入,那么今天就来谈谈Vue混入的重要性。
1. 通用组件混合
想必大家都创建过公用组件,对于一些组件来说,往往都存在共通性,如选择器,我们可以将选择器通用的参数、方法等单独提取
js
/**
* 下拉选择器混入
*/
export default {
model: {
event: 'input-change', // 这个事件与下面的emit事件与之对应
prop: 'value' //
},
props: {
value: {
type: String,
default: ''
},
/**
* 监听值改变,回调change
*/
listenValue: Boolean
},
data() {
return {
val: this.value,
loading: false,
options: []
}
},
watch: {
value: {
handler(n) {
this.val = n;
if (this.listenValue) {
this.toChange(n);
}
}
}
},
methods: {
onChange(value) {
this.$emit('input-change', value);
if (!this.listenValue) {
this.toChange(value);
}
},
toChange(value) {
if (this.dataKey && this.options) {
const data = this.options.find(item => String(item[this.dataKey]) === value);
this.$emit('change', data);
}
}
}
}
然后一个选择器组件就能轻而易举的实现:
html
<template>
<el-select
v-model="val"
filterable
remote
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
@change="onChange"
v-bind="$attrs">
<el-option
v-for="item in options"
:key="item.deviceTypeId"
:label="item.name"
:value="item.deviceTypeId">
</el-option>
</el-select>
</template>
<script>
import {listByKeyWord} from "@/api/bayonet/device_type";
import selectMixin from "@/components/Selector/selectMixin";
export default {
name: "DeviceTypeSelect",
mixins: [selectMixin],
methods: {
remoteMethod(query) {
this.loading = true;
listByKeyWord({
searchValue: query
}).then(res => {
this.options = res.data;
this.loading = false;
});
}
},
created() {
listByKeyWord('').then(res => {
this.options = res.data;
});
}
}
</script>
2. 可选择性混入
对于页面,可能仅有一小部分需要某项功能,那么我们就可以将这些功能封装,做成混入,在有必要时引入混入,如:
js
import {mapState} from "vuex";
export default {
data() {
return {
roleMap: {
/**
* 超管
*/
admin: 'admin',
/**
*服务中心
*/
fuwuzhongxin: 'fuwuzhongxin',
/**
*企业
*/
enterprise: 'enterprise',
/**
*应急办
*/
yingjiban: 'yingjiban',
/**
*审批管理部
*/
shenpi: 'shenpi',
/**
*企业用户
*/
enterprise_user: 'enterprise_user',
/**
* 司机用户
*/
driver: 'driver'
}
}
},
computed: {
...mapState({
user: state => state.user,
}),
/**
* 当前用户是否为管理员
* @returns {*|boolean}
*/
isAdmin() {
return this.user.userInfo.admin || false;
},
/**
* 当前用户是否为企业
* @returns {boolean}
*/
isEnterprise() {
if (!this.user || !this.user.roles) {
return false;
}
return this.user.roles.includes(this.roleMap.enterprise) || this.user.roles.includes(this.roleMap.enterprise_user) || false;
},
/**
* 当前用户是否为服务中心
* @returns {boolean}
*/
isFuwuzhongxin() {
if (!this.user || !this.user.roles) {
return false;
}
return this.user.roles.includes(this.roleMap.fuwuzhongxin) || false;
},
},
methods: {
/**
* 判断当前用户是否某一角色
* @param roleCode 角色编码
* @returns {boolean}
*/
isRole(roleCode) {
if (!this.user || !this.user.roles) {
return false;
}
return this.user.roles.includes(roleCode) || false;
},
/**
* 判断当前用户包含某一角色
* @param roleCodes 角色列表
* @returns {boolean}
*/
isAnyRole(...roleCodes) {
if (!this.user || !this.user.roles) {
return false;
}
return roleCodes.some(roleCode => this.user.roles.includes(roleCode));
},
/**
* 判断当前用户包含所有角色
* @param roleCodes 角色列表
* @returns {boolean}
*/
isEveryRole(...roleCodes) {
if (!this.user || !this.user.roles) {
return false;
}
return roleCodes.every(roleCode => this.user.roles.includes(roleCode));
}
}
}
然后在需要的地方引入:
js
import userMixin from "@/mixins/userMixin";
export default {
name: "Form",
mixins: [userMixin]
}
3. 全局工具混入
对于一些比较常用的工具,我们可以使用全局混入将其添加到所有组件
js
export default function (Vue) {
Vue.mixin({
methods: {
isExternal(path) {
return /^(https?:|mailto:|tel:)/.test(path)
},
validUsername(str) {
const valid_map = ['admin', 'editor']
return valid_map.indexOf(str.trim()) >= 0
},
validURL(url) {
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
return reg.test(url)
},
validLowerCase(str) {
const reg = /^[a-z]+$/
return reg.test(str)
},
validUpperCase(str) {
const reg = /^[A-Z]+$/
return reg.test(str)
},
validAlphabets(str) {
const reg = /^[A-Za-z]+$/
return reg.test(str)
},
validEmail(email) {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
return reg.test(email)
},
isString(str) {
if (typeof str === 'string' || str instanceof String) {
return true
}
return false
},
isArray(arg) {
if (typeof Array.isArray === 'undefined') {
return Object.prototype.toString.call(arg) === '[object Array]'
}
return Array.isArray(arg)
}
}
})
}
然后再main.js中引入,然后就能再任何组件中使用这些方法了
js
import globalUtils from '@/mixins/globalUtils';
Vue.use(globalUtils);
总结
其实还有很多使用方式,混入具有很强的灵活性,在于自己的不断探索。
很多框架也凭借者混入实现了全局性的各种功能,混入其实能够使得代码更容易集中维护,更加灵活,简单,甚至规范。