# sugar

### 引入 wkiss-sugar

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

```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 可以帮你自动生成一些表单类的元素，并且帮助你实现一业务数据的回填：

```html
<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 可以帮助你更方便的实现分页：

```html
<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>
```