Install

npm install hui-plug --save

Main

import HuiPlug from 'hui-plug'

import 'hui-plug/style.css'

app.use(HuiPlug)

Element

<h-button>按钮</h-button>

API

h-button (按钮)

Template

<h-button mode="primary" @click="submit">按钮</h-button>

export default {
  methods: {
    submit() { console.log("您点击了按钮！") }
  }
}

Props

| 名称 | 类型 | 默认值 | 可选项 | 说明 | | :-: | :-: | :-: | :-: | :-: | | mode | String | - | primary,success,warning,info | 样式 | | size | String | mini | mini,medium,small | 大小 | | icon | String | - | - | 图标 | | text | Boolean | false | - | 是否文本状态 | | disabled | Boolean | false | - | 是否禁用 | | loading | Boolean | false | - | 加载状态 | | plain | Boolean | false | - | 是否镂空 |

Methods

| 名称 | 参数 | 返回值 | 说明 | | :---: | :--: | :----: | :--: | | click | - | - | 点击 |

h-input (输入框)

Template

<h-input v-model:value="value" placeholder="输入框" />

Props

| 名称 | 类型 | 默认值 | 可选值 | 说明 | | :---------: | :-------------------: | :----: | :-----: | :----------------------------------------------------: | | type | String | text | 同input | 输入框类型 | | value | String,Number,Boolean | - | - | 绑定值 | | width | String | 100% | - | 输入框宽度 | | placeholder | String | - | - | 占位信息 | | clearable | Boolean | true | - | 清空内容 | | append | String | - | - | 后缀 | | delay | Number | 100 | - | input 事件触发延迟，单位(ms)，input-delay 事件触发 | | showTip | Boolean | true | - | 是否显示输入提示 | | className | String | - | - | 自定义class |

Event

| 名称 | 类型 | 说明 | | :---------: | :------: | :-----------------: | | blur | Function | 失去焦点 | | focus | Function | 获取焦点 | | clear | Function | 清空 | | input | Function | 值改变时 | | change | Function | 值改变后 | | enter | Function | 键盘点击 Enter 键 | | up | Function | 键盘点击 Up 键 | | down | Function | 键盘点击 Down 键 | | input-delay | Function | 值改变时的延迟方法 |

h-radio (单选框组)

Template

<h-radio v-model:value="value" v-model:label="label" :list="list" />

export default {
  data() {
    return {
      value: 4,
      label: '西瓜',
      list: [
        { label: '苹果', value: 1 },
        { label: '橘子', value: 2 },
        { label: '哈密瓜', value: 3 }
      ]
    }
  }
}

Props

| 名称 | 类型 | 默认值 | 可选项 | 说明 | | :------: | :-------------------: | :--------------------------------: | :----: | :---------------------------: | | value | String,Number,Boolean | - | - | 选项值 | | label | String | - | - | 显示值 | | list | Array | [] | - | 单选项 | | options | Object | { label: 'label', value: 'value' } | - | 列表的显示 key 和选中 key | | disabled | Boolean | false | - | 是否禁用 | | button | Boolean | false | - | 是否按钮样式 | | boolean | Boolean | false | - | Boolean 模式 |

Event

| 名称 | 类型 | 说明 | | :----: | :------: | :------: | | change | Function | 值改变后 |

h-checkbox (复选框)

Template

<h-checkbox v-model:value="value" boolean>文本</h-checkbox>

export default {
  data() {
    return {
      value: false
    }
  }
}

Props

| 名称 | 类型 | 默认值 | 可选项 | 说明 | | :-------: | :-------------------------: | :----: | :----: | :----------------: | | value | String,Number,Boolean,Array | - | - | 选项值 | | disabled | Boolean | false | - | 是否禁用 | | checked | String,Number,Boolean | 1 | - | 选中值 | | unChecked | String,Number,Boolean | 0 | - | 非选中值 | | boolean | Boolean | false | - | Boolean 模式开关 | | content | String | - | - | 显示文本 |

h-date (时间选择框)

Template

<h-date v-model:value="value" type="datetime" />

Props

