增加子表/行

介绍

基于 vant 进行插件化前置函数开发

代码演示

代码展示

import dayjs from "dayjs";
import { Toast } from "vant";
const version = "0.0.1";
function install(Vue) {
  // 2022-09-23 13:14:28 by lee
  Vue.prototype.$bus = new Vue();
  Vue.prototype.$showLoading = (opt = {}) => {
    return Toast.loading({
      ...{
        message: "加载中...",
        duration: 0, // 持续展示 toast
        forbidClick: true,
        type: "loading"
      },
      ...opt
    });
  };
  Vue.prototype.$hideLoading = instance => {
    if (instance) {
      instance.clear();
    } else {
      Toast.clear();
    }
  };
  Vue.prototype.$tip = (cb, obj) => {
    obj = obj || {
      duration: 1000
    };
    let duration = obj.duration || 1000;
    Vue.prototype.$toast({
      ...{
        message: "保存成功!",
        type: "success",
        duration
      },
      ...obj
    });
    setTimeout(() => {
      cb && cb();
    }, duration);
  };
  Vue.prototype.$day = dayjs;
  Vue.prototype.$formatDay = (time, unit = "YYYY-MM-DD HH:mm:ss") => {
    if (!time) {
      return "";
    }
    return Vue.prototype.$day(time).format(unit);
  };
  Vue.prototype.$typeof = o => Object.prototype.toString.call(o).slice(8, -1);
  // 判断两个数组是否有重合 应用场景， 个人权限中 有 符合 业务权限的 项 。返回true 可以直接开放权限
  Vue.prototype.$contains = (...args) => {
    let allArr = [];
    [...args].map(v => (allArr = [...allArr, ...v]));
    return [...new Set(allArr)].length < allArr.length;
  };
  // 板块高度自动计算 by lee 需要注意的是v-show导致元素高度为0 ，建议使用 v-if + keepAlive 的形式
  Vue.directive("layout", {
    inserted: (elm, binding) => {
      let otherH = 0,
        unit = binding?.value?.unit || "%",
        exclude = binding?.value?.exclude || [],
        include =
          binding?.value?.include ||
          [...elm.parentElement.children].filter(item => item !== elm); //元素集合
      include = include.filter(item => !exclude.includes(item));
      include.map(item => (otherH += item.offsetHeight));
      elm.style.height = `calc( 100${unit} - ${otherH}px )`;
    }
  });
  // 调整van-cell必填项星号位置 by lee
  Vue.directive("required", (elm, binding) => {
    // 是cell 或者 field 组件
    if (![undefined, true].includes(binding?.value?.enable)) return;
    if (["van-cell", "van-field"].includes(...[...elm.classList])) {
      let position = binding?.value?.position || "right";
      if (position === "left") {
        elm.setAttribute("data-require", "van-cell--required");
        elm.classList.add("van-cell--required"); // 可以使用组件自带 require (prop)
      } else if (position === "right") {
        // elm.classList.add('van-cell--required-end'); //组件刷新class会丢失
        elm.setAttribute("data-require", "van-cell--required-end");
      }
    }
  });
  // 通过指令给表单添加只读样式
  Vue.directive("readonly", (elm, { value }) => {
    let readonlyClass = value?.class || "readonly-form";
    if (![undefined, true].includes(value?.enable)) {
      if ([...elm.classList].includes(readonlyClass)) {
        elm.classList.remove(readonlyClass);
      }
      return;
    } else {
      elm.classList.add(readonlyClass);
    }
  });
}

export default {
  install,
  version
};