@deardanta/base-components-vue3 v0.2.0

@deardanta/base-components-vue3：0.2.0 ⚡

通用组件库，基于vue3，基于elementPlus 版本 >= 2.3.2封装

• 💡 基于vue3，elementPlus封装
• ⚡ 动态组件实现，渲染速度更快
• 🛠️ 扩展性强，除固定属性外支持官网动态属性和插槽渲染
• 🔑 现在已经支持form, descriptions组件

// 引入element-plus
import ElementPlus from "element-plus"
import 'element-plus/dist/index.css'

// 引入中文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
app.use(ElementPlus, {locale: zhCn})

库使用方式

import install from '@deardanta/base-components-vue3'
app.use(install);

1：baseForm组件使用

// formData 为所有表单双向绑定数据
// formConfig 为表单配置项
// formItems 为表单组件配置
// formDicOptions 为表单下拉或树数据集合
// submitBaseForm 事件为提交触发验证回调
// resetBaseForm 事件为触发重置回调

<baseForm ref='baseFormRef' 
        v-model:formData="formData"
        :form-config='formConfig' 
        :form-items='formItems' 
        :form-dic-options='dicList'
        @submitBaseForm='submitBaseForm'
        @resetBaseForm='resetBaseForm'>
</baseForm>

baseForm配置项例举

所有组件除固定配置外，都动态支持elementPlus组件的所有属性，详细配置见elementPlus官网

现在已经支持的组件：

• 动态插槽 type: 'slot'
• input（inputType可配置其他类型）
• textarea
• input-number
• select
• tree-select
• cascader
• date （dateType可配置其他类型）
• time （timeType可配置其他类型）
• time-select
• radio-group
• checkbox-group
• switch
• slider
• rate
• color-picker
• transfer
• ...

const formData = reactive({
    name: '',
    age: ''
})

const formItems = reactive([
  {
    span: 12,
    type: 'input',
    label: '姓名',
    prop: 'name',
    rules: [validate.required]
  },
  {
    span: 12,
    type: 'input-number',
    label: '年龄',
    prop: 'age',
    min: 0,
    max: 200,
    rules: [validate.required]
  },
  {
    span: 24,
    type: 'slot',
    slotName: 'slot1'
  },
])

2：baseDescriptions 组件使用

// modelValue 为描述列表的数据，详细配置见下
// labelWidth 为标题宽度，默认为 '100px'
// gutter 为列表间距，默认为 20

<baseDescriptions v-model='formData' labelWidth="100px">
</baseDescriptions>

const formData = reactive([
    {
        label: '名称1', // 名称1
        content: '内容1', // 内容
        span: 12, // 24比例值
        labelWidth: '', // 标题长度（可选，默认全局labelWidth）
        line: 2 // 显示行数，超出这个数的行内容会自动省略（可选，默认2）
    }
])