技术文档

Appearance

若依指令 ​

tab 对象 ​

打开便签 ​

  • 第一个参数就是路径
vue
<template>
  <div>
    测试第一个页面
    <el-button type="primary" @click="openbianqian">打开便签</el-button>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();
const openbianqian = () => {
  proxy.$tab.openPage("/system/dept2").then((res) => {
    // 执行结束的逻辑
    console.log("执行结束了");
  });
};
</script>

<style lang="scss" scoped></style>

修改当前便签的名字 ​

vue
<template>
  <div>
    测试第一个页面
    <el-button type="primary" @click="updatebianqian">修改便签</el-button>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 修改便签

const updatebianqian = () => {
  const obj = Object.assign({}, proxy.$route, { title: "自定义标题" });
  proxy.$tab.updatePage(obj);
};
</script>

<style lang="scss" scoped></style>

关闭当前标签页 ​

vue
<template>
  <div>
    测试第一个页面
    <el-button type="primary" @click="closebianqian">关闭便签</el-button>
    <el-button type="primary" @click="closeallbianqian">关闭所有便签</el-button>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 关闭指定的标签

const closebianqian = () => {
  // 关闭指定的标签页
  const obj = { path: "/system/dept" };
  proxy.$tab.closePage(obj);
};

// 关闭所有的标签页

const closeallbianqian = () => {
  proxy.$tab.closeAllPage();
};
</script>

<style lang="scss" scoped></style>

刷新便签 ​

vue
<template>
  <div>
    测试第一个页面
    <el-button type="primary" @click="refreshbianqian">刷新便签</el-button>
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 刷新标签

const refreshbianqian = () => {
  // 刷新页面
  const obj = { path: "/study/demo1" };
  proxy.$tab.refreshPage(obj);
};
</script>

<style lang="scss" scoped></style>

关闭左侧便签 ​

vue
<template>
  <div>
    测试第一个页面
    <el-button type="primary" @click="closeleftbianqian"
      >关闭左侧页签</el-button
    >
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 关闭左侧便签

const closeleftbianqian = () => {
  // 关闭左侧标签
  proxy.$tab.closeLeftPage();
};
</script>

<style lang="scss" scoped></style>

关闭右侧便签 ​

vue
<template>
  <div>
    <el-button type="primary" @click="closerightbianqian"
      >关闭右侧页签</el-button
    >
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 关闭右侧便签

const closerightbianqian = () => {
  proxy.$tab.closeRightPage();
};
</script>

<style lang="scss" scoped></style>

关闭其他便签 ​

vue
<template>
  <div>
    测试第一个页面

    <el-button type="primary" @click="closeotherbianqian"
      >关闭其他页签</el-button
    >
  </div>
</template>

<script setup>
const { proxy } = getCurrentInstance();

// 关闭其他便签

const closeotherbianqian = () => {
  // 关闭其他标签
  proxy.$tab.closeOtherPage();
};
</script>

<style lang="scss" scoped></style>

$modal对象用于做消息提示、通知提示、对话框提醒、二次确认、遮罩等

提供成功,警告和错误等反馈信息 ​

js
proxy.$modal.msg("默认反馈");
proxy.$modal.msgError("错误反馈");
proxy.$modal.msgSuccess("成功反馈");
proxy.$modal.msgWarning("警告反馈");

提供成功、警告和错误等通知信息 ​

  • 右边出来
js
proxy.$modal.notify("默认通知");
proxy.$modal.notifyError("错误通知");
proxy.$modal.notifySuccess("成功通知");
proxy.$modal.notifyWarning("警告通知");

提供确认窗体信息 ​

js
proxy.$modal
  .confirm("确认信息")
  .then(function () {
    // 确认按钮回调
    console.log("确认按钮回调");
  })
  .catch(function () {
    // 取消按钮回调
    console.log("取消按钮回调");
  });

提供遮罩层信息 ​

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

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

$auth 对象 ​

$auth 对象用于验证用户是否拥有某（些）权限或角色

验证用户权限 ​

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

验证用户角色 ​

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

$cache 对象 ​

$cache对象用于处理缓存。我们并不建议您直接使用sessionStorage或localStorage，因为项目的缓存策略可能发生变化，通过$cache 对象做一层调用代理则是一个不错的选择。$cache 提供 session 和 local 两种级别的缓存，如下：

  • session 会话级别缓存,通过 sessionStorage 实现

  • local 本地缓存,通过 localStorage 实现

ts
// local 普通值
proxy.$cache.local.set("key", "local value");
console.log(proxy.$cache.local.get("key")); // 输出'local value'

// session 普通值
proxy.$cache.session.set("key", "session value");
console.log(proxy.$cache.session.get("key")); // 输出'session value'

// local JSON值
proxy.$cache.local.setJSON("jsonKey", { localProp: 1 });
console.log(proxy.$cache.local.getJSON("jsonKey")); // 输出'{localProp: 1}'

// session JSON值
proxy.$cache.session.setJSON("jsonKey", { sessionProp: 1 });
console.log(proxy.$cache.session.getJSON("jsonKey")); // 输出'{sessionProp: 1}'

// 删除值
proxy.$cache.local.remove("key");
proxy.$cache.session.remove("key");

download ​

$download对象用于文件下载，它定义在plugins/download.js文件中，它有如下方法

根据名称下载 download 路径下的文件 ​

js
const name = "be756b96-c8b5-46c4-ab67-02e988973090.xlsx";
const isDelete = true;

// 默认下载方法
proxy.$download.name(name);

// 下载完成后是否删除文件
proxy.$download.name(name, isDelete);

根据名称下载 upload 路径下的文件 ​

js
const resource =
  "/profile/upload/2021/09/27/be756b96-c8b5-46c4-ab67-02e988973090.png";

// 默认方法
proxy.$download.resource(resource);

根据请求地址下载 zip 包 ​

js
const url = "/tool/gen/batchGenCode?tables=" + tableNames;
const name = "ruoyi";

// 默认方法
proxy.$download.zip(url, name);

更多文件下载操作 ​

js
// 自定义文本保存
var blob = new Blob(["Hello, world!"], { type: "text/plain;charset=utf-8" });
proxy.$download.saveAs(blob, "hello world.txt");

// 自定义文件保存
var file = new File(["Hello, world!"], "hello world.txt", {
  type: "text/plain;charset=utf-8",
});
proxy.$download.saveAs(file);

// 自定义data数据保存
const blob = new Blob([data], { type: "text/plain;charset=utf-8" });
proxy.$download.saveAs(blob, name);

// 根据地址保存文件
proxy.$download.saveAs("https://ruoyi.vip/images/logo.png", "logo.jpg");

网站备案号:津ICP备15001525号-2