sw-element
v1.1.4
Published
省外技术支持部通用组件收集
Downloads
11
Readme
SWElement
省外技术支持部通用组件收集。
安装&使用
安装
yarn add sw-element使用
import SWElement from 'sw-element';
Vue.use(SWElement);设置全局配置
import { sw_setGlobalConfig, SWBasicTableValues } from 'sw-element';
sw_setGlobalConfig({
// 此处全局配置筛选表单的属性
filterFormConfig: {
// titleMarginLeft: 5,
// titleMarginRight: 5,
// titleFontSize: 14,
// titleTextColor: '#424242',
// itemWidth: 200
},
// 此处全局配置基础表格列宽自适应方式
basicTableConfig: {
// columnAdaptiveType: SWBasicTableValues.columnAdaptiveType.titleAdaptive
},
// 此处全局配置基础表格的属性
basicTableAttributes: {
// 请参考：https://element.eleme.io/#/zh-CN/component/table#table-attributes
// ...
},
// 此处全局配置基础表格列的属性
basicTableColumnAttributes: {
// 请参考：https://element.eleme.io/#/zh-CN/component/table#table-column-attributes
// 'show-overflow-tooltip': true, // 内置当内容过长被隐藏时显示tooltip，如需自行配置请在此处进行覆盖
// ...
},
// 此处全局配置基础对话框的配置
basicDialogConfig: {
// center: true,
// reverseBtn: false
// cancelBtnTitle: '取消',
// confirmBtnTitle: '确认',
// cancelBtnVisible: true,
// confirmBtnVisible: true,
},
// 此处全局配置基础对话框的属性
basicDialogAttributes: {
// 'modal-append-to-body': false,
// 'destroy-on-close': true,
// 'close-on-click-modal': false
},
// 此处全局配置数据表单的配置
dataFormConfig: {
// dynamicListIsOpen: false,
// numberOfColumn: 2
},
// 此处全局配置数据表单的属性
dataFormAttributes: {
// 请参考：https://element.eleme.io/#/zh-CN/component/form#form-attributes
// ...
}
});配置优先级：标签属性 > 全局属性 > 默认属性；
组件清单
FilterForm
筛选表单，通过配置快速生成筛选菜单。
使用示例
- template
<sw-filter-form :items="filterItems" :initial-form-data.sync="filterData">
<template v-slot:slot-demo>
<el-input v-model="filterData.slotValue" />
</template>
</sw-filter-form>- js
import { SWFilterFormValues } from 'sw-element';
export default {
name: 'Index',
data() {
return {
filterItems: [
{
visible: false,
type: SWFilterFormValues.itemType.input,
title: '输入框示例',
prop: 'inputValue',
contentSpan: 3,
on: {
change: this.onChange
},
bind: {
placeholder: '请输入'
}
},
{
type: SWFilterFormValues.itemType.selector,
title: '选择器配置方法示例',
prop: 'funSelectorValue',
options: this.getOptions,
labelKey: 'displayName',
valueKey: 'id',
on: {
change: this.onChange
},
bind: {
placeholder: '请选择'
}
},
{
type: SWFilterFormValues.itemType.selector,
title: '选择器配置值示例',
prop: 'valSelectorValue',
options: [
{
id: '1',
displayName: '选项1'
},
{
id: '2',
displayName: '选项2'
}
],
labelKey: 'displayName',
valueKey: 'id',
on: {
change: this.onChange
},
bind: {
placeholder: '请选择'
}
},
{
type: SWFilterFormValues.itemType.timePicker,
title: '时间选择器',
prop: 'timePickerValue',
on: {
change: this.onChange
},
bind: {
placeholder: '请选择'
}
},
{
type: SWFilterFormValues.itemType.timeSelector,
title: '任意时间选择器',
prop: 'timeSelectorValue',
on: {
change: this.onChange
},
bind: {
placeholder: '请选择'
}
},
{
type: SWFilterFormValues.itemType.datePicker,
title: '日期选择器',
prop: 'datePickerValue',
contentSpan: 1,
on: {
change: this.onChange
},
bind: {
placeholder: '请选择'
}
},
{
type: SWFilterFormValues.itemType.slot,
title: '插槽示例',
contentSpan: 1,
slotName: 'slot-demo'
}
],
filterData: {
inputValue: '',
funSelectorValue: '',
valSelectorValue: '',
datePickerValue: '',
timePickerValue: '',
timeSelectorValue: '',
slotValue: ''
}
};
},
methods: {
getOptions() {
return [
{
id: '1',
displayName: '选项1'
},
{
id: '2',
displayName: '选项2'
}
];
},
onInput(val) {
console.log(val);
},
onChange(val) {
console.log(val);
}
}
};属性
| 参数 | 说明 | 类型 | 是否必须 | |-----------------|--------|--------|------| | items | 配置项 | Array | 是 | | initialFormData | 数据模型 | Object | 是 | | config | 筛选表单配置 | Object | 否 |
items[] Options
| 参数 | 说明 | 类型 | 是否必须 | 默认值 |
|-------------|------------------------------------------|----------------|-------------------------|------|
| visible | 当前项是否显示 | Boolean | 否 | true |
| type | 类型，请引用SWFilterFormValues.itemType中的枚举值 | Array | 是 | - |
| title | 标题 | String | 是 | - |
| prop | 属性名称 | String | 是 | - |
| contentSpan | 当前项占据的跨度，将自动计算为单元宽度的倍数 | Number | 否 | 1 |
| options | 选择器选项配置 | Function/Array | 否，当type为selector时必填 | [] |
| labelKey | 选择器显示文本对应数据源中的key | String | 否，当type为selector时必填 | - |
| valueKey | 选择器选中值对应数据源中的key | String | 否，当type为selector时必填 | - |
| slotName | 插槽名称 | String | 否，当type为slot时必填 | - |
| on | 各组件的事件扩展，请参考Element-UI组件库 | Object | 否 | - |
| bind | 各组件的属性扩展，请参考Element-UI组件库 | Object | 否 | - |
SWFilterFormValues.itemType
| key | value | 描述 | |--------------|---------------|-----------| | input | input | 输入框 | | selector | selector | 选择器 | | datePicker | date-picker | 日期选择器 | | timePicker | time-picker | 任意时间选择器 | | timeSelector | time-selector | 固定实现选择器 | | slot | slot | 插槽，自定义筛选项 |
config Options
| 参数 | 说明 | 类型 | 默认值 | |------------------|----------|--------|-----------| | titleMarginLeft | 标题左边距 | Number | 5 | | titleMarginRight | 标题右边距 | Number | 5 | | titleFontSize | 标题字体大小 | Number | 14 | | titleTextColor | 标题字体颜色 | String | '#424242' | | itemWidth | 每一项的单元宽度 | Number | 200 |
BasicTable
基础表格组件，通过配置快速生成基础表格。
使用示例
- template
<sw-basic-table ref="table" :items="tableColumnItems" :data="tableDataSource">
<template #index="{row}">
{{ row + 1 }}
</template>
<template #date="{data}">
{{ data.date }}
</template>
<template #name="{data}">
{{ data.name }}
</template>
<template #province="{data}">
{{ data.province }}
</template>
<template #city="{data}">
{{ data.city }}
</template>
<template #address="{data}">
{{ data.address }}
</template>
<template #zip="{data}">
{{ data.zip }}
</template>
<template #operate="{data}">
{{ data.name }}
</template>
<template #custom-header="{column}">
这是自定义表头的使用示例，第{{ column }}列
</template>
<template #expand="{data}">
这是展开表格每一行的插槽使用示例，当前行的原始数据：{{ data }}
</template>
<template #append>
这是append插槽的使用示例
</template>
</sw-basic-table>- js
export default {
name: 'Index',
data() {
return {
tableColumnItems: [
{
bind: {
type: 'expand'
}
},
{
bind: {
type: 'selection'
}
},
{
title: '排序',
slotName: 'index'
},
{
title: '日期',
slotName: 'date'
},
{
title: '姓名',
slotName: 'name'
},
{
title: '省份',
slotName: 'province'
},
{
title: '市区',
slotName: 'city'
},
{
title: '地址',
slotName: 'address'
},
{
title: '邮编',
slotName: 'zip'
},
{
title: '操作',
slotName: 'operate',
headerSlotName: 'custom-header'
}
],
tableDataSource: [
{
date: '2016-05-03',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-02',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-04',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-01',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-08',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-06',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}, {
date: '2016-05-07',
name: '王小虎',
province: '上海',
city: '普陀区',
address: '上海市普陀区金沙江路 1518 弄',
zip: 200333
}
]
};
},
mounted() {
this.$refs.table.toggleAllSelection();
}
};属性
| 参数 | 说明 | 类型 | 是否必须 | 默认值 | 描述 | |--------|---------|--------|------|-----|----| | items | 表格列的配置项 | Array | 是 | - | - | | config | 配置 | Object | 否 | - | - |
其他扩展配置项请参考：https://element.eleme.io/#/zh-CN/component/table#table-attributes
items[] Options
| 参数 | 说明 | 类型 | 是否必须 | 默认值 | |----------------|------------------------------------------------------------------------------------|--------|------|-----| | title | 当前列的标题 | String | 是 | - | | slotName | 当前列的具名插槽名称 | String | 是 | - | | headerSlotName | 当前列自定义表头的插槽名称 | String | 否 | - | | bind | 列的扩展属性，请参考https://element.eleme.io/#/zh-CN/component/table#table-column-attributes | Object | 否 | - |
config Options
| 参数 | 说明 | 类型 | 默认值 |
|--------------------|---------------------------------------------------------|--------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| columnAdaptiveType | 列的自适应类型，请引用SWBasicTableValues.columnAdaptiveType中的枚举值 | String | 设置该属性为none时，浏览器缩放时会导致标题换行，因此提供了根据标题自适应title-adaptive和最长标题自适应longest-title-adaptive两种方式，处理标题自动换行的问题。可根据表格实际展示内容自行调整自适应方式。如果需要自定义表头，请自行设置min-width属性进行覆盖。 |
SWBasicTableValues.columnAdaptiveType
| key | value | 描述 | |----------------------|------------------------|---------| | none | none | 输入框 | | titleAdaptive | title-adaptive | 标题自适应 | | longestTitleAdaptive | longest-title-adaptive | 最长标题自适应 |
其他说明
- 内置
append具名插槽，用于在表格末尾追加内容； - 内置
expand具名插槽，用于插入展开每一行的内容，需要指定当前行的bind.type为expand，并实现expand具名插槽。 TableMethods，请参考：https://element.eleme.io/#/zh-CN/component/table#table-methods
BasicDialog
基础对话框组件。
使用示例
- template
<el-button @click="openDialog">打开对话框</el-button>
<sw-basic-dialog
ref="dialog"
:config="{
center:isCenter
}"
@confirm="onConfirm"
@cancel="onCancel"
>
<span>对话框内容</span>
<el-button @click="isCenter = !isCenter">切换</el-button>
</sw-basic-dialog>- js
export default {
name: 'Index',
data() {
return {
isCenter: true
};
},
methods: {
// 打开对话框
openDialog() {
this.$refs.dialog.openDialog({ title: '对话框' });
},
// 确认
onConfirm(cb) {
cb(true);
setTimeout(() => {
cb(false);
this.$refs.dialog.closeDialog();
}, 3000);
},
onCancel() {
console.log('取消');
}
}
};属性
| 参数 | 说明 | 类型 | 是否必须 | 默认值 | 描述 | |--------|---------|--------|------|-----|----| | config | 对话框的配置项 | Object | 否 | - | - |
config Options
| 参数 | 说明 | 类型 | 默认值 | |-------------------|----------|---------|-----------------| | center | 是否居中显示内容 | Boolean | true | | reverseBtn | 是否反转按钮排列 | Boolean | false，确认在前，取消在后 | | cancelBtnTitle | 取消按钮的标题 | String | 取消 | | confirmBtnTitle | 确认按钮的标题 | String | 确认 | | cancelBtnVisible | 取消按钮是否显示 | Boolean | true | | confirmBtnVisible | 确认按钮是否显示 | Boolean | true |
事件
| 事件名称 | 说明 | 回调参数 | |---------|---------|---------------------------------------------------| | confirm | 点击确认的回调 | 函数callback，传入参数true，确认按钮进入loading状态，否则关闭loading状态 | | cancel | 点击取消的回调 | - |
方法
| 方法名称 | 说明 | 参数 | |-------------|-------|--------------------| | openDialog | 打开对话框 | Object.title，对话框标题 | | closeDialog | 关闭对话框 | - |
DataForm
数据表单组件，通过配置快速生成数据表单。
使用示例
- template
<sw-data-form ref="dataForm" :items="formDataItems" :initial-form-data="formData" :rules="rules">
<template #slot="{data,prop}">
<el-input v-model="data[prop]" />
</template>
<template #dynamic-list-header>
<div class="dynamic-list-header">这是动态表单的头部</div>
</template>
<template #dynamic-list-item="{data,prop,index}">
<el-form-item
:prop="`${prop}.${index}.name`"
label-width="0"
:rules="[{ required: true, message: '请输入插槽内容', trigger: ['blur', 'change'] }]"
>
<el-input v-model="data[prop][index].name" />
</el-form-item>
</template>
</sw-data-form>
<el-button @click="validate">校验</el-button>- js
import { SWDataFormValues } from 'sw-element';
export default {
name: 'Index',
data() {
return {
formData: {
inputValue: '',
numberInputValue: undefined,
textareaValue: '',
selectorValue: [],
datePickerValue: '',
timePickerValue: '',
timeSelectorValue: '',
checkboxValue: [],
radioValue: '',
switchValue: '1',
textValue: '这是文本内容',
dynamicList: [],
slotValue: ''
},
rules: {
inputValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }],
numberInputValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }],
textareaValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }],
selectorValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
datePickerValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
timePickerValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
timeSelectorValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
checkboxValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
radioValue: [{ required: true, message: '请选择内容', trigger: ['blur', 'change'] }],
slotValue: [{ required: true, message: '请输入内容', trigger: ['blur', 'change'] }]
},
formDataItems: [
{
type: SWDataFormValues.itemType.input,
title: '输入框',
prop: 'inputValue',
required: true,
tooltip: '这是一个消息提示'
},
{
type: SWDataFormValues.itemType.numberInput,
title: '数字输入框',
prop: 'numberInputValue',
required: true,
tooltip: '这是一个消息提示'
},
{
type: SWDataFormValues.itemType.textarea,
title: '文本域',
prop: 'textareaValue',
required: true,
isSingleRow: true
},
{
type: SWDataFormValues.itemType.selector,
title: '选择器',
prop: 'selectorValue',
required: true,
labelKey: 'displayName',
valueKey: 'id',
isSingleRow: true,
bind: {
multiple: true
},
options: [
{
id: 1,
displayName: '选项1'
},
{
id: 2,
displayName: '选项2'
},
{
id: 3,
displayName: '选项3'
}
]
},
{
type: SWDataFormValues.itemType.datePicker,
title: '时间选择器',
prop: 'datePickerValue',
required: true
},
{
type: SWDataFormValues.itemType.timePicker,
title: '任意时间选择器',
prop: 'timePickerValue',
tooltip: '这是一个消息提示'
},
{
type: SWDataFormValues.itemType.timeSelector,
title: '固定选择器',
prop: 'timeSelectorValue',
required: true
},
{
type: SWDataFormValues.itemType.checkbox,
title: '复选框',
prop: 'checkboxValue',
required: true,
labelKey: 'displayName',
valueKey: 'id',
isSingleRow: true,
bind: {
min: 1,
max: 2
},
options: [
{
id: 1,
displayName: '选项1'
},
{
id: 2,
displayName: '选项2',
bind: {
disabled: true
}
},
{
id: 3,
displayName: '选项3'
},
{
id: 4,
displayName: '选项4'
}
]
},
{
type: SWDataFormValues.itemType.radio,
title: '单选框',
prop: 'radioValue',
required: true,
labelKey: 'displayName',
valueKey: 'id',
isSingleRow: true,
options: [
{
id: 1,
displayName: '选项1'
},
{
id: 2,
displayName: '选项2'
},
{
id: 3,
displayName: '选项3'
},
{
id: 4,
displayName: '选项4'
},
{
id: 5,
displayName: '选项5'
},
{
id: 6,
displayName: '选项6'
}
]
},
{
type: SWDataFormValues.itemType.switch,
title: '开关',
prop: 'switchValue',
required: true,
bind: {
'active-value': '1',
'inactive-value': '2'
}
},
{
type: SWDataFormValues.itemType.text,
title: '文本',
prop: 'textValue',
required: true,
isSingleRow: true
},
{
type: SWDataFormValues.itemType.dynamicList,
title: '动态表单',
prop: 'dynamicList',
headerSlotName: 'dynamic-list-header',
slotName: 'dynamic-list-item',
isSingleRow: true,
required: true
},
{
type: SWDataFormValues.itemType.slot,
title: '插槽',
prop: 'slotValue',
required: true,
slotName: 'slot',
isSingleRow: true
}
]
};
},
methods: {
async validate() {
await this.$refs.dataForm.validate();
}
}
};属性
| 参数 | 说明 | 类型 | 是否必须 | |-----------------|--------|--------|------| | items | 配置项 | Array | 是 | | initialFormData | 数据模型 | Object | 是 | | config | 动态表单配置 | Object | 否 |
其他扩展配置项请参考：https://element.eleme.io/#/zh-CN/component/form#form-attributes
items[] Options
| 参数 | 说明 | 类型 | 是否必须 | 默认值 |
|----------------|----------------------------------------|----------------|--------------------------------------------|-------|
| visible | 当前项是否显示 | Boolean | 否 | true |
| type | 类型，请引用SWDataFormValues.itemType中的枚举值 | Array | 是 | - |
| title | 标题 | String | 是 | - |
| prop | 属性名称 | String | 是 | - |
| tooltip | 提示文本 | String | 否 | - |
| required | 是否显示红色*号，注意，此属性不作必填的校验依据 | Boolean | 否 | false |
| isSingleRow | 当前配置项是否独占一行 | Boolean | 否 | false |
| options | 选择器选项配置 | Function/Array | 否，当type为selector或checkbox或radio时必填 | [] |
| labelKey | 选择器显示文本对应数据源中的key | String | 否，当type为selector或checkbox或radio时必填 | - |
| valueKey | 选择器选中值对应数据源中的key | String | 否，当type为selector或checkbox或radio时必填 | - |
| slotName | 插槽名称 | String | 否，当type为slot或dynamicList时必填 | - |
| headerSlotName | 动态列表表头插槽名称 | String | 否 | - |
| on | 各组件的事件扩展，请参考Element-UI组件库 | Object | 否 | - |
| bind | 各组件的属性扩展，请参考Element-UI组件库 | Object | 否 | - |
SWDataFormValues.itemType
| key | value | 描述 | |--------------|---------------|-----------| | input | input | 输入框 | | numberInput | number-input | 计数器 | | textarea | textarea | 输入框 | | selector | selector | 选择器 | | datePicker | date-picker | 日期选择器 | | timePicker | time-picker | 任意时间选择器 | | timeSelector | time-selector | 固定实现选择器 | | checkbox | checkbox | 复选框 | | radio | radio | 单选框 | | switch | switch | 开关 | | text | text | 文本 | | dynamicList | dynamic-list | 动态列表 | | slot | slot | 插槽，自定义表单项 |
config Options
| 参数 | 说明 | 类型 | 默认值 | |-------------------|------------|---------|-------| | dynamicListIsOpen | 动态列表是否默认展开 | Boolean | false | | numberOfColumn | 标题右边距 | Number | 2 |
方法
| 方法名称 | 说明 | 参数 | 返回值 | |---------------|---------------|-----------------------------------------|-------------------------------------------| | validate | 校验表单 | - | 返回一个Promise，成功resolve，校验失败自动提示异常消息并reject | | resetValues | 重设指定属性的值和校验状态 | props，表单项对应的prop集合，会清空props中对应属性的值和校验状态 | - | | clearValidate | 重设表单的校验状态 | - | - |
其他说明
- 当
type为dynamicList时，如果required为true，则会为动态列表自动创建一条数据，且当动态列表只有一条数据时，该数据不可删除。 - 当
type为dynamicList时，绑定的数据模型会自动增加一个__key的属性用来做必要的业务处理，请在接收数据后根据业务需求自行过滤该属性。
DraggableBoard
可拖拽表单。
使用示例
- template
<sw-draggable-board ref="dragBoard" group-name="groupName" :initial-data-source="draggableBoardDataSource" @move="onMove">
<template v-slot="{data}">{{ data.label }}</template>
</sw-draggable-board>
<el-button @click="getDragResult">获取拖拽结果</el-button>- js
export default {
name: 'Index',
data() {
return {
draggableBoardDataSource: [
{
title: '列表1',
uniqueKey: 'id',
list: [
{
id: 1,
label: 'item1'
},
{
id: 2,
label: 'item2'
},
{
id: 3,
label: 'item3'
},
{
id: 4,
label: 'item4'
}
]
},
{
title: '列表2',
uniqueKey: 'id',
list: [
{
id: 5,
label: 'item5'
},
{
id: 6,
label: 'item6'
},
{
id: 7,
label: 'item7'
},
{
id: 8,
label: 'item8'
}]
},
{
title: '列表3',
uniqueKey: 'id',
list: [
{
id: 9,
label: 'item9'
},
{
id: 10,
label: 'item10'
},
{
id: 11,
label: 'item11'
},
{
id: 12,
label: 'item12'
}
]
}
]
};
},
methods: {
onMove(result){
console.log(result)
},
getDragResult() {
const result = this.$refs.dragBoard.getDataSource();
console.log(result);
}
}
};属性
| 参数 | 说明 | 类型 | 是否必须 | |-------------------|----------------|--------|------| | initialDataSource | 初始数据源 | Array | 否 | | groupName | 组名，同一组的元素可互相拖拽 | String | 是 |
initialDataSource[] Options
| 参数 | 说明 | 类型 | 是否必须 | |-----------|---------------|--------|------| | title | 当前列的标题 | String | 是 | | uniqueKey | 数据源中标识唯一性的key | String | 是 | | list | 列表数据源 | Array | 是 |
事件
| 事件名称 | 说明 | 回调参数 | |--------|-----------------|------| | move | 列表项拖拽的回调，返回拖拽结果 | - |
方法
| 方法名称 | 说明 | 返回值 | |---------------|-----------|--------| | getDataSource | 获取拖拽后的数据源 | 返回拖拽结果 |