sugar

引入 wkiss-sugar

一般在 webpack 入口页面 main.js 中如下配置：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import Sugar from "wkiss-sugar";
Vue.use(Sugar);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

特别提示

这是基于 IviewUI 实现的组件，因此想要用此组件你的项目必须引用 view-design 或者 view-ui-plus。这个组件可以帮助你快速搭建你的页面。

auto-form

auto-form 可以帮你自动生成一些表单类的元素，并且帮助你实现一业务数据的回填：

<template>
  <auto-form
    @returnData="returnData"
    :defaultForm="Form"
    :configList="FormConfig"
  ></auto-form>
</template>
<script>
  export default {
    data() {
      return {
        Form: { matterName: "" },
        FormConfig: [
          {
            ChName: "物质名称", //中文名
            EnName: "matterName", //返回数据的时候英文名
            Value: "", //默认值
            width: 24, //宽，栅格系统
            maxlength: 10, //限制输入文字的长度
            required: { required: true, message: "消息", trigger: "blur" }, //验证规则
            type: "input", //form类型
            param: "", //参数
          },
        ],
      };
    },
    methods: {
      returnData(data) {
        console.log("form对象", data);
      },
    },
  };
</script>

属性

configList 属性

| 属性名 | 类型 | 默认值 | 说明 | | ---------- | ------- | ------ | ----------------------------------------------------------------------------------------------------------------------- | | ChName | String | | 表单项的中文名字 | | EnName | String | | 返回数据中的属性名 | | Value | String | | 默认值 | | width | Int | | formItem 的宽（栅格系统，值为 0 ～ 24） | | labelWidth | String | | labelWidth 的宽（px） | | maxlength | Number | | 输入文字的最大长度 | | required | Object | | 表单验证规则参考 Iview | | FieldId | String | | 当 type 为 select 时，业务数据对应的 Id 名 | | FieldName | String | | 当 type 为 select 时，业务数据对应的 Name 名 | | type | String | | form 的类型当前支持的有 select、Cascader、textarea、date、text、password、、url、email、date、number、tel | | param | Object | | 当 type 为 select 和 Cascader 下拉框的数据，Cascader 的数据格式请参考 Iview 原文档 | | disabled | Boolean | | 是否禁用 |

| Number | | ------ |

paging

paging 可以帮助你更方便的实现分页：

<template>
  <paging @on-change="pageChange" :tableCount="dataListCount"></paging>
</template>
<script>
  export default {
    data() {
      return {
        dataListCount:0
        page: { pageSize: 20, pageNo: 1 },
      }
    },
    methods:{
      pageChange(page) {
        this.page = page;
      }
    }
  }
</script>