wkiss-sugar v0.3.3

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 属性

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>