前端通用方法
# 若依框架前端通用方法
若依框架前端提供了许多便捷的工具类对象，这些对象可以帮助开发者更加高效地操作页签、提示信息、权限验证、缓存处理、文件下载等功能。以下是对这些对象和方法的详细总结。
# 一、$tab 对象
$tab 对象主要用于对浏览器中的页签进行操作，如打开、关闭、刷新等。该对象定义在 plugins/tab.js 文件中。
# 1. 打开页签
// 打开页签
this.$tab.openPage("用户管理", "/system/user");
// 打开页签并执行完成后的逻辑
this.$tab.openPage("用户管理", "/system/user").then(() => {
// 执行结束的逻辑
});
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2. 修改页签
// 修改当前页签的标题
const obj = Object.assign({}, this.$route, { title: "自定义标题" });
this.$tab.updatePage(obj);
// 修改页签并执行完成后的逻辑
this.$tab.updatePage(obj).then(() => {
// 执行结束的逻辑
});
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 3. 关闭页签
// 关闭当前页签并打开新页签
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
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 4. 刷新页签
// 刷新当前页签
this.$tab.refreshPage();
// 刷新指定的页签
const obj = { path: "/system/user", name: "User" };
this.$tab.refreshPage(obj);
// 刷新页签并执行完成后的逻辑
this.$tab.refreshPage(obj).then(() => {
// 执行结束的逻辑
});
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 5. 关闭所有页签
// 关闭所有页签
this.$tab.closeAllPage();
// 关闭所有页签并执行完成后的逻辑
this.$tab.closeAllPage().then(() => {
// 执行结束的逻辑
});
1
2
3
4
5
6
7
2
3
4
5
6
7
# 6. 关闭左侧页签
// 关闭左侧的页签
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
9
10
2
3
4
5
6
7
8
9
10
# 7. 关闭右侧页签
// 关闭右侧的页签
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
9
10
2
3
4
5
6
7
8
9
10
# 8. 关闭其他页签
// 关闭其他页签
this.$tab.closeOtherPage();
const obj = { path: "/system/user", name: "User" };
this.$tab.closeOtherPage(obj);
// 关闭其他页签并执行完成后的逻辑
this.$tab.closeOtherPage(obj).then(() => {
// 执行结束的逻辑
});
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 二、$modal 对象
$modal 对象用于显示各种消息提示、通知、确认框以及遮罩层，定义在 plugins/modal.js 文件中。
# 1. 提供反馈信息
// 显示默认反馈信息
this.$modal.msg("默认反馈");
// 显示错误反馈信息
this.$modal.msgError("错误反馈");
// 显示成功反馈信息
this.$modal.msgSuccess("成功反馈");
// 显示警告反馈信息
this.$modal.msgWarning("警告反馈");
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 2. 提供提示信息
// 显示默认提示信息
this.$modal.alert("默认提示");
// 显示错误提示信息
this.$modal.alertError("错误提示");
// 显示成功提示信息
this.$modal.alertSuccess("成功提示");
// 显示警告提示信息
this.$modal.alertWarning("警告提示");
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 3. 提供通知信息
// 显示默认通知信息
this.$modal.notify("默认通知");
// 显示错误通知信息
this.$modal.notifyError("错误通知");
// 显示成功通知信息
this.$modal.notifySuccess("成功通知");
// 显示警告通知信息
this.$modal.notifyWarning("警告通知");
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 4. 提供确认框
// 显示确认框并处理确认后的逻辑
this.$modal.confirm('确认信息').then(() => {
// 确认后的逻辑
}).catch(() => {
// 取消后的逻辑
});
1
2
3
4
5
6
2
3
4
5
6
# 5. 提供遮罩层
// 打开遮罩层
this.$modal.loading("正在导出数据，请稍后...");
// 关闭遮罩层
this.$modal.closeLoading();
1
2
3
4
5
2
3
4
5
# 三、$auth 对象
$auth 对象用于验证用户是否拥有某些权限或角色，定义在 plugins/auth.js 文件中。
# 1. 验证用户权限
// 验证用户是否具备某权限
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
7
8
2
3
4
5
6
7
8
# 2. 验证用户角色
// 验证用户是否具备某角色
this.$auth.hasRole("admin");
// 验证用户是否具备以下任意一个角色
this.$auth.hasRoleOr(["admin", "common"]);
// 验证用户是否具备所有指定角色
this.$auth.hasRoleAnd(["admin", "common"]);
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 四、$cache 对象
$cache 对象用于处理缓存操作，提供了 session 和 local 两种级别的缓存，分别通过 sessionStorage 和 localStorage 实现。
# 1. 操作本地缓存
// 设置本地缓存
this.$cache.local.set('key', 'local value');
// 获取本地缓存
console.log(this.$cache.local.get('key')); // 输出 'local value'
// 设置本地 JSON 缓存
this.$cache.local.setJSON('jsonKey', { localProp: 1 });
// 获取本地 JSON 缓存
console.log(this.$cache.local.getJSON('jsonKey')); // 输出 { localProp: 1 }
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 2. 操作会话缓存
// 设置会话缓存
this.$cache.session.set('key', 'session value');
// 获取会话缓存
console.log(this.$cache.session.get('key')); // 输出 'session value'
// 设置会话 JSON 缓存
this.$cache.session.setJSON('jsonKey', { sessionProp: 1 });
// 获取会话 JSON 缓存
console.log(this.$cache.session.getJSON('jsonKey')); // 输出 { sessionProp: 1 }
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 3. 删除缓存
// 删除本地缓存
this.$cache.local.remove('key');
// 删除会话缓存
this.$cache.session.remove('key');
1
2
3
4
5
2
3
4
5
# 五、$download 对象
$download 对象用于文件下载操作，定义在 plugins/download.js 文件中。
# 1. 根据文件名称下载文件
// 根据名称下载 download 路径下的文件
const name = "be756b96-c8b5-46c4-ab67-02e988973090.xlsx";
this.$download.name(name);
// 下载完成后删除文件
const isDelete = true;
this.$download.name(name, isDelete);
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2. 根据文件路径下载文件
// 根据路径下载 upload 路径下的文件
const resource = "/profile/upload/2021/09/27/be756b96-c8b5-46c4-ab67-02e988973090.png";
this.$download.resource(resource);
1
2
3
2
3
# 3. 下载 ZIP 包
// 根据请求地址下载 ZIP 包
const url = "/tool/gen/batchGenCode?tables=" + tableNames;
const name = "ruoyi";
this.$download.zip(url, name);
1
2
3
4
2
3
4
# 4. 自定义文件下载
// 自定义文本保存
var blob = new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" });
this.$download.saveAs(blob, "hello world.txt");
// 自定义文件保存
var file = new File(["Hello, world!"], "hello world.txt", { type: "text/plain;charset=utf
-8" });
this.$download.saveAs(file);
// 自定义数据保存
const blob = new Blob([data], { type: 'text/plain;charset=utf-8' });
this.$download.saveAs(blob, name);
// 根据地址保存文件
this.$download.saveAs("https://ruoyi.vip/images/logo.png", "logo.jpg");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑此页 (opens new window)
上次更新: 2024/12/28, 18:32:08