HFLVElementPlus组件库介绍

基于 Element Plus 组件库进行二次封装，专为特定编辑器环境优化，支持数据绑定与可视化配置。

安装&注册

bash

npm install hflv-elementplus

main中全局注册

javascript

import HflElementComp from 'hflv-elementplus'

app.use(HflElementComp)

其包含的组件有

组件	说明
EButton	按钮
ECheckbox	勾选框
ECheckboxGroup	多选框
EColorPicker	颜色拾取器
EDatePicker	日期选择器
EDateRangePicker	日期跨度选择器
EInput	输入框
ERadio	单选按钮
ESelect	下拉选择器
ESwitch	开关选择器
ETable	表格
ETree	树形控件
Segmented	分段控制器
EPagination	分页组件

配置说明

提示：配置中的图标需根据项目实际情况进行配置，属性初始值可根据需要自行调整，但 component 属性值不可修改。

EButton(按钮)

json

{
  "component": "EButton",
  "label": "按钮",
  "icon": "svgbutton2",
  "propValue": {
    "type": "default",
    "plain": false,
    "text": false,
    "bg": false,
    "link": false,
    "round": false,
    "circle": false,
    "loading": false,
    "disabled": false,
    "autoInsertSpace": false,
    "dark": false,
    "color": "",
    "textColor": "",
    "icon": "",
    "loadingIcon": "",
    "verticalText": false,
    "customFont": false,
    "fontSize": 12,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "svgIcon": "",
    "contextText": "按钮",
    "tipText": "",
    "contextTextCK": "",
    "disabledCK": ""
  },
  "style": {
    "width": 120,
    "height": 30
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "onMouseClick"
  ]
}

ECheckbox(勾选框)

json

{
  "component": "ECheckbox",
  "label": "单勾选框",
  "icon": "svgcheckbox",
  "propValue": {
    "disabled": false,
    "border": false,
    "size": "default",
    "custom": false,
    "fontSize": 12,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "label": "选项",
    "checked": false,
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue"
  ],
  "style": {
    "width": 300,
    "height": 50
  }
}

ECheckboxGroup(多选框)

json

{
  "component": "ECheckboxGroup",
  "label": "多选框",
  "icon": "svgcheckbox2",
  "propValue": {
    "disabled": false,
    "border": false,
    "size": "default",
    "custom": false,
    "fontSize": 12,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "staticData": true,
    "items": [
      {
        "value": "val1",
        "label": "选项1"
      },
      {
        "value": "val2",
        "label": "选项2"
      }
    ],
    "dsCacheKey": "",
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue"
  ],
  "style": {
    "width": 300,
    "height": 50
  }
}

EColorPicker(颜色拾取器)

json

{
  "events": {},
  "component": "EColorPicker",
  "label": "取色器",
  "icon": "svgwenben2",
  "propValue": {
    "showAlpha": false,
    "predefine": [],
    "size": "default",
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue"
  ],
  "style": {
    "width": 50,
    "height": 30
  }
}

EDatePicker(日期选择器)

json

{
  "component": "EDatePicker",
  "label": "日期选择",
  "icon": "svgdate",
  "propValue": {
    "disabled": false,
    "readonly": false,
    "editable": true,
    "clearable": true,
    "placeholder": "选择日期",
    "type": "date",
    "defaultValue": "",
    "format": "",
    "valueFormat": "",
    "disabledDate": "",
    "shortcuts": [],
    "custom": false,
    "size": "default",
    "fontSize": 14,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "prefixIcon": "",
    "clearIcon": "",
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue",
    "bindRefreshTrigger",
    "delayTrigger"
  ],
  "style": {
    "width": 230,
    "height": 34
  }
}

EDateRangePicker(日期跨度选择器)

json

{
  "component": "EDateRangePicker",
  "label": "日期范围",
  "icon": "svgdate-range",
  "propValue": {
    "disabled": false,
    "readonly": false,
    "editable": true,
    "clearable": true,
    "startPlaceholder": "选择开始日期",
    "endPlaceholder": "选择结束日期",
    "rangeSeparator": "-",
    "type": "daterange",
    "defaultValue": "",
    "defaultTime": "",
    "format": "",
    "valueFormat": "",
    "disabledDate": "",
    "shortcuts": [],
    "custom": false,
    "size": "default",
    "fontSize": 14,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "prefixIcon": "",
    "clearIcon": "",
    "fromCacheKey": "",
    "fromCacheKey2": "",
    "toCacheKey": "",
    "toCacheKey2": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue",
    "bindRefreshTrigger"
  ],
  "style": {
    "width": 355,
    "height": 41
  }
}

EInput(输入框)

json

{
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue"
  ],
  "component": "EInput",
  "label": "输入框",
  "icon": "svginput2",
  "propValue": {
    "type": "text",
    "disabled": false,
    "placeholder": "",
    "clearable": false,
    "showPassword": false,
    "prefixIcon": "",
    "suffixIcon": "",
    "rows": 2,
    "showWordLimit": false,
    "minlength": 0,
    "maxlength": 255,
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "style": {
    "width": 100,
    "height": 30
  }
}

ERadio(单选按钮)

json

{
  "component": "ERadio",
  "label": "单选框",
  "icon": "svgradio",
  "propValue": {
    "disabled": false,
    "border": false,
    "size": "default",
    "custom": false,
    "fontSize": 12,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "staticData": true,
    "items": [
      {
        "value": "val1",
        "label": "选项1"
      },
      {
        "value": "val2",
        "label": "选项2"
      }
    ],
    "dsCacheKey": "",
    "defaultValue": "",
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue"
  ],
  "style": {
    "width": 300,
    "height": 50
  }
}

ESelect(下拉选择器)

