基础控件
主要指的是表单里面需要的各种组件。
有些组件比较简单，一行就可以搞定，但是有些就需要多写几行，这样就有点麻烦，比如单选组合复选组还有下拉选择等。如果需要联动的话，就需要更多的代码。
封装基础控件，一个是为了使用起来更便捷一些，另一个也是为封装表单控件做准备。
基于element-plusUI库，封装了一些常用的表单子控件，比如这几个：
基础控件
控制代码，打算以后稳定了发包到npm上面，这些代码是和UI库无关的，也就是说可以用于其他UI库。
表单子控件，基于element-plus的 Form 里面的组件进行封装，以后也可以基于其他UI库进行封装。至于会不会单独发包到npm，这个看情况。
map-el-form-item.js，这个是表单子控件的注册用的代码。这么多组件，一个一个注册也太麻烦了，所以做了这个文件。
按照原子性原则进行封装
原子性原则，也就是一个组件只做一件事情！
比如密码组件，就只负责密码的输入；
URL组件，就只负责url的输入；
年月的组件，就只负责年月的选择。
这样每个组件的代码都可以很单一，便于维护和扩展。
使用方式
<el-row>
<el-col :span="4">文本框</el-col>
<el-col :span="14">
<nftext v-bind="propText" v-model="formModel.text"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">密码</el-col>
<el-col :span="14">
<nfpwd v-bind="propPwd" v-model="formModel.pwd"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">数字</el-col>
<el-col :span="14">
<nfnumber v-bind="{}" v-model="formModel.num"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">滑块</el-col>
<el-col :span="14">
<nfslider v-bind="{}" v-model="formModel.num"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">日期</el-col>
<el-col :span="14">
<nfdate v-bind="{}" v-model="formModel.date"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">年</el-col>
<el-col :span="14">
<nfyear v-bind="{}" v-model="formModel.year"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">月</el-col>
<el-col :span="14">
<nfmonth v-bind="{}" v-model="formModel.month"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">时间</el-col>
<el-col :span="14">
<nftime v-bind="{}" v-model="formModel.time"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">颜色</el-col>
<el-col :span="14">
<nfcolor v-bind="{}" v-model="formModel.color"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">打钩</el-col>
<el-col :span="14">
<nfcheckbox v-bind="{}" v-model="formModel.checkbox"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">开关</el-col>
<el-col :span="14">
<nfswitch v-bind="{}" v-model="formModel.switch"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">评分</el-col>
<el-col :span="14">
<nfrate v-bind="{}" v-model="formModel.rate"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">单选</el-col>
<el-col :span="11">
<nfradios v-bind="propChecks" v-model="formModel.radios"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">多选</el-col>
<el-col :span="13">
<nfcheckboxs v-bind="propChecks" v-model="formModel.checkboxs"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">多行</el-col>
<el-col :span="14">
<nfarea v-bind="{}" v-model="formModel.area"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">URL</el-col>
<el-col :span="14">
<nfurl v-model="formModel.url"/>
</el-col>
</el-row>
除了需要选项的组件，其他都不需要设置属性，一个v-model即可。
const propChecks = {
optionList: [
{value: 1, label: '选项一'},
{value: 2, label: '选项二'}
]
}
const formModel = reactive({
text: '',
area:'',
pwd: '',
url: '',
num: 1,
date: '',
year: '2020',
month: '2021-02',
time:'',
checkbox: false,
switch: false,
radios:[],
checkboxs:[],
color: '',
rate: 3,
an: ''
})
话说，在 script setup 里面怎么使用 ... 解构？
效果：
控件效果
