基础控件

主要指的是表单里面需要的各种组件。

有些组件比较简单，一行就可以搞定，但是有些就需要多写几行，这样就有点麻烦，比如单选组合复选组还有下拉选择等。如果需要联动的话，就需要更多的代码。

封装基础控件，一个是为了使用起来更便捷一些，另一个也是为封装表单控件做准备。

基于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 里面怎么使用 ... 解构？

效果：

控件效果

源码

https://gitee.com/naturefw/nf-vite2-element