1.1.4 • Published 4 months ago

sw-element v1.1.4

Weekly downloads
-
License
MIT
Repository
-
Last release
4 months ago

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选择器显示文本对应数据源中的keyString否，当type为selector时必填-
valueKey选择器选中值对应数据源中的keyString否，当type为selector时必填-
slotName插槽名称String否，当type为slot时必填-
on各组件的事件扩展，请参考Element-UI组件库Object否-
bind各组件的属性扩展，请参考Element-UI组件库Object否-
SWFilterFormValues.itemType
keyvalue描述
inputinput输入框
selectorselector选择器
datePickerdate-picker日期选择器
timePickertime-picker任意时间选择器
timeSelectortime-selector固定实现选择器
slotslot插槽，自定义筛选项
config Options
参数说明类型默认值
titleMarginLeft标题左边距Number5
titleMarginRight标题右边距Number5
titleFontSize标题字体大小Number14
titleTextColor标题字体颜色String'#424242'
itemWidth每一项的单元宽度Number200

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-attributesObject否-
config Options
参数说明类型默认值
columnAdaptiveType列的自适应类型，请引用SWBasicTableValues.columnAdaptiveType中的枚举值String设置该属性为none时，浏览器缩放时会导致标题换行，因此提供了根据标题自适应title-adaptive和最长标题自适应longest-title-adaptive两种方式，处理标题自动换行的问题。可根据表格实际展示内容自行调整自适应方式。如果需要自定义表头，请自行设置min-width属性进行覆盖。
SWBasicTableValues.columnAdaptiveType
keyvalue描述
nonenone输入框
titleAdaptivetitle-adaptive标题自适应
longestTitleAdaptivelongest-title-adaptive最长标题自适应

其他说明

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是否居中显示内容Booleantrue
reverseBtn是否反转按钮排列Booleanfalse，确认在前，取消在后
cancelBtnTitle取消按钮的标题String取消
confirmBtnTitle确认按钮的标题String确认
cancelBtnVisible取消按钮是否显示Booleantrue
confirmBtnVisible确认按钮是否显示Booleantrue

事件

事件名称说明回调参数
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选择器显示文本对应数据源中的keyString否，当type为selector或checkbox或radio时必填-
valueKey选择器选中值对应数据源中的keyString否，当type为selector或checkbox或radio时必填-
slotName插槽名称String否，当type为slot或dynamicList时必填-
headerSlotName动态列表表头插槽名称String否-
on各组件的事件扩展，请参考Element-UI组件库Object否-
bind各组件的属性扩展，请参考Element-UI组件库Object否-
SWDataFormValues.itemType
keyvalue描述
inputinput输入框
numberInputnumber-input计数器
textareatextarea输入框
selectorselector选择器
datePickerdate-picker日期选择器
timePickertime-picker任意时间选择器
timeSelectortime-selector固定实现选择器
checkboxcheckbox复选框
radioradio单选框
switchswitch开关
texttext文本
dynamicListdynamic-list动态列表
slotslot插槽，自定义表单项
config Options
参数说明类型默认值
dynamicListIsOpen动态列表是否默认展开Booleanfalse
numberOfColumn标题右边距Number2

方法

方法名称说明参数返回值
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数据源中标识唯一性的keyString是
list列表数据源Array是

事件

事件名称说明回调参数
move列表项拖拽的回调，返回拖拽结果-

方法

方法名称说明返回值
getDataSource获取拖拽后的数据源返回拖拽结果
element-uinode-sassshelljsvuevue-template-compilervuedraggable
@everything-registry/sub-chunk-2859
1.1.4

4 months ago

1.1.1

6 months ago

1.1.3

5 months ago

1.1.2

6 months ago

1.1.0

7 months ago

1.0.9

7 months ago

1.0.8

10 months ago

1.0.7

10 months ago

1.0.6

11 months ago

1.0.5

11 months ago

1.0.4

11 months ago

1.0.3

12 months ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago