WMS-UI 组件库

基于 vue-demi 的跨版本组件库，同时支持 Vue 2 和 Vue 3。

特性

• 🚀 同时支持 Vue 2.6+ 和 Vue 3.x
• 📦 基于 vue-demi 实现跨版本兼容
• 🎨 自动适配 Element UI (Vue 2) 和 Element Plus (Vue 3)
• 📝 完整的 TypeScript 支持
• 🛠️ 支持按需引入和全量引入

安装

Vue 2 项目

# 安装组件库
npm install wms-ui

# 安装 Vue 2 相关依赖
npm install vue@^2.6.0 @vue/composition-api element-ui

Vue 3 项目

# 安装组件库
npm install wms-ui

# 安装 Vue 3 相关依赖
npm install vue@^3.0.0 element-plus

使用方法

全量引入

Vue 2 项目

// main.js
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import WmsUI from 'wms-ui';

Vue.use(ElementUI);
Vue.use(WmsUI);

new Vue({
  render: h => h(App)
}).$mount('#app');

Vue 3 项目

// main.js
import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import WmsUI from 'wms-ui';
import App from './App.vue';

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

按需引入

// Vue 2
import Vue from 'vue';
import { Button, Dialog } from 'element-ui';
import { WmsDialog } from 'wms-ui';

Vue.use(Button);
Vue.use(Dialog);
Vue.component('WmsDialog', WmsDialog);

// Vue 3
import { createApp } from 'vue';
import { ElButton, ElDialog } from 'element-plus';
import { WmsDialog } from 'wms-ui';

const app = createApp(App);
app.component('ElButton', ElButton);
app.component('ElDialog', ElDialog);
app.component('WmsDialog', WmsDialog);

组件文档

WmsDialog 对话框组件

一个封装了触发按钮和对话框的复合组件，自动适配 Vue 2/3 和对应的 Element 组件库。

基础用法

<template>
  <div>
    <!-- 基础用法 -->
    <wms-dialog 
      title="基础对话框"
      content="这是一个基础的对话框内容"
      button-text="打开对话框"
      @confirm="handleConfirm"
      @close="handleClose"
    />
    
    <!-- 自定义内容 -->
    <wms-dialog 
      title="自定义内容"
      button-text="打开自定义对话框"
    >
      <p>这是自定义的对话框内容</p>
      <el-form>
        <el-form-item label="用户名">
          <el-input v-model="username" />
        </el-form-item>
      </el-form>
    </wms-dialog>
    
    <!-- 无底部按钮 -->
    <wms-dialog 
      title="无底部按钮"
      content="这个对话框没有底部按钮"
      :show-footer="false"
      button-text="打开无底部对话框"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    handleConfirm() {
      console.log('用户点击了确定');
    },
    handleClose() {
      console.log('对话框关闭了');
    }
  }
};
</script>

Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|------|------|--------|--------| | title | 对话框标题 | string | — | '提示' | | content | 对话框内容（当没有插槽内容时显示） | string | — | '' | | width | 对话框宽度 | string | — | '50%' | | button-text | 触发按钮文本 | string | — | '打开对话框' | | button-type | 触发按钮类型 | string | primary/success/warning/danger/info/text | 'primary' | | show-footer | 是否显示底部按钮 | boolean | — | true |

Events

| 事件名 | 说明 | 回调参数 | |--------|------|----------| | open | 对话框打开时触发 | — | | close | 对话框关闭时触发 | — | | confirm | 点击确定按钮时触发 | — |

Slots

| 插槽名 | 说明 | |--------|------| | default | 对话框的内容 |

兼容性说明

Vue 版本支持

• Vue 2.6.0+
• Vue 3.0.0+

Element 组件库支持

• Element UI 2.x (Vue 2)
• Element Plus 2.x (Vue 3)

浏览器支持

• Chrome >= 51
• Firefox >= 54
• Safari >= 10
• IE >= 11 (需要 polyfill)

开发指南

本地开发

# 克隆项目
git clone <repository-url>
cd wms-ui

# 安装依赖
npm install

# 构建项目
npm run build

# 开发模式（监听文件变化）
npm run dev

项目结构

wms-ui/
├── src/
│   ├── components/
│   │   └── WmsDialog.ts      # 对话框组件
│   ├── vue-demi.ts           # Vue 版本适配
│   ├── shims-vue.d.ts        # Vue 类型声明
│   └── index.ts              # 入口文件
├── dist/                     # 构建输出目录
├── package.json
├── tsconfig.json
├── rollup.config.js
├── README.md
└── PUBLISH_GUIDE.md

注意事项

1. Element 组件库依赖：使用前请确保已正确安装并注册了对应的 Element 组件库
2. Vue 2 项目：需要安装 @vue/composition-api 以支持 Composition API
3. TypeScript 支持：组件库提供完整的 TypeScript 类型定义
4. 样式引入：需要手动引入 Element UI/Plus 的样式文件

更新日志

v1.0.0

• 🎉 初始版本发布
• ✨ 新增 WmsDialog 组件
• 🚀 支持 Vue 2 和 Vue 3
• 📝 完整的 TypeScript 支持

许可证

MIT License

贡献指南

欢迎提交 Issue 和 Pull Request 来帮助改进这个项目。

1. Fork 本仓库
2. 创建你的特性分支 (git checkout -b feature/AmazingFeature)
3. 提交你的修改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开一个 Pull Request