json

{
  "component": "ESelect",
  "label": "Select选择器",
  "icon": "svgcombobox",
  "propValue": {
    "disabled": false,
    "multiple": false,
    "size": "default",
    "custom": false,
    "fontSize": 12,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "staticData": true,
    "items": [
      {
        "value": "val1",
        "label": "选项1"
      },
      {
        "value": "val2",
        "label": "选项2"
      }
    ],
    "dsCacheKey": "",
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue",
    "timerTrigger",
    "bindRefreshTrigger"
  ],
  "style": {
    "width": 200,
    "height": 40
  }
}

ESwitch(开关选择器)

json

{
  "component": "ESwitch",
  "label": "Switch开关",
  "icon": "svgswitch",
  "propValue": {
    "onColor": "",
    "offColor": "",
    "borderColor": "",
    "activeText": "",
    "inactiveText": "",
    "disabled": false,
    "inlinePrompt": false,
    "custom": false,
    "type": "default",
    "fontSize": 12,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "fromCacheKey": "",
    "toCacheKey": "",
    "disabledCK": false
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue"
  ],
  "style": {
    "width": 100,
    "height": 30
  }
}

ETable(表格)

json

{
  "component": "ETable",
  "label": "表格",
  "icon": "svgtable2",
  "propValue": {
    "disabled": false,
    "stripe": false,
    "border": false,
    "height": 0,
    "maxHeight": 0,
    "highlightCurrentRow": false,
    "selection": false,
    "selWidth": 55,
    "hasIndex": false,
    "indexWidth": 50,
    "size": "default",
    "fit": true,
    "showHeader": true,
    "currentRowKey": "",
    "emptyText": "",
    "isStaticHeader": true,
    "headerData": [],
    "headerDataFCK": "",
    "colOpts": [
      {
        "prop": "date",
        "label": "Date"
      },
      {
        "prop": "name",
        "label": "Name"
      }
    ],
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted"
  ],
  "style": {
    "width": 500,
    "height": 400
  }
}

ETree(树形控件)

json

{
  "events": {},
  "component": "ETree",
  "label": "树",
  "icon": "svgtree",
  "propValue": {
    "isFilterInput": false,
    "disabled": false,
    "showCheckbox": false,
    "checkStrictly": false,
    "checkOnClickNode": false,
    "checkOnClickLeaf": true,
    "highlightCurrent": false,
    "defaultExpandAll": false,
    "expandOnClickNode": true,
    "autoExpandParent": true,
    "accordion": false,
    "indent": 18,
    "childrenKey": "children",
    "label": "label",
    "isStaticData": true,
    "staticData": [],
    "dataSourceCK": "",
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue"
  ],
  "style": {
    "width": 200,
    "height": 700
  }
}

Segmented(分段控制器)

json

{
  "component": "Segmented",
  "label": "水平分段器",
  "icon": "svgsegment",
  "propValue": {
    "disabled": false,
    "block": false,
    "custom": false,
    "bgColor": "",
    "hoverBgColor": "",
    "hoverColor": "",
    "fontSize": 12,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "disabledColor": "",
    "selectedColor": "",
    "selectedBgColor": "",
    "fontStyle": "",
    "staticData": true,
    "items": [
      {
        "value": "fd1",
        "label": "分段1"
      },
      {
        "value": "fd2",
        "label": "分段2"
      }
    ],
    "dsCacheKey": "",
    "defaultValue": "",
    "fromCacheKey": "",
    "toCacheKey": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue",
    "bindRefreshTrigger",
    "onActivated"
  ],
  "style": {
    "width": 300,
    "height": 60
  }
}

EPagination(分页)

json

{
  "component": "EPagination",
  "label": "分页",
  "icon": "svgpagination",
  "propValue": {
    "disabled": false,
    "background": false,
    "hideOnSinglePage": false,
    "pagerCount": 7,
    "pageSize": [
      20,
      50
    ],
    "prevText": "",
    "prevIcon": "",
    "nextText": "",
    "nextIcon": "",
    "layout": "prev,pager,next,sizes,jumper,->,total",
    "custom": false,
    "size": "default",
    "fontSize": 14,
    "fontColor": "",
    "fontWeight": "",
    "fontFamily": "Arial",
    "fontStyle": "normal",
    "total": 0,
    "countFCK": "",
    "countKey": "",
    "pageIndexTCK": "",
    "pageSizeTCK": ""
  },
  "hasEvents": [
    "onBeforeMount",
    "onMounted",
    "onBeforeUnmount",
    "onUnmounted",
    "changeValue"
  ],
  "style": {
    "width": 400,
    "height": 40
  }
}

HFLVElementPlus组件库介绍 ​

安装&注册 ​

配置说明 ​

EButton(按钮) ​

ECheckbox(勾选框) ​

ECheckboxGroup(多选框) ​

EColorPicker(颜色拾取器) ​

EDatePicker(日期选择器) ​

EDateRangePicker(日期跨度选择器) ​

EInput(输入框) ​

ERadio(单选按钮) ​

ESelect(下拉选择器) ​

ESwitch(开关选择器) ​

ETable(表格) ​

ETree(树形控件) ​

Segmented(分段控制器) ​

EPagination(分页) ​

HFLVElementPlus组件库介绍

安装&注册

配置说明

EButton(按钮)

ECheckbox(勾选框)

ECheckboxGroup(多选框)

EColorPicker(颜色拾取器)

EDatePicker(日期选择器)

EDateRangePicker(日期跨度选择器)

EInput(输入框)

ERadio(单选按钮)

ESelect(下拉选择器)

ESwitch(开关选择器)

ETable(表格)

ETree(树形控件)

Segmented(分段控制器)

EPagination(分页)