element-plus-huige

**本组件停止维护，转向新组件库：  
https://www.npmjs.com/package/huige-element-plus

功能完全兼容。**

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

组件列表

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

安装

NPM:

npm install element-plus-huige --save

YARN:

yarn add element-plus-huige

PNPM:

pnpm install element-plus-huige

快速开始

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

const app = createApp(App)
app.use(ElementPlus)
app.use(ElementPlusHuige)
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 |

新增图标插槽，支持自定义图标。

<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>
        <template #collapsed-icon>
          //收缩后折叠箭头图标
        </template>
        <template #expanded-icon>
          //展开后折叠箭头图标
        </template>
      </h-split-h>
    </template>
    <template #bottom>
      <h-base64-img v-model="img" :width="width" preview></h-base64-img>
    </template>
  </h-split-v>
</template>

HSplitV

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

HBase64Img

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

HListLayout

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

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

<script setup>
</script>

<template>
  <div style="width:100%;height:100%">
    <h-list-layout>
      <template #header>
        我是头部
      </template>
      <template #main>
        我是中间
      </template>
      <template #footer>
        我是底部
      </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 |