Vue-components封装组件

目录

1、Input 输入框

2、Table 表格

3、Tree 树形控件

4、Pagination 分页

5、Dialog 对话框

6、ECharts 图表

7、wangEditor 富文本编辑器

---

整理一下自己在 Vue2 项目中常用到的一些封装组件 ：

大部分是结合 element-ui 组件库 进行的二次封装 ：

饿了么组件库  =>  Element - The world's most popular Vue UI framework

---

1、Input 输入框

通过鼠标或键盘输入字符

场景需求 ： 输入框限制用户只能输入数字类型

---

开始封装 ：

项目  /  src  /  components  /  common  /  numInput.vue

项目  /  src  /  utils  /  digitalInput.js 文件

/** 数字型输入框
 * @param {} event 事件对象
 * @param {} modelValue 输入框绑定值
 * @return {} 处理好的内容
 */
// 限制用户只能输入数字
export const digitalInput = (event, modelValue) => {
  // 限制用户输入非数字内容 且 不能以 0 开头
  if (!/^[0-9]*[1-9][0-9]*$/.test(event)) {
    modelValue = event.replace(/\D/g, "").replace(/^0/g, "");
  }
  console.log(modelValue, "封装函数");
  return modelValue;
};

开始使用 ：

项目  /  src  /  views  /  edit  /  index.vue

---

2、Table 表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

开始封装 ：

项目  /  src  /  components  /  common  /  publicTable.vue

开始使用 ：

项目  /  src  /  views  /  list  /  index.vue

第二种封装写法 ：

---

3、Tree 树形控件

用清晰的层级结构展示信息，可展开或折叠。

项目  /  src  /  utils  /  tools.js 文件

/**
 * 数组去重
 */
const unique = function (arr) {
  return arr.filter((item, index) => {
    return arr.indexOf(item, 0) === index;
  });
};

开始使用 ：

项目  /  src  /  views  /  index.vue

---

4、Pagination 分页

当数据量过多时，使用分页分解数据。

开始封装 ：

项目  /  src  /  components  /  page  /  index.vue

开始使用 ：

项目  /  src  /  views  /  list  /  index.vue

第二种封装方法 ：

使用方法 ：

---

5、Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

开始封装 ：

项目  /  src  /  components  /  common  /  publicDialog.vue

开始使用 ：

项目  /  src  /  views  /  submit  /  index.vue

---

6、ECharts 图表

一个基于 JavaScript 的开源可视化图表库

Apache ECharts

开始封装 ：

项目  /  src  /  components  /  echarts  /  echartsChart.vue

---

7、wangEditor 富文本编辑器

开源 Web 富文本编辑器，开箱即用，配置简单

wangEditor

安装 wangEditor

npm 安装  

npm i wangeditor --save

注：wangeditor 全小写

package.json 文件

"wangeditor": "^4.7.11"

封装 wangEditor 组件（wangEditor.vue）

src  /  components  /  wangEditor  /  index.vue

this.editor.customConfig.uploadImgServer = Settings.apiUrl + ‘/api/CoreService/File/UploadFile’  // 配置服务器端地址，这个是处理图片上传问题的

src  /  components  /  wangEditor  /  fileMenu.js

/**
 * editor: wangEditor 的实例
 * editorSelector: wangEditor 挂载点的节点
 * options: 一些配置
 */
import uploadFile from "./uploadFile";
import vue from "vue";
export default (editor, editorSelector, options) => {
  editor.fileMenu = {
    init: function (editor, editorSelector) {
      const div = document.createElement("div");
      div.className = "w-e-toolbar w-e-menu";
      div.style.zIndex = 10001;
      div.setAttribute("data-title", "附件");
      const rdn = new Date().getTime();
      div.onclick = function (e) {
        if (e.stopPropagation) {
          e.stopPropagation();
        } else {
          e.cancelBubble = true;
        }
        // document.getElementById(`up-${rdn}`).click()
      };
      const input = document.createElement("input");
      input.type = "file";
      input.name = "file";
      input.id = `up-${rdn}`;
      input.className = "upload-file-input";
      div.innerHTML = ``;
      div.appendChild(input);
      editorSelector.getElementsByClassName("w-e-toolbar")[0].appendChild(div);
      input.onchange = (e) => {
        console.log(e, "change");
        // 使用 uploadFile 上传文件
        // uploadFile(e.target.files, {
        //   onOk: (data) => {
        //     console.log(data);
        //     // 可以使用 editor.txt.html(data) 进行更新
        //   },
        //   onFail: (err) => {
        //     console.log(err);
        //   },
        //   onprogress: (percent) => {
        //     console.log(percent);
        //   },
        // });
        uploadFile(e.target.files, {
          onOk: (data) => {
            // console.log(data, '文件上传');
            const { code, result } = data || {};
            if (code == 0) {
              e.target.value = ""; // 解决 input onchange 事件第二次调不起的解决方法
              let fileName = result.fileName.toLowerCase();
              let fileIconUrl = ""; // 存放附件前面小 icon 地址的变量
              let _index = fileName.lastIndexOf(".") + 1;
              let fileDot = fileName.substring(_index, fileName.length);
              if (fileDot == "doc") {
                fileIconUrl =
                  "http://83.12.234.567:8080/icon_doc.gif";
              } else if (fileDot == "txt") {
                fileIconUrl =
                  "http://83.12.234.567:8080/icon_doc.gif";
              } else if (fileDot == "xls" || fileDot == "xlsx") {
                fileIconUrl =
                  "http://83.12.234.567:8080/icon_doc.gif";
              }
              editor.txt.append(
                `
${fileName}
`
              );
            }
          },
          onFail: (err) => {
            console.log(err);
          },
          onprogress: (percent) => {
            console.log(percent);
          },
        });
      };
    },
  };
  // 创建完之后立即实例化
  editor.fileMenu.init(editor, editorSelector);
};

