@form-component/common-antd-vue

组件库说明

概述

为了满足定制化的需求，提高代码的可复用性，设计一套基于 antd 的后台组件库。

版本号使用说明

• 修复某个组件 bug 及某个组件小需求更迭，0.0.x 需要将最末尾版本加 1
• 新增一个组件的需求迭代，0.x.0 需要将中间版本加 1(0.x.0 启动)
• 涉及重大版本改版，组件的所有设计架构改版，x.0.0 将第一个版本号加 1（x.0.0 启动）

如何使用

私有 npm 仓库使用说明

基于 antd-vue 组件二次开发

组件

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>

组件 api 文档

SearchForm 组件

参数名	描述	类型	默认值
setUseForm	传递数据	function	{}

setUseForm函数内的参数

参数名	描述	类型	默认值
formParams	组件遍历数据	Array	[]
formState	数据默认初始值的设置，绑定form表单的model	object	[]
formConfig	form表单的数据校验	object	[]
formItemConfig	formItem设置参数，布局样式label和wrapper的设置，及style的设置	object	[]

formParams

formState

formConfig

formItemConfig

富文本编辑器 RichEditor

    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)=>{}	-

defaultOptions

    {
        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