ex: test.js
const referrerPhone = [
{ pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
]
export default {
referrerPhone
}
import validators from '../路径/test.js'
定义成对象方便调用
Vue.prototype.$validators = validators
this.$validators.referrerPhone
=======================================================================================================
第二种 不是公用
1.创建一个 js
// 弹框提示
function tips(this_, message_, type_){
this_.$message({
message: message_,
type: type_
})
export { //很关键
tips,
}
import { tips} from '../xx.js'
tips(this, '非法操作，不能删除admin用户！', 'error')
目前项目有个需求就是，在vue页面中引入额外的config.js。常规引入有以下几种方法：1.main.js直接引用
2.index.html中标签引用
3.import引入
以上不符合我们业务需求，所以整理了第四种方式：通过组件，定义为script标签引入外部js
4.1-这个写法不太便于理解，我没有使用
4.2-我使用的方法
使用：
能看到已经被加载：
给个点击事件输出一下看看
完美
步骤：1. 新建permission.js 实现自定义指令的钩子方法：importstorefrom'@/store'exportdefault{inserted(el,binding){const{value}=bindingconstroles=store.getters&&store.getters.rolesif(value&&valueinstanceofArray){if(value.length>0){constpermissionRoles=valueconsthasPermission=roles.some(role=>{returnpermissionRoles.includes(role)})if(!hasPermission){el.parentNode&&el.parentNode.removeChild(el)}}}else{thrownewError(`使用方式： v-permission="['admin','editor']"`)}}}
新建index.js 将permission转为install：
在main.js中用use方法使用permission：
在模板中使用v-permission控制访问权限:
第二种方式：Vue.prototype+install+v-if实现用户角色权限控制：
新建permission.js，将checkPer方法注册到Vue.prototype，并注册为install方法：
importstorefrom'@/store'/** * @param {Array} value * @returns {Boolean} * @example see @/views/permission/directive.vue */exportdefault{install(Vue){Vue.prototype.checkPer=(value)=>{if(value&&valueinstanceofArray&&value.length>0){constroles=store.getters&&store.getters.rolesconstpermissionRoles=valuereturnroles.some(role=>{returnpermissionRoles.includes(role)})}else{console.error(`need roles! Like v-permission="['admin','editor']"`)returnfalse}}}}
在main.js中引入permission, 并用use方法:
使用：配合 v-if 在模板中实现权限控制：
