Vue主动检测文件是否存在 模块管理用

Vue 验证文件是否存在

最近写项目时遇到一个情况:使用管理系统管理模块时,输入想要关联的组件时如果填写错误,会导致一些异常。
于是乎,找到了一个解决方法。

请输入图片描述

1.创建配置信息文件

请输入图片描述
如图
在此处创建两个js文件

_import_development.js
_import_production.js

我这里内容写的是一样的

module.exports = file => () => import('@/views' + file + '.vue')

2.页面里引入这个文件
请输入图片描述

const _import = require('@/router/_import_development.js')

3.检查文件存在方法定义

isFileExist() {
    var filePath = this.formData.ModuleComponent;

    try {
      var isfile = _import(filePath);
      return true;
    } catch (e) {
      if (filePath == "Layout") {
        return true;
      }
      return false;
    }
  },

4.调用方法,由于此处用的是elementui的表单验证,所以自定义了一个验证规则,用法可以参考elementUI Fom

      var checkFile = (rule, value, callback) => {
    if (!value) {
      return callback(new Error('组件不允许为空'));
    }
    setTimeout(() => {
      var isExist = this.isFileExist();

      if (!isExist) {
        callback(new Error('系统检测到组件不存在!'));
      } else {
        callback();
      }
    }, 100);
  };

在这里插入图片描述

总结
总体思路为模拟导出输入的组件地址,用try catch捕捉保存信息。由于导入时如果没有这个文件会导致报错,所以用此“曲线救国”的方式来解决这个需求。

本文来自投稿,不代表本站立场,如若转载,请注明出处:https://www.zfjsec.com/760.html
-- 展开阅读全文 --
linux上安装MongoDB
« 上一篇 08-18
win10家庭版没有策略组编辑器怎么办?(找不到gpedit.msc)
下一篇 » 09-02

发表评论