| 名称 | 类型 | 默认值 | 可选项 | 说明 | | :---------: | :----------------------: | :----: | :-----------------------------------: | :----------------------------------------------------: | | value | Date,Number,String,Array | - | - | 选项值 | | type | String | date | date,daterange,datetime,datetimerange | 日期类型 | | start | Date,Number,String | - | - | 起始值 range 模式有效 | | end | Date,Number,String | - | - | 同 start | | disabled | Boolean | false | - | 是否禁用 | | clearable | Boolean | false | - | 是否清空 | | placeholder | String | - | - | 占位文本，range 模式会自动添加‘开始时间’、‘结束时间’ |

h-select (下拉选择框)

Template

<h-select v-model="value" v-model:label="label" :list="list" :keys="keys" />

export default {
  data() {
    return {
      value: 4,
      label: '西瓜',
      list: [
        { label: '苹果', value: 1 },
        { label: '橘子', value: 2 },
        { label: '哈密瓜', value: 3 }
      ],
      keys: {
        label: 'label',
        value: 'value'
      }
    }
  }
}

Props

| 名称 | 类型 | 默认值 | 可选项 | 说明 | | :---------: | :-----------------: | :--------------------------------: | :----: | :-----------------: | | modelValue | Number,String,Array | - | - | 选项值 | | api | Function | - | - | 获取 list 的接口 | | label | String | - | - | 显示值 | | list | Array | [] | - | 下拉列表 | | disabled | Boolean | false | - | 是否禁用 | | clearable | Boolean | false | - | 是否清空 | | placeholder | String | - | - | 占位文本 | | mode | Boolean | false | - | 是否多选 | | keys | Object | { label: 'label', value: 'value' } | - | list 匹配的 key | | create | Boolean | false | - | 是否开启创建模式 |

Event

| 名称 | 类型 | 说明 | | :----: | :------: | :-----------------------------------------: | | change | Function | 值改变后,返回 (e, data) ,选中值和相应对象 |

h-select-table (下拉选择表格)

Template

<h-select-table v-model:value="value" :list="list" :columns="columns" :keys="keys" node="licensePlate" />

export default {
  data() {
    return {
      value: '',
      list: [],
      columns: [
				{ title: '车牌号', field: 'licensePlate' },
				{ title: '司机姓名', field: 'driverName' },
				{ title: '司机手机号', field: 'driverPhone' },
				{ title: '载重(t)', field: 'loadWeight' },
				{ title: '载方(m³)', field: 'loadVolume' }
			],
			keys: [
				{ before: 'driverId', after: 'driverId' },
				{ before: 'driverName', after: 'driverName' },
				{ before: 'driverPhone', after: 'driverPhone' },
				{ before: 'carTypeId', after: 'carTypeId' },
				{ before: 'carTypeName', after: 'carTypeName' },
				{ before: 'carLength', after: 'carLength' },
				{ before: 'loadWeight', after: 'loadWeight' },
				{ before: 'loadVolume', after: 'loadVolume' }
			]
    }
  }
}

Props

| 名称 | 类型 | 默认值 | 可选项 | 说明 | | :------: | :-----------: | :----: | :---------: | :----------------: | | value | String,Object | - | - | 选项值 | | api | Function | - | - | 获取 list 的接口 | | info | String,Object | - | - | 原值 | | list | Array | [] | - | 下拉列表 | | columns | Array | [] | - | 下拉表格的列 | | disabled | Boolean | false | - | 是否禁用 | | mode | String | focus | focus,click | 触发模式 | | node | String | - | - | 标识字段 | | mode | Boolean | false | - | 是否多选 | | keys | Array | [] | - | 前后对应字段 | | create | Boolean | false | - | 是否开启创建模式 |

Event

| 名称 | 类型 | 说明 | | :----: | :------: | :-----------------: | | change | Function | 值改变后,返回选中值 |

Slot

| 名称 | 说明 | | :----: | :----------: | | footer | 表格下方插槽 |

h-table (表格)

Template

<h-table v-model:page-query="pageQuery" v-model:search-query="searchQuery" :search-list="searchList" :list="list" :columns="columns" :total="total" :loading="loading" :menu="menu" />

export default {
  data() {
    return {
      loading: false,
      pageQuery: { pageNum: 1, pageSize: 100 },
      searchList: [],
      total: 0,
      checked: [],
      menu: [],
      list: [],
      columns: [
				{ title: '车牌号', field: 'licensePlate' },
				{ title: '司机姓名', field: 'driverName' },
				{ title: '司机手机号', field: 'driverPhone' },
				{ title: '载重(t)', field: 'loadWeight' },
				{ title: '载方(m³)', field: 'loadVolume' }
			]
    }
  }
}

