基礎(chǔ)控件
主要指的是表單里面需要的各種組件旗笔。
有些組件比較簡(jiǎn)單蒜哀，一行就可以搞定斩箫，但是有些就需要多寫幾行，這樣就有點(diǎn)麻煩撵儿，比如單選組合復(fù)選組還有下拉選擇等乘客。如果需要聯(lián)動(dòng)的話，就需要更多的代碼淀歇。
封裝基礎(chǔ)控件易核，一個(gè)是為了使用起來(lái)更便捷一些，另一個(gè)也是為封裝表單控件做準(zhǔn)備浪默。
基于element-plusUI庫(kù)牡直，封裝了一些常用的表單子控件，比如這幾個(gè)：
控制代碼纳决，打算以后穩(wěn)定了發(fā)包到npm上面碰逸，這些代碼是和UI庫(kù)無(wú)關(guān)的，也就是說(shuō)可以用于其他UI庫(kù)阔加。
表單子控件花竞，基于element-plus的 Form 里面的組件進(jìn)行封裝，以后也可以基于其他UI庫(kù)進(jìn)行封裝。至于會(huì)不會(huì)單獨(dú)發(fā)包到npm约急，這個(gè)看情況零远。
map-el-form-item.js，這個(gè)是表單子控件的注冊(cè)用的代碼厌蔽。這么多組件牵辣，一個(gè)一個(gè)注冊(cè)也太麻煩了，所以做了這個(gè)文件奴饮。
按照原子性原則進(jìn)行封裝
原子性原則纬向，也就是一個(gè)組件只做一件事情！
比如密碼組件戴卜，就只負(fù)責(zé)密碼的輸入逾条；
URL組件，就只負(fù)責(zé)url的輸入投剥；
年月的組件师脂，就只負(fù)責(zé)年月的選擇。
這樣每個(gè)組件的代碼都可以很單一江锨，便于維護(hù)和擴(kuò)展吃警。
使用方式
<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">數(shù)字</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">時(shí)間</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">開(kāi)關(guān)</el-col>
<el-col :span="14">
<nfswitch v-bind="{}" v-model="formModel.switch"/>
</el-col>
</el-row>
<el-row>
<el-col :span="4">評(píng)分</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>
除了需要選項(xiàng)的組件，其他都不需要設(shè)置屬性啄育，一個(gè)v-model即可酌心。
const propChecks = {
optionList: [
{value: 1, label: '選項(xiàng)一'},
{value: 2, label: '選項(xiàng)二'}
]
}
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: ''
})
話說(shuō)，在 script setup 里面怎么使用 ... 解構(gòu)挑豌？
效果：
