huige-element-plus

辉哥扩展的element-plus组件库，用于项目快速开发。
该扩展基于ElementPlus 组件库，使用前先保证已成功安装ElementPlus组件库。

组件列表

• HSplitH 横向分割组件
• HSplitV 纵向分割组件
• HBase64Img Base64 图片器
• HLayout 布局组件（上、左、右）
• HIcon 图标
• HIconPicker 图标选择器

安装

NPM:

npm install huige-element-plus --save

YARN:

yarn add huige-element-plus

PNPM:

pnpm install huige-element-plus

快速开始

import 'element-plus/dist/index.css'
import 'huige-element-plus/dist/huige-element-plus.css'
import ElementPlus from 'element-plus'
import HuigeElementPlus from 'huige-element-plus'

const app = createApp(App)
app.use(ElementPlus)
app.use(HuigeElementPlus)
app.mount('#app')

使用示例

<script setup>
import { ref } from 'vue'
const show = ref(false)
const img = ref(null)
const width = ref('300px')
const bottomHeight = ref(500)
</script>

<template>
  <h-split-v :bottom-height="bottomHeight">
    <template #top>
      <h-split-h v-model:handlerShow="show">
        <template #left> {{ width }} </template>
        <template #right> {{ img }} </template>
      </h-split-h>
    </template>
    <template #bottom>
      <h-base64-img v-model="img" :width="width" preview></h-base64-img>
    </template>
  </h-split-v>
</template>

组件说明

HSplitH

左右分割组件，支持左右拖拽，支持快速收缩。
支持收缩图标插槽，支持自定义图标。

| 属性名 | 说明 | 类型 | 默认值 | | ---------------------- | ---------------- | ------- | ------ | | v-model:leftWidth | 左侧区域宽度 | Number | 200 | | v-model:collapsedWidth | 左侧收缩后宽度 | Number | 0 | | v-model:collapsed | 收缩状态 | Boolean | false | | v-model:handlerWidth | 拖拽栏宽度 | Number | 3 | | v-model:handlerShow | 是否展示折叠箭头 | Boolean | false | | left | 左侧部分插槽 | Slot | - | | right | 右侧部分插槽 | Slot | - | | collapsed-icon | 收缩后的图标插槽 | Slot | - | | expanded-icon | 展开后的图标插槽 | Slot | - |

<script setup>
import { ref } from 'vue'
</script>

<template>
  <h-split-h v-model:handlerShow="show">
    <template #left> 左侧信息</template>
    <template #right>右侧信息</template>
  </h-split-h>
</template>

HSplitV

上下分割组件，支持上下拖拽。

| 属性名 | 说明 | 类型 | 默认值 | | --------------------- | ---------------------------------------------- | ------ | ------ | | v-model:bottomHeight | 底部区域大小，顶部区域大小根据底部区域自动计算 | Number | 200 | | v-model:handlerHeight | 拖拽栏高度 | Number | 3 | | top | 上面部分插槽 | Slot | - | | bottom | 下面部分插槽 | Slot | - |

<script setup>
import { ref } from 'vue'
</script>

<template>
  <h-split-v v-model:handlerShow="show">
    <template #top> 上面信息</template>
    <template #bottom>下面信息</template>
  </h-split-v>
</template>

HListLayout

列表页布局，分为上、中、下三部分，常用于表格列表页。
上：查询条件，中：表格，下：分页列表
上下高度根据内容自适应，中间高度根据上下两部分自适应。

注意：使用时最好设置父组件的高度

<script setup>
</script>

<template>
  <div style="width: 100%; height: 100%">
    <h-list-layout>
      <template #header>
        <div style="background-color: beige">我是头部</div>
      </template>
      <template #main>
        <div style="background-color: burlywood; width: 100%; height: 100%">我是中间</div>
      </template>
      <template #footer>
        <div style="background-color: beige">我是底部</div>
      </template>
    </h-list-layout>
  </div>
</template>

HLayout

布局管理器，主要用户主页菜单布局结构，分为上、左、右、下四部分，支持左右拖拽。参考下图

| 属性名 | 说明 | 类型 | 默认值 | | ---------------------- | ---------------- | ------- | ------ | | v-model:headerHeight | 顶部高度 | Number | 50 | | v-model:footerHeight | 底部高度 | Number | 20 | | v-model:leftWidth | 左侧区域宽度 | Number | 200 | | v-model:collapsedWidth | 左侧收缩后宽度 | Number | 0 | | v-model:collapsed | 收缩状态 | Boolean | false | | v-model:handlerWidth | 拖拽栏宽度 | Number | 3 | | v-model:handlerShow | 是否展示折叠箭头 | Boolean | true |

<script setup></script>

<template>
  <h-layout>
    <template #header>我是头部</template>
    <template #left>我是左侧</template>
    <template #right>我是右侧</template>
    <template #footer>我是底部</template>
  </h-layout>
</template>

HBase64Img

| 属性名 | 说明 | 类型 | 默认值 | | --------------------- | ------------------------ | ------- | ------ | | model-value / v-model | 绑定值（图片 base64 值） | String | — | | width | 宽度 | String | 200px | | height | 高度 | String | 200px | | preview | 开启预览 | Boolean | true |

<script setup>
import { ref } from 'vue'
const base64Img = ref(null)
</script>

<template>
  <div>
    <el-input v-model="base64Img" type="textarea" :rows="5"></el-input>
    <h-base64-img v-model="base64Img"></h-base64-img>
  </div>
</template>

HIcon

图标组件，内置了图标库，所有图标类型可以通过 proxy.$hkIcons 获取到。

| 属性名 | 说明 | 类型 | 默认值 | | ------ | -------- | ------ | ------ | | type | 图标类型 | String | — |

<script setup>
</script>

<template>
   <div>
    <h-icon type="italic"></h-icon>
    <h-icon type="times-circle"></h-icon>
  </div>
</template>

HIconPicker

图标选择组件，通过下拉框选择图标。

| 属性名 | 说明 | 类型 | 默认值 | | --------------------- | ---------- | ------ | ------ | | model-value / v-model | 绑定图标值 | String | — |

<script setup>
import { ref } from 'vue'
const iconStr = ref(null)
</script>

<template>
  <div style="width: 300px">
    <h-icon-picker v-model="iconStr"></h-icon-picker>
  </div>
</template>