hui-plug

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

Methods

h-input (输入框)

Template

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

Props

Event

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

Event

h-checkbox (复选框)

Template

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

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

Props

h-date (时间选择框)

Template

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

Props

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

Event

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

Event

Slot

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

Event

Methods

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

Event

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

Event