若依官方前端手册小笔记

提供确认窗体信息

this.$modal.confirm('确认信息').then(function() {
  ...
}).then(() => {
  ...
}).catch(() => {});

提供遮罩层信息

// 打开遮罩层
this.$modal.loading("正在导出数据，请稍后...");

// 关闭遮罩层
this.$modal.closeLoading();

验证用户权限

// 验证用户是否具备某权限
this.$auth.hasPermi("system:user:add");
// 验证用户是否含有指定权限，只需包含其中一个
this.$auth.hasPermiOr(["system:user:add", "system:user:update"]);
// 验证用户是否含有指定权限，必须全部拥有
this.$auth.hasPermiAnd(["system:user:add", "system:user:update"]);

验证用户角色

// 验证用户是否具备某角色
this.$auth.hasRole("admin");
// 验证用户是否含有指定角色，只需包含其中一个
this.$auth.hasRoleOr(["admin", "common"]);
// 验证用户是否含有指定角色，必须全部拥有
this.$auth.hasRoleAnd(["admin", "common"]);

使用权限字符串 v-hasPermi

// 单个
<el-button v-hasPermi="['system:user:add']">存在权限字符串才能看到</el-button>
// 多个
<el-button v-hasPermi="['system:user:add', 'system:user:edit']">存在权限字符串才能看到</el-button>

使用角色字符串 v-hasRole

// 单个
<el-button v-hasRole="['admin']">管理员才能看到</el-button>
// 多个
<el-button v-hasRole="['role1', 'role2']">包含角色才能看到</el-button>

使用字典

main.js中引入全局变量和方法（已有）

import { getDicts } from "@/api/system/dict/data";
Vue.prototype.getDicts = getDicts

加载数据字典

 this.getDicts("字典类型").then(response => {
    this.xxxxxOptions = response.data;
  });

如果有些不需要传递token的请求，可以设置headers中的属性isToken为false

export function login(username, password, code, uuid) {
  return request({
    url: 'xxxx',
    headers: {
      isToken: false,
      // 可以自定义 Authorization
	  // 'Authorization': 'Basic d2ViOg=='
    },
    method: 'get'
  })
}

如果要使用复制功能可以使用指令v-clipboard

<el-button
  v-clipboard:copy="content"
  v-clipboard:success="copySuccess"
  v-clipboard:error="copyFailed"
>复制</el-button>

若依官方前端手册 小笔记

猜你喜欢

若依官方前端手册小笔记