为了满足定制化的需求，提高代码的可复用性，设计一套基于 antd 的后台组件库。
- 修复某个组件 bug 及某个组件小需求更迭，0.0.x 需要将最末尾版本加 1
- 新增一个组件的需求迭代，0.x.0 需要将中间版本加 1(0.x.0 启动)
- 涉及重大版本改版，组件的所有设计架构改版，x.0.0 将第一个版本号加 1（x.0.0 启动）
npm i @form-component/common-antd-vue<div style="background-color:#ddd;padding:20px;">
<search-form @searchQuery='queryClick' @resetQuery='resetScreen'>
<template v-slot:customer="{config:{data, formState}}">
<!-- 作用域插槽，自定义组件 -->
<!-- 1234567896 -->
<!-- {{data}}---{{formState}} -->
<!-- {{formState.value}} -->
<a-checkbox v-model:checked="formState.value.customer" style="line-height:32px;">Checkbox</a-checkbox>
</template>
<template v-slot:checkAll="{config:{data, formState}}">
<a-checkbox-group v-model:value="formState.value.checkAll">
<a-row>
<a-col :span="8">
<a-checkbox value="A">A</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="B">B</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="C">C</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="D">D</a-checkbox>
</a-col>
<a-col :span="8">
<a-checkbox value="E">E</a-checkbox>
</a-col>
</a-row>
</a-checkbox-group>
</template>
</search-form>
</div>
<template>
import { defineComponent, toRaw, ref } from 'vue'
import { SearchForm, useFormSearch } from '../lib/index.js'
export default defineComponent({
components:{
SearchForm
},
setup(){
const formParams = [
{
label:"用户名",
filed:'username',
// isSlotFlag:true,
id:0,
component:{
name:'input',
props:{
placeholder:"请输入你的用户名",
size:'default',// default 32
// change:()=>{}
},
// data:[]
}
},
{
label:"信号值",
filed:'singalValue',
// isSlotFlag:true,
id:1,
component:{
name:'select',
props:{
placeholder:"请选择信号值",
// size:'default',// default 32
// change:()=>{}
},
data:[
{
value:'is',
label:'有',
id:0
},
{
value:'no',
label:"否",
id:1
}
]
}
},
{
label:"日期",
filed:'timer',
// isSlotFlag:true,
id:0,
component:{
name:'datePicker',
props:{
placeholder:"请选择日期",
size:'default',// default 32
// change:()=>{}
},
// data:[]
}
},
{
label:"自定义",
filed:'customer',
isSlotFlag:true,
id:0,
component:{
// name:'datePicker',
// props:{
// placeholder:"请选择日期",
// size:'default',// default 32
// // change:()=>{}
// },
// data:[]
}
},
{
label:"多选组件",
filed:'checkAll',
isSlotFlag:true,
id:4,
component:{
// name:'datePicker',
// props:{
// placeholder:"请选择日期",
// size:'default',// default 32
// // change:()=>{}
// },
// data:[]
}
}
];
const formState = {
username:undefined,
phone:undefined,
singalValue:undefined,
timer:undefined,
customer:false,
checkAll:[]
};
const formConfig = {
hideRequiredMark:false,
labelAlign:'right'
}
useFormSearch({
formParams,
formState,
formConfig,
formItemConfig:{}
})
return {
queryClick:(value)=>{
console.log(value, 7665)
},
resetScreen:(value)=>{
// console.log(value)
},
// formState
}
}
})
</script>| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| setUseForm | 传递数据 | function | {} |
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| formParams | 组件遍历数据 | Array | [] |
| formState | 数据默认初始值的设置，绑定form表单的model | object | [] |
| formConfig | form表单的数据校验 | object | [] |
| formItemConfig | formItem设置参数，布局样式label和wrapper的设置，及style的设置 | object | [] |
webpack配置
{
test:/\.(woff|woff2|eot|otf|ttf)$/,
use:'file-loader'
}
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| options | 富文本配置 | Object | defaultOptions |
| content | 获取富文本的内容值，当设置为v-model:value, content失效 | string | - |
| value | v-model:value绑定富文本编辑器的内容 | string | - |
| onFocus | 获取富文本的焦点 | function:(quill：object)=>{} | - |
| onBlur | 失去富文本的焦点 | function:(quill：object)=>{} | - |
| onChange | 改变富文本的事件 | function:({ html: Html, text, quill })=>{} | - |
| onReady | 加载富文本事件 | function:(quill)=>{} | - |
{
theme: 'snow', // 设置主题
modules: {
toolbar: {
container: [
[{'header': [1, 2, false]}],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{'script': 'sub'}, {'script': 'super'}],
[{'align': []}],
[{'color': []}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'list': 'ordered'}, {'list': 'bullet'}],
[{'direction': 'rtl'}],
["formula"], // 函数功能
['link', 'image', 'video'],
['table'], // 引入table到工具栏
['clean'],
],
...
},
...
}
}
npx styleguidist server可在本地查看- 在线文档待补充
- component.data ===> array | function
使用 eslint 作为代码规范自动化检查工具。为了构建方便，直接使用了 airbnb 的代码规范，再根据实际使用做定制化。
使用 webpack 作为构建工具。
npm run build
npm publish --access public
使用styleguidist作为文档及在线 demo 的生成工具。
├── docs
│ ├── installation.md // 安装说明
│ └── introduction.md
├── esm // es版本发布包
│ ├── form
│ │ ├── hooks
│ │ │ ├── index.js
│ │ │ ├── index.js
| | | ├── install-antd.js
│ │ │ ├── SearchForm.vue
│ │ │ └── index.vue
│ └── index.js
├── lib // commonjs版本发布包
├── examples
│ └── src
│ ├── index.html
│ └── index.js
├── src // 组件源码
│ ├── components
│ │ ├── form
│ │ │ ├── hooks
│ │ │ │ ├── index.js
│ │ │ ├── index.js
| | | ├── install-antd.js
│ │ │ ├── SearchForm.vue
│ │ │ └── index.vue
│ │ └── index.js
│ ├── styleguide
│ │ ├── Wrapper // styleguide全局配置
│ ├── index.js
│ └── styles.css
├── styleguide
│ ├── build
│ │ └── bundle.4b0a7458.js
│ └── index.html
├── Readme.md
├── babel.config.js
├── package-lock.json
├── package.json
├── styleguide.config.js // styleguide配置文件
└── webpack.config.js
暂无
- 开发新组件在 src/components 下建立文件夹，使用帕斯卡命名法，如
SearchForm - 组件文件夹:
- 代码规范及其他
- 使用 airbnb 规范，希望你在开发过程中自觉消除所有不符合规范的代码
- 希望你的代码具有较高的易读性，可维护性，并为代码提供详细易懂的注释
- 希望你在修改已有的组件时保证兼容性，并为修改部分提供详细的注释并且补充文档和更新说明
- 希望你在添加组件时尽可能多的考虑适配性，可通用性，编写出可供他人使用的组件
- 在 src/components 文件夹下开发组件，在 src/index 中引入需要测试的组件，并执行
npm run test测试。 - 在对应组件下的 Readme 中编写组件的在线文档。执行
npm run doc:server本地预览文档。 - 执行
npm run doc:build生成组件库文档。
- The change log can be found on the log.md