Hai Design
GitLab (opens new window)

全局api

王祥(22020620) ... 2022-9-28 About 6 min

# 全局api

在hai-design中内置封装了很多全局的api函数，在项目开发中常用的函数，在引入hai-design后你可以在任何组件里取调用这些方法

# $DialogForm弹窗表单

Tips

this.$DialogForm.show({
  title: '弹窗页面',
  width: '30%',
  menuPosition:'right',
  option:{
    submitText: '完成',
    span:24,
    column: [{
      label: "姓名",
      prop: "name",
      rules: [{
        required: true,
        message: "请输入姓名",
        trigger: "blur"
      }],
    }]
  },
  beforeClose: (done) => {
    this.$message.success('关闭前方法')
    done()
  },
  callback:(res)=>{
    console.log(res.data);
    this.$message.success('关闭等待框')
    setTimeout(() => {
      res.done()
      setTimeout(() => {
        this.$message.success('关闭弹窗')
        res.close()
      }, 1000)
    }, 1000)
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# $Clipboard复制到剪切板

Tips

可以赋值任意文本到剪切板在线例子

 this.$Clipboard({
    text: '复制的文本内容'
  }).then(() => {
    this.$message.success('复制成功')
  }).catch(() => {
    this.$message.error('复制失败')
  });
1
2
3
4
5
6
7

# $ImagePreview图片预览

Tips

可以赋值任赋值图片去放大预览(一张缩略图，一张放大图)在线例子

 data() {
    var link = 'https://lokeshdhakar.com/projects/lightbox2/images/';
    return {
      datas: [
        { thumbUrl: `${link}thumb-4.jpg`, url: `${link}image-4.jpg` },
        { thumbUrl: `${link}thumb-5.jpg`, url: `${link}image-5.jpg` },
        { thumbUrl: `${link}thumb-6.jpg`, url: `${link}image-6.jpg` },
      ]
    }
  }
 this.$ImagePreview(this.datas, index);
1
2
3
4
5
6
7
8
9
10
11

Tips

可以传入dom的id或者class在线例子

  <div id="test"></div>
  this.$Print('#test')
1
2

# $Export excel导出

Tips

传入相关的属性配置在线例子

 let opt = {
    title: '文档标题',
    column: [{
      label: '标题',
      prop: 'title'
    }],
    data: [{
      title: "测试数据1"
    }, {
      title: "测试数据2"
    }]
  }
  this.$Export.excel({
    title: opt.title || new Date().getTime(),
    columns: opt.column,
    data: opt.data
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# $Log日志打印

可以打印不同颜色和标注的日志

/**
* 内置5中常用颜色,默认为primary
* default:#35495E
* primary:#3488ff
* success:#43B883
* warning:#e6a23c
* danger:#f56c6c
* 也可以直接打印彩色文字
*/

this.$Log.capsule('标题','内容','primary')
this.$Log.primary('内容')
1
2
3
4
5
6
7
8
9
10
11
12

# watermark全局水印

传入水印的文案在线例子

  this.watermark('我是水印的文案');
1

# $tab对象

$tab对象用于做页签操作、刷新页签、关闭页签、打开页签、修改页签等，它定义在 plugins/tab.js文件中，它有如下方法

  • 打开页签
this.$tab.openPage("用户管理", "/system/user");

this.$tab.openPage("用户管理", "/system/user").then(() => {
  // 执行结束的逻辑
})
1
2
3
4
5
  • 修改页签
const obj = Object.assign({}, this.$route, { title: "自定义标题" }) 
this.$tab.updatePage(obj);

this.$tab.updatePage(obj).then(() => {
  // 执行结束的逻辑
})
1
2
3
4
5
6
  • 关闭页签
// 关闭当前tab页签，打开新页签
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
  • 刷新页签
// 刷新当前页签
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
  • 关闭所有页签
this.$tab.closeAllPage();

this.$tab.closeAllPage().then(() => {
  // 执行结束的逻辑
})
1
2
3
4
5
  • 关闭左侧页签
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
  • 关闭其他tab页签
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

# $modal对象

$modal对象用于做消息提示、通知提示、对话框提醒、二次确认、遮罩等，它定义在 plugins/modal.js文件中，它有如下方法

  • 提供成功、警告和错误等反馈信息
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
  • 提供确认窗体信息
this.$modal.confirm('确认信息').then(function() {
  ...
}).then(() => {
  ...
}).catch(() => {});
1
2
3
4
5
  • 提供遮罩层信息
// 打开遮罩层
this.$modal.loading("正在导出数据，请稍后...");

// 关闭遮罩层
this.$modal.closeLoading();
1
2
3
4
5

# $auth对象

$auth对象用于验证用户是否拥有某（些）权限或角色，它定义在 plugins/auth.js文件中，它有如下方法

  • 验证用户权限
// 验证用户是否具备某权限
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"]);
1
2
3
4
5
6

# $cache对象

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

对象名称 缓存类型
session 会话级缓存，通过sessionStorage实现
local 本地级缓存，通过localStorage实现

示例

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

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

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

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

// 删除值
this.$cache.local.remove('key')
this.$cache.session.remove('key')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# $download对象

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

  • 根据名称下载 download路径下的文件
const name = "be756b96-c8b5-46c4-ab67-02e988973090.xlsx";
const isDelete = true;

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

// 下载完成后是否删除文件
this.$download.name(name, isDelete);
1
2
3
4
5
6
7
8
  • 根据名称下载 upload路径下的文件
const resource = "/profile/upload/2021/09/27/be756b96-c8b5-46c4-ab67-02e988973090.png";

// 默认方法
this.$download.resource(resource);
1
2
3
4
  • 根据请求地址下载 zip包
const url = "/tool/gen/batchGenCode?tables=" + tableNames;
const name = "haier";

// 默认方法
this.$download.zip(url, name);
1
2
3
4
5
  • 更多文件下载操作
// 自定义文本保存
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);

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

// 根据地址保存文件
this.$download.saveAs("https://haier.vip/images/logo.png", "logo.jpg");
1
2
3
4
5
6
7
8
9
10
11
12
13
14

工具函数

Edit this page
Last update: October 10, 2022 13:59
Contributors: wangxiang

前端手册