common-element-ui v1.1.3--beta.11

common-element-ui

安装

组件依赖element-plus组件库，需要先安装element-plus

npm install element-plus

然后安装本组件库

npm install common-element-ui

使用

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

import commonElementUi from 'common-element-ui'
import 'common-element-ui/common-ui.css'

createApp(App).use(router).use(ElementPlus).use(commonElementUi).mount('#app')

common-ui.css

common-ui.css集成了一些基本样式，包括组件库的全局样式和一些常用变量，例如fs--12到fs—50代表font-size的样式，相同的还有mg-t—数字，mg-t/r/l/b/x/y—数字，pd-t/r/l/b/x/y—数字

WidgetItem

prop

declare type WidgetItemType = {
  widgetType?: string,
  prop: string,
  formatter?: Function,
  [propName: string]: any
}

const props = defineProps({
  widgetConfig: {
    type: Object as PropType<WidgetItemType>,
    required: true
  },
  widgetData: {
    type: Object,
    required: true
  },
  scopeData: {
    type: Object,
    default: {}
  }
})

widgetType是组件的基本配置

widgetData是组件的数据，是一个Object

scopeData是一个预留属性，在table中是column插槽的scope字段

widgetType基本是对element-plus的二次封装，也有自己写的组件

CommonTable

对el-table的二次封装，集合了分页

declare type TableConfigType = {
  // 表格数据
  data: Array<DefaultObjectType>,
  // 表格头的按钮
  btnConfig?: DefaultObjectType,
  // 表格分页数据
  paginationConfig?: paginationConfigType,
  render?: Function
} & DefaultObjectType

declare type ColumnConfigType = {
  // 表格头配置数据
  columnList?: Array<ColumnListType>,
  // 格式化表格数据函数
  formatData?: Function,
  // 表格内的按钮
} & DefaultObjectType

declare type PaginationConfigType = {
  page: number,
  limit: number,
  total: number
} & DefaultObjectType

const props = defineProps({
  render: {
    type: Function,
  },
  tableConfig: {
    type: Object as PropType<TableConfigType>,
    default: () => ({}),
  },
  columnConfig: {
    type: Object as PropType<ColumnConfigType>,
    default: {}
  },
  paginationConfig: {
    type: Object as PropType<PaginationConfigType>,
    default: () => ({}),
  },
})

prop

render

获取表格数据的函数，在分页改变的时候会触发

tableConfig

columnConfig

详情查看Column组件

paginationConfig

PaginationConfigType:

Column

对el-column的二次封装

declare type ColumnListType = {
  // 标题的文字
  label: string;
  // 标题是否有必填样式
  required?: Boolean,
  // 控制表格列的函数
  controller?: ColumnControllerType,
  // 表格内按钮配置
  buttonsList?: Array<ColumnBtnsType>,
  // 多级表头
  headerChildren?: Array<ColumnListType>
  [propName: string]: any,
} & WidgetItemType

declare type ColumnControllerType = (config: ColumnListType) => Boolean

declare type ColumnBtnsType = {
  label: string,
  func: Function,
  [propName: string]: any,
}

const props = defineProps({
  columnList: {
    type: Array as PropType<ColumnListType[]>,
    default: []
  },
  formatData: {
    type: Function
  },
})

prop

columnList: ColumnListType & WidgetItemType

formatData

暂时舍弃

插槽

FormTable

利用原生table和el-form进行二次封装

declare type FormItemType = {
  label: string,
  // 控制FormItem的函数
  controller?: ControllerType,
  // 是否插入td插槽
  tdSlot?: boolean,
  // 是否插入formItem插槽
  itemSlot?: boolean,
  // 合并列
  colspan?: number,
	// 是否显示必填样式
  required?: boolean,
  [propName: string]: any,
} & WidgetItemType

declare type FormListType = Array<FormItemType[]>

declare type FormConfigType = {
  // 分配每一列的宽度
  col?: string[],
  // formItem，二维数组
  formList: FormListType,
  // form表单数据
  formData: DefaultObjectType,
  [propName: string]: any,
} & DefaultObjectType

const props = defineProps({
  col: {
    type: Array as PropType<string[]>,
    default: ['30%','70%']
  },
  formData: {
    type: Object,
    default: {}
  },
  formList: {
    type: Array as PropType<FormListType>,
    default: []
  },
  formatData: {
    type: Function
  }
})

prop

col

字符串数组，一项表示一列的宽度，分配每一列的宽度。eg:'20%', '30%', '20%', '30%'

formData

表单数据对象

formList

FormItemType类型的二维数组

详情查看FormItem组件

formatData

暂弃

FormItem

对el-form-item的二次封装

declare type FormItemType = {
  label: string,
  // 控制FormItem的函数
  controller?: ControllerType,
  // 是否插入td插槽
  tdSlot?: boolean,
  // 是否插入formItem插槽
  itemSlot?: boolean,
  // 合并列
  colspan?: number,
	// 是否显示必填样式
  required?: boolean,
  [propName: string]: any,
} & WidgetItemType

declare type ControllerType = (value: any, data: any, config: FormItemType) => Boolean

const props = defineProps({
  formItem: {
    type: Array as PropType<FormItemType[]>,
    default: []
  },
  formData: {
    type: Object,
    default: {}
  },
  formatData: {
    type: Function
  }
})

prop

formItem：FormItemType & WidgetItemType

插槽

MDialog

declare type DialogConfigType = {
  title: string;
  isShowFooter?: boolean,
  isShowConfirm?: boolean,
  headerClass?: string,
} & DefaultObjectType

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  dialogConfig: {
    type: Object as PropType<DialogConfigType>,
    default: () => ({}),
  },
  nativeConfig: {
    type: Object,
    default: {}
  }
})

prop

插槽

SearchForm

查询条件表单，利用el-col做不同分辨率的响应式

// SearchForm,继承WidgetItemType
declare type SearchItemType = {
  label: string;
  prop: string;
  span?: string;
  class?: string;
  labelWidth: string | number;
} & WidgetItemType

const props = defineProps({
  isInline: {
    type: Boolean,
    default: true,
  },
  // 表达对象
  formData: {
    type: Object,
    default: () => ({}),
  },
  // 表单校验对象
  formRules: {
    type: Object,
    default: () => ({}),
  },
  // labe默认长度
  labelWidth: {
    type: String,
    default: '120px', // 120px
  },
  // 表单列表
  formList: {
    type: Array as PropType<SearchItemType[]>,
    default: () => [],
    // default: [],
  },
  size: {
    type: Object,
    default: {
      sm: 24,
      md: {},
      lg: 12,
      xl: 8,
      xs: {},
    },
  },
  gutter: {
    type: Number,
    default: 130,
  },
})

prop

插槽