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>