@winner-fed/plugin-hui

基于 h_ui 的 Vue 2 组件库插件，支持按需引入和函数组件原型链挂载。

安装

pnpm add @winner-fed/plugin-hui
# 或者
yarn add @winner-fed/plugin-hui
# 或者
pnpm add @winner-fed/plugin-hui

使用

基础配置

在 plugin.ts 中配置：

import { defineConfig } from '@winner-fed/winjs';

export default defineConfig({
  plugins: [
    // 其他插件...
  ],
  hui: {
    // 配置需要通过 Vue.use 安装的函数组件
    legacyFunction: ['Message', 'Notice', 'LoadingBar', 'Spin', 'MsgBox', 'MsgBoxSafe', 'MessageSafe']
  }
});

功能说明

1. 按需引入组件

插件会自动识别模板中使用的 HUI 组件，并按需引入：

<template>
  <div>
    <HButton>按钮</HButton>
    <HMessage>消息</HMessage>
  </div>
</template>

2. 函数组件插件安装

配置 legacyFunction 后，插件会自动生成运行时代码，使用 Vue.use 方式安装这些函数组件：

// 自动生成的运行时代码
import Vue from 'vue';
import 'h_ui/dist/lib/theme-chalk/common/index.css';
import Message from 'h_ui/dist/lib/Message';
import Notice from 'h_ui/dist/lib/Notice';
import LoadingBar from 'h_ui/dist/lib/LoadingBar';
// ... 其他函数组件

// 自动导入对应的样式文件
import 'h_ui/dist/lib/theme-chalk/message.css';
import 'h_ui/dist/lib/theme-chalk/notice.css';
import 'h_ui/dist/lib/theme-chalk/loadingbar.css';
// ... 其他样式文件

// 使用 Vue.use 方式安装函数组件
Vue.use(Message);
Vue.use(Notice);
Vue.use(LoadingBar);
// ... 其他安装

然后在组件中可以直接使用（根据 h_ui 组件的具体 API）：

<script>
export default {
  methods: {
    showMessage() {
      this.$hMessage('这是一条消息');
    },
    showNotice() {
      this.$hNotice({
        title: '通知',
        content: '这是一条通知'
      });
    }
  }
}
</script>

3. 版本兼容性

插件会自动检测 h_ui 的版本：

• h_ui < 1.79.0: 自动引入 popper.js（仅对定位类组件如 Tooltip、Dropdown 等）
• h_ui >= 1.79.0: 不引入 popper.js（因为已内置）

注意：legacyFunction 中的组件（Message、Notice、LoadingBar 等）通常不需要 popper.js。

4. 支持的函数组件

目前支持以下函数组件的 Vue.use 安装：

• LoadingBar
• Message
• MessageSafe
• MsgBox
• MsgBoxSafe
• Notice
• Spin

配置选项

legacyFunction

• 类型: string[]
• 默认值: []
• 说明: 需要通过 Vue.use 安装的函数组件名称数组

hui: {
  legacyFunction: ['Message', 'Notice', 'LoadingBar']
}

注意事项

1. 只有配置在 legacyFunction 中的函数组件才会被通过 Vue.use 安装
2. 安装后的函数组件会按照 h_ui 的标准 API 挂载到 Vue 实例上
3. 建议只配置项目中实际使用的函数组件，避免不必要的代码引入
4. legacyFunction 中的组件主要是消息提示类，不涉及复杂定位，无需 popper.js

示例

完整的配置示例：

// plugin.ts
import { defineConfig } from '@winner-fed/winjs';

export default defineConfig({
  plugins: [
    // 其他插件...
  ],
  hui: {
    legacyFunction: ['Message', 'Notice', 'LoadingBar', 'Spin']
  }
});

<!-- 在组件中使用 -->
<template>
  <div>
    <HButton @click="handleClick">显示消息</HButton>
    <HButton @click="startLoading">开始加载</HButton>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$hMessage('操作成功！');
    },
    startLoading() {
      this.$hLoading.start();
      setTimeout(() => {
        this.$hLoading.finish();
      }, 2000);
    }
  }
}
</script>