Props

| 名称 | 类型 | 默认值 | 可选项 | 说明 | | :---------: | :------------: | :--------------------------: | :----: | :---------------------------------: | | height | String,Number | 100% | - | 高度 | | tree | Boolean | false | - | 是否树形表格 | | auto | Boolean | true | - | 是否自动获取数据 | | list | Array | [] | - | 表格数据 | | columns | Array | [] | - | 表格列 | | loading | Boolean | false | - | 加载状态 | | footer | Boolean | false | - | 底部合计栏 | | checked | Array | [] | - | 复选数据 | | rowKey | String | id | - | 数据行，唯一标识 | | toolbar | Boolean | true | - | 表格顶部工具栏 | | footerBar | Boolean | true | - | 底部工具栏 | | isSeq | Boolean | true | - | 是否显示序号 | | isCheck | Boolean | true | - | 是否可以复选 | | pageQuery | Object | { pageNum: 1, pageSize: 10 } | - | 分页信息 | | total | Number,Boolean | 0 | - | 分页总条数，为 false 时隐藏分页器 | | menu | Array | [] | - | 右键菜单 | | search | Boolean | true | - | 是否显示搜索条件 | | searchQuery | Object | {} | - | 搜索条件对象 | | searchList | Array | [] | - | 搜索条件列表 |

Event

| 名称 | 类型 | 说明 | | :-------: | :------: | :--------: | | dblClick | Function | 双击事件 | | cellClick | Function | 单元格点击 |

Methods

| 名称 | 参数 | 返回值 | 说明 | | :------------: | :----------: | :----: | :------------: | | getList | - | - | 加载数据 |

h-dialog (弹窗)

Template

<h-dialog v-model:modal="modal" v-model:loading="loading" title="弹窗标题" body @submit="submit" @reset="reset">弹窗内容</h-dialog>

export default {
  data() {
    return {
      modal: false,
      loading: false
    }
  },
  methods: {
    show() {
      this.modal = true
    },
    submit() {
      console.log('您点击了提交')
    },
    reset() {
      this.loading = false
    }
  }
}

Props

| 名称 | 类型 | 默认值 | 可选项 | 说明 | | :------: | :-----------: | :----: | :----: | :---------------: | | modal | Boolean | false | - | 是否显示 | | title | String | - | - | 标题 | | header | Boolean | true | - | 是否显示标题栏 | | width | String,Number | 50% | - | 弹窗宽度 | | loading | Boolean | false | - | 加载状态 | | mini | Boolean | false | - | 是否小弹窗模式 | | body | Boolean | false | - | 是否添加到 body | | isSubmit | Boolean | true | - | 是否显示提交 | | zIndex | String,Number | - | - | 层级 |

Event

| 名称 | 参数 | 返回值 | 说明 | | :----: | :--: | :----: | :------------: | | submit | - | - | 点击提交 | | reset | - | - | 窗口关闭时调用 |

h-drawer (抽屉)

Template

<h-drawer v-model:modal="modal" v-model:loading="loading" title="抽屉标题" @submit="submit" @reset="reset">抽屉内容</h-drawer>

export default {
  data() {
    return {
      modal: false,
      loading: false
    }
  },
  methods: {
    show() {
      this.modal = true
    },
    submit() {
      console.log('您点击了提交')
    },
    reset() {
      this.loading = false
    }
  }
}

Props

| 名称 | 类型 | 默认值 | 可选项 | 说明 | | :--------: | :-----------: | :----: | :----: | :---------------: | | modal | Boolean | false | - | 是否显示 | | title | String | - | - | 标题 | | header | Boolean | true | - | 是否显示标题栏 | | width | String,Number | 60% | - | 弹窗宽度 | | loading | Boolean | false | - | 加载状态 | | mini | Boolean | false | - | 是否小弹窗模式 | | body | Boolean | false | - | 是否添加到 body | | isSubmit | Boolean | true | - | 是否显示提交 | | submitText | String | 提交 | - | 确认按钮文本 | | zIndex | String,Number | - | - | 层级 |

Event

| 名称 | 参数 | 返回值 | 说明 | | :----: | :--: | :----: | :------------: | | submit | - | - | 点击提交 | | reset | - | - | 窗口关闭时调用 |