ruoyi-vue前端的一些自定义插件介绍

文章目录

自定义插件$tab和$modal对象

自定义列表

可以查看src/plugins 文件夹index.js文件

import tab from'./tab'import auth from'./auth'import cache from'./cache'import modal from'./modal'import download from'./download'exportdefault{install(Vue){// 页签操作Vue.prototype.$tab = tab
    // 认证对象Vue.prototype.$auth = auth
    // 缓存对象Vue.prototype.$cache = cache
    // 模态框对象Vue.prototype.$modal = modal
    // 下载文件Vue.prototype.$download = download
  }}

$tab对象

$tab对象用于做页签操作、刷新页签、关闭页签、打开页签、修改页签等，它定义在plugins/tab.js文件中，
在src\views\tool\gen\index.vue有示例：

/** 修改按钮操作 */handleEditTable(row){const tableId = row.tableId ||this.ids[0];const tableName = row.tableName ||this.tableNames[0];const params ={pageNum:this.queryParams.pageNum };this.$tab.openPage("修改["+ tableName +"]生成配置",'/tool/gen-edit/index/'+ tableId, params);},

它有如下方法:

打开页签

this.$tab.openPage("用户管理","/system/user");this.$tab.openPage("用户管理","/system/user").then(()=>{// 执行结束的逻辑})

关闭页签

// 关闭当前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(()=>{// 执行结束的逻辑})

刷新页签

// 刷新当前页签this.$tab.refreshPage();// 刷新指定页签const obj ={path:"/system/user",name:"User"};this.$tab.refreshPage(obj);this.$tab.refreshPage(obj).then(()=>{// 执行结束的逻辑})

$modal对象

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

提供成功、警告和错误等反馈信息（无需点击确认）

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

源码使用的是element的Message

// 消息提示msg(content){
    Message.info(content)},// 错误消息msgError(content){
    Message.error(content)},// 成功消息msgSuccess(content){
    Message.success(content)},// 警告消息msgWarning(content){
    Message.warning(content)},

提供成功、警告和错误等提示信息（类似于alert，需要点确认）

this.$modal.alert("默认提示");this.$modal.alertError("错误提示");this.$modal.alertSuccess("成功提示");this.$modal.alertWarning("警告提示");

源码使用的是element的MessageBox

// 弹出提示alert(content){
    MessageBox.alert(content,"系统提示")},// 错误提示alertError(content){
    MessageBox.alert(content,"系统提示",{type:'error'})},// 成功提示alertSuccess(content){
    MessageBox.alert(content,"系统提示",{type:'success'})},// 警告提示alertWarning(content){
    MessageBox.alert(content,"系统提示",{type:'warning'})},

提供成功、警告和错误等提示信息（从右上角通知，无需确认）

this.$modal.notify("默认通知");this.$modal.notifyError("错误通知");this.$modal.notifySuccess("成功通知");this.$modal.notifyWarning("警告通知");

源码使用的是element ui的Notification

// 通知提示notify(content){
    Notification.info(content)},// 错误通知notifyError(content){
    Notification.error(content);},// 成功通知notifySuccess(content){
    Notification.success(content)},// 警告通知notifyWarning(content){
    Notification.warning(content)},

提供确认窗体信息

示例代码：src\views\system\dept\index.vue

/** 删除按钮操作 */handleDelete(row){this.$modal.confirm('是否确认删除名称为"'+ row.deptName +'"的数据项？').then(function(){returndelDept(row.deptId);}).then(()=>{this.getList();this.$modal.msgSuccess("删除成功");}).catch(()=>{});}

源码用的是element的message box

// 确认窗体confirm(content){return MessageBox.confirm(content,"系统提示",{confirmButtonText:'确定',cancelButtonText:'取消',type:"warning",})},

提供遮罩层信息

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

源码使用的是element的loading

// 打开遮罩层loading(content){
    loadingInstance = Loading.service({lock:true,text: content,spinner:"el-icon-loading",background:"rgba(0, 0, 0, 0.7)",})},// 关闭遮罩层closeLoading(){
    loadingInstance.close();}

$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"]);

验证用户角色

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

$cache对象

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

// 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')

若依中的示例

src\layout\components\Settings\index.vue

saveSetting(){this.$modal.loading("正在保存到本地，请稍候...");this.$cache.local.set("layout-setting",`{
            "topNav":${this.topNav},
            "tagsView":${this.tagsView},
            "fixedHeader":${this.fixedHeader},
            "sidebarLogo":${this.sidebarLogo},
            "dynamicTitle":${this.dynamicTitle},
            "sideTheme":"${this.sideTheme}",
            "theme":"${this.theme}"
          }`);setTimeout(this.$modal.closeLoading(),1000)},

$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);

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

const resource ="/profile/upload/2021/09/27/be756b96-c8b5-46c4-ab67-02e988973090.png";// 默认方法this.$download.resource(resource);

根据请求地址下载zip包

const url ="/tool/gen/batchGenCode?tables="+ tableNames;const name ="ruoyi";// 默认方法this.$download.zip(url, name);

更多文件下载操作

// 自定义文本保存var blob =newBlob(["Hello, world!"],{type:"text/plain;charset=utf-8"});this.$download.saveAs(blob,"hello world.txt");// 自定义文件保存var file =newFile(["Hello, world!"],"hello world.txt",{type:"text/plain;charset=utf-8"});this.$download.saveAs(file);// 自定义data数据保存const blob =newBlob([data],{type:'text/plain;charset=utf-8'})this.$download.saveAs(blob, name)// 根据地址保存文件this.$download.saveAs("https://ruoyi.vip/images/logo.png","logo.jpg");

若依中的示例

src\views\tool\gen\index.vue

/** 生成代码操作 */handleGenTable(row){const tableNames = row.tableName ||this.tableNames;if(tableNames ==""){this.$modal.msgError("请选择要生成的数据");return;}if(row.genType ==="1"){genCode(row.tableName).then(response=>{this.$modal.msgSuccess("成功生成到自定义路径："+ row.genPath);});}else{this.$download.zip("/tool/gen/batchGenCode?tables="+ tableNames,"ruoyi.zip");}},

src\views\tool\build\index.vue

execDownload(data){const codeStr =this.generateCode()const blob =newBlob([codeStr],{type:'text/plain;charset=utf-8'})this.$download.saveAs(blob, data.fileName)},