Tj-vue2-tools NPM

vue 项目安装

项目设置

npm install

开发编译和热加载

npm run serve

编译最小文件的发布代码

npm run build

Lints and fixes files

npm run lint

tj-vue2-tools

使用方法

1.在 main.js 中加入

import Vue from "vue";
import ElementUI from "element-ui";
import Avue from "@smallwei/avue";
import "@smallwei/avue/lib/index.css";
import "element-ui/lib/theme-chalk/index.css";
import axios from "axios";
import TjTools from "tj-vue2-tools";
const axiosOption = {
  headers: {},
};
Vue.use(ElementUI);
Vue.use(Avue);
Vue.use(TjTools, { axios: axios, axiosOption: axiosOption });

2.在组件中调用示例

console.log(this.$base64Encode("TJ的项目"));
console.log(this.$base64.encode("TJ的项目"));

工具集方法

base64 依赖 js-base64

base64 加密

/**
 * base64加密
 * @param {*} data
 * @returns
 */
$base64Encode(data);

base64 解密

/**
 * base64解密
 * @param {*} data
 * @returns
 */
$base64Decode(data);

base64 原生对象

/**
 * base64原生对象
 * @returns
 */
$base64;

加载 avue 自定义配置

/**
 * 加载avue自定义配置
 * @param {object} vueObj 当前vue对象
 * @param {string} optionKey 本地存储的key
 * @param {string} defaultsName defaults.sync名称
 * @param {string} crudRefName  表格ref名称
 * @returns
 */
$loadLocalOption(
  vueObj,
  optionKey,
  (defaultsName = "defaults"),
  (crudRefName = "crud")
);

保存 avue 自定义配置

/**
 * 保存avue自定义配置
 * @param {object} vueObj 当前vue对象
 * @param {string} optionKey 本地存储的key
 * @param {string} defaultsName defaults.sync名称
 * @returns
 */
$saveLocalOption(vueObj, optionKey, (defaultsName = "defaults"));

还原/重置 avue 自定义配置

/**
 * 还原/重置avue自定义配置
 * @param {object} vueObj 当前vue对象
 * @param {string} optionKey 本地存储的key
 * @param {string} crudKeyName  表格key名称
 * @returns
 */
$resetLocalOption(vueObj, optionKey, (crudKeyName = "key"));

下载图片

/**
 * 下载图片
 * @param {string} url 远程地址
 * @param {string} fileName 保存的名称
 * @returns
 */
$downloadImg(url, fileName);

下载文件

/**
 * 下载文件
 * 把二进制文件保存到本地
 * fileUrl 为远程文件地址
 * 请求接口可能需要设置 responseType: "arraybuffer"
 * fileName: 文件名，需要带后缀
 *
 * @param {string} fileUrl 远程地址
 * @param {string} fileName 保存的名称
 */
$downloadFile(fileUrl, fileName);

下载 excel 数据blob到文件

/**
 * 下载excel数据[blob]到文件,axios请求时指定 responseType: "blob"
 * 把二进制文件内容保存到本地
 * data Blob文件内容
 * name: 文件名，需要带后缀
 *
 * @param {Blob} data
 * @param {string} fileName
 */
$downloadExcelData(data, fileName);

avue 本地保存列显隐组件 tj-avue-local-option（1.0.5 版新增）

avue 模板引入
:curd-props curd 属性配置，必须项，基础用法
:button-config 选用项，高级用法

<avue-crud
  ref="crud"
  :defaults.sync="defaults"
  :option="option"
  :data="data"
  :key="reload"
>
  <template slot="menuRight" slot-scope="{ size }">
    <tj-avue-local-option
      :curd-props="curdProps"
      :button-config="{ ...buttonConfig, size: size }"
    ></tj-avue-local-option>
  </template>
</avue-crud>

组件中添加计算属性

computed: {
  //必须
    curdProps() {
      return {
        vueObj: this,//当前组件的vue对象
        optionKey: "avue-option", //本地存储的key名称（不同crud用不同的名称）
        defaultsName: "defaults", //crud defaults.sync指向的对象
        crudRefName: "crud", //crud ref名称
        crudKeyName: "reload", //crud key名称
      };
    },
    //选用，如果自带的符合业务需求，则无需添加
    buttonConfig() {
      //高级用法
      //以下对应配置elementui button项，
      return {
        // saveText: "",
        // saveType: "",
        // saveTitle: "",
        // saveCircle: true,
        // saveClass: "el-icon-s-tools",
        // saveSuccessText: "保存成功",
        // resetText: "",
        // resetType: "",
        // resetTitle: "",
        // resetCircle: true,
        // resetClass: "el-icon-setting",
        // resetSuccessText: "重置成功",
        // resetConfirmTitle: "重置配置",
        // resetConfirmText: "是否重置？",
        // resetConfirmButtonText: "是",
        // resetCancelButtonText: "否",
        // resetNoConfirm: true, //不显示重置确认框
      };
    },
  },

模拟 sleep()方法（1.0.6 版新增）

/**
 * 模拟sleep()方法
 * @param {int} millisec #毫秒
 * @returns Promise
 */
$sleep(millisec);

组件中使用

//sleep 1秒
this.$sleep(1000).then((data) => {
  console.log(data);
});

设置 avue column 必填（1.0.6 版新增）

/**
 * 设置avue column 必填
 * @param {array|object} column #column对象，多个对象则放到数组里
 * @returns Promise
 */
$setColumnRequiredTrue(column);

组件中使用

this.$setColumnRequiredTrue([
  this.defaults.myColumn, //defaults是avue-form :defaults.sync对象
]).then(() => {
  //业务代码
});

设置 avue column 非必填（1.0.6 版新增）

/**
 * 设置avue column 非必填
 * @param {array|object} column #column对象，多个对象则放到数组里
 * @returns Promise
 */
$setColumnRequiredFalse(column);

组件中使用

this.$setColumnRequiredFalse([
  this.defaults.myColumn, //defaults是avue-form :defaults.sync对象
]).then(() => {
  //业务代码
});

下载二进制数据blob到文件（1.0.9 版新增）

/**
 * 下载二进制数据[blob]到文件,axios请求时指定 responseType: "blob"
 * 把二进制文件内容保存到本地
 * data Blob文件内容
 * name: 文件名，需要带后缀
 * props: 文件属性,type(content-type)默认:application/pdf，ext(后缀名)默认:pdf
 * props示例: {
        type: "application/pdf",
        ext:"pdf"
      }
 *
 * @param {Blob} data
 * @param {string} fileName
 * @param {Object} props
 */
$downloadFromData(data, fileName, props);