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')
步骤：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 在模板中实现权限控制：
这样用，要使用 Vue，我们可以直接在 Vue.js 的官网直接下载 vue.min.js 文件，然后在 HTML 页面中通过或者也可以不下载 vue.min.js 文件，直接引入 Vue 文件地址，例如：
使用前(在运行时)要确保 Vue 文件已经加载完成再然后进行其他操作(代码加载的顺序是很重要的)。