src  /  components  /  wangEditor  /  uploadFile.js

import { message } from "element-ui";
import { uploadFileApi } from "@/api/listApi";

function uploadFile(files, options) {
  if (!files || !files.length) {
    return;
  }
  // let uploadFileServer = commonApi.imgUploadApi; // 文件上传地址
  let uploadFileServer = uploadFileApi; // 文件上传地址
  const maxSize = 100 * 1024 * 1024; // 100M
  const maxSizeM = maxSize / 1000 / 1000;
  const maxLength = 1;
  const uploadFileName = "file";
  const uploadFileParams = {};
  const uploadFileParamsWithUrl = {};
  const timeout = 5 * 60 * 1000; // 5 min
  // ---------------------- 验证文件信息 ---------------------------
  const resultFiles = [];
  const errInfo = [];
  for (let file of files) {
    const name = file.name;
    const size = file.size;
    // chrome 低版本 name ===== undefined
    if (!name || !size) return;
    if (maxSize < size) {
      // 上传附件过大
      errInfo.push("\u3010" + name + "\u3011\u5927\u4E8E" + maxSizeM + "M");
      return;
    }
    // 验证通过的加入结果列表
    resultFiles.push(file);
  }
  // 抛出验证信息
  if (errInfo.length) {
    this._alert("附件验证未通过, \n" + errInfo.join("\n"));
    return;
  }
  if (resultFiles.length > maxLength) {
    this._alert("一次最多上传" + maxLength + "个文件");
    return;
  }
  // ----------------------- 自定义上传 ----------------------
  const formdata = new FormData();
  for (let file of resultFiles) {
    const name = uploadFileName || file.name;
    formdata.append("file", file);
    // formdata.append(name, file);
  }
  // 附件上传
  uploadFileApi(fromdata)
    .then((res) => {
      options.onOk && options.onOk(res);
    })
    .catch((err) => {
      options.onFail && options.onFail(err);
    });

  // // ----------------------- 上传附件 -------------------------
  // if (uploadFileServer && typeof uploadFileServer === "string") {
  //   for (key in uploadFileParams) {
  //     val = encodeURIComponent(uploadFileParams[val]);
  //     formdata.append(key, val);
  //   }
  // }

  // // 定义 xhr
  // const xhr = new XMLHttpRequest();
  // xhr.open("POST", uploadFileServer);
  // // 设置超时
  // xhr.timeout = timeout;
  // xhr.ontimeout = function () {
  //   if (options.timeout && typeof options.timeout === "function") {
  //     options.timeout(xhr, editor);
  //   }
  //   message.error("上传附件超时");
  // };
  // // 监控 progress
  // if (xhr.upload) {
  //   xhr.upload.onprogress = function (e) {
  //     let percent = void 0;
  //     // 进度条
  //     if (e.lengthComputable) {
  //       percent = e.loaded / e.total;
  //       if (options.onprogress && typeof options.onprogress === "function") {
  //         options.onprogress(percent);
  //       }
  //     }
  //   };
  // }
  // // 返回数据
  // xhr.onreadystatechange = function () {
  //   let result = void 0;
  //   if (xhr.status < 200 || xhr.status >= 300) {
  //     if (options.onFail && typeof options.onprogress === "function") {
  //       options.onFail(xhr, editor);
  //     }
  //     return;
  //   }
  //   result = xhr.responseText;
  //   if (
  //     (typeof result === "undefined" ? "undefined" : typeof result) !== "object"
  //   ) {
  //     try {
  //       result = JSON.parse(result);
  //     } catch (ex) {
  //       if (options.onFail && typeof options.onFail === "function") {
  //         options.onFail(xhr, editor, result);
  //       }
  //       return;
  //     }
  //   }
  //   const data = result || [];
  //   if (data.code == 0) {
  //     options.onOk && options.onOk(data.data);
  //   }
  // };
  // // 自定义 headers
  // for (let key in uploadFileHeaders) {
  //   xhr.setRequestHeader(key, uploadFileHeaders[key]);
  // }
  // // 跨域传 token
  // xhr.widthCredentials = false;
  // // 发送请求
  // xhr.send(formdata);
}

export default uploadFile;

导入并引用组件

src  /  views  /  edit  /  components  /  parameter.vue

展示效果