封装第三方组件（三）封装基础控件

基础控件

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

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

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

基于element-plusUI库，封装了一些常用的表单子控件，比如这几个：

基础控件

• 控制代码，打算以后稳定了发包到npm上面，这些代码是和UI库无关的，也就是说可以用于其他UI库。

• 表单子控件，基于element-plus的 Form 里面的组件进行封装，以后也可以基于其他UI库进行封装。至于会不会单独发包到npm，这个看情况。

• map-el-form-item.js，这个是表单子控件的注册用的代码。这么多组件，一个一个注册也太麻烦了，所以做了这个文件。

按照原子性原则进行封装

原子性原则，也就是一个组件只做一件事情！
比如密码组件，就只负责密码的输入；
URL组件，就只负责url的输入；
年月的组件，就只负责年月的选择。

这样每个组件的代码都可以很单一，便于维护和扩展。

使用方式

      
        文本框
        
          
        
      
      
      密码
        
          
        
      
      
        数字
        
          
          
      
      
        滑块
        
          
        
      
      
        日期
        
          
        
      
      
        年
        
          
        
      
      
        月
        
          
        
      
      
        时间
        
          
          
      
      
        颜色
        
          
        
      
      
        打钩
        
          
        
      
      
        开关
        
          
        
      
      
        评分
        
          
        
      
      
        单选
        
          
        
      
      
        多选
        
          
        
      
      
        多行
        
          
        
      
       
        URL
        
          
          
      

除了需要选项的组件，其他都不需要设置属性，一个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