本小节,分享前端项目的常用方法。
1. $tab
对象
@tab
对象,由 plugins/tab.js
(opens new window) 实现,用于 Tab 标签相关的操作。它有如下方法:
① 打开页签
1 2 3 4 5
| this.$tab.openPage("用户管理", "/system/user");
this.$tab.openPage("用户管理", "/system/user").then(() => { })
|
② 修改页签
1 2 3 4 5 6
| const obj = Object.assign({}, this.$route, { title: "自定义标题" }) this.$tab.updatePage(obj);
this.$tab.updatePage(obj).then(() => { })
|
③ 关闭页签
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| const obj = { path: "/system/user" }; this.$tab.closeOpenPage(obj);
this.$tab.closePage();
const obj = { path: "/system/user", name: "User" }; this.$tab.closePage(obj);
this.$tab.closePage(obj).then(() => { })
|
④ 刷新页签
1 2 3 4 5 6 7 8 9 10
| this.$tab.refreshPage();
const obj = { path: "/system/user", name: "User" }; this.$tab.refreshPage(obj);
this.$tab.refreshPage(obj).then(() => { })
|
⑤ 关闭所有页签
1 2 3 4 5
| this.$tab.closeAllPage();
this.$tab.closeAllPage().then(() => { })
|
⑥ 关闭左侧页签
1 2 3 4 5 6 7 8
| this.$tab.closeLeftPage();
const obj = { path: "/system/user", name: "User" }; this.$tab.closeLeftPage(obj);
this.$tab.closeLeftPage(obj).then(() => { })
|
⑦ 关闭右侧页签
1 2 3 4 5 6 7 8
| this.$tab.closeRightPage();
const obj = { path: "/system/user", name: "User" }; this.$tab.closeRightPage(obj);
this.$tab.closeRightPage(obj).then(() => { })
|
⑧ 关闭其它页签
1 2 3 4 5 6 7 8
| this.$tab.closeOtherPage();
const obj = { path: "/system/user", name: "User" }; this.$tab.closeOtherPage(obj);
this.$tab.closeOtherPage(obj).then(() => { })
|
2. $modal
对象
@modal
对象,由 plugins/modal.js
(opens new window) 实现,用于做消息提示、通知提示、对话框提醒、二次确认、遮罩等。它有如下方法:
① 提供成功、警告和错误等反馈信息
1 2 3 4
| this.$modal.msg("默认反馈"); this.$modal.msgError("错误反馈"); this.$modal.msgSuccess("成功反馈"); this.$modal.msgWarning("警告反馈");
|
② 提供成功、警告和错误等提示信息
1 2 3 4
| this.$modal.alert("默认提示"); this.$modal.alertError("错误提示"); this.$modal.alertSuccess("成功提示"); this.$modal.alertWarning("警告提示");
|
③ 提供成功、警告和错误等通知信息
1 2 3 4
| this.$modal.notify("默认通知"); this.$modal.notifyError("错误通知"); this.$modal.notifySuccess("成功通知"); this.$modal.notifyWarning("警告通知");
|
④ 提供确认窗体信息
1 2 3 4 5
| this.$modal.confirm('确认信息').then(function() { }).then(() => { }).catch(() => {});
|
⑤ 提供遮罩层信息
1 2 3 4 5
| this.$modal.loading("正在导出数据,请稍后...");
this.$modal.closeLoading();
|
3. $auth
对象
@auth
对象,由 plugins/auth.js
(opens new window) 实现,用于验证用户是否拥有某(些)权限或角色。它有如下方法:
① 验证用户权限
1 2 3 4 5 6
| this.$auth.hasPermi("system:user:add");
this.$auth.hasPermiOr(["system:user:add", "system:user:update"]);
this.$auth.hasPermiAnd(["system:user:add", "system:user:update"]);
|
② 验证用户角色
1 2 3 4 5 6
| this.$auth.hasRole("admin");
this.$auth.hasRoleOr(["admin", "common"]);
this.$auth.hasRoleAnd(["admin", "common"]);
|
4. $cache
对象
@auth
对象,由 plugins/cache.js
(opens new window) 实现,基于 session 或 local 实现不同级别的缓存。它有如下方法:
① 读写 String 缓存
1 2 3 4 5 6 7
| this.$cache.local.set('key', 'local value') console.log(this.$cache.local.get('key'))
this.$cache.session.set('key', 'session value') console.log(this.$cache.session.get('key'))
|
② 读写 JSON 缓存
// local JSON值
1 2 3 4 5 6
| this.$cache.local.setJSON('jsonKey', { localProp: 1 }) console.log(this.$cache.local.getJSON('jsonKey'))
this.$cache.session.setJSON('jsonKey', { sessionProp: 1 }) console.log(this.$cache.session.getJSON('jsonKey'))
|
③ 删除缓存
1 2
| this.$cache.local.remove('key') this.$cache.session.remove('key')
|
5. $download
对象
$download
对象,由 plugins/download.js
(opens new window) 实现,用于各种类型的文件下载。它有如下方法:
方法列表
1 2 3 4 5
| this.$download.excel(data, fileName); this.$download.word(data, fileName); this.$download.zip(data, fileName); this.$download.html(data, fileName); this.$download.markdown(data, fileName);
|
在 user/index.vue
(opens new window) 页面中,导出 Excel 文件的代码如下图: