# ggwork-caipiao-component

**Repository Path**: yagb/ggwork-caipiao-component

## Basic Information

- **Project Name**: ggwork-caipiao-component
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-17
- **Last Updated**: 2025-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Element UI

基于 Element Plus 的 Vue 3 组件库

![npm version](https://img.shields.io/npm/v/vue3-element-ui)
![downloads](https://img.shields.io/npm/dm/vue3-element-ui)
![license](https://img.shields.io/npm/l/vue3-element-ui)

## 🚀 特性

- 🎨 基于 Element Plus 2.3.14
- 🚀 支持 Vue 3.2+
- 💪 完整的 TypeScript 支持
- 📦 支持按需引入
- 🎯 专注用户体验
- 📚 完善的文档和示例

## 📦 安装

```bash
npm install vue3-element-ui element-plus
# 或者
yarn add vue3-element-ui element-plus
# 或者
pnpm add vue3-element-ui element-plus
```

## 🎯 快速开始

### 完整引入

```typescript
import { createApp } from 'vue'
import Vue3ElementUI from 'vue3-element-ui'
import 'vue3-element-ui/dist/style.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(ElementPlus)
app.use(Vue3ElementUI)

app.mount('#app')
```

### 按需引入

```typescript
import { createApp } from 'vue'
import { VeModal, VeAlertModal } from 'vue3-element-ui'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.component('VeModal', VeModal)
app.component('VeAlertModal', VeAlertModal)

app.mount('#app')
```

## 📚 组件文档

### VeModal - 通用弹窗组件

基于 Element Plus Dialog 封装的通用弹窗组件，提供更丰富的功能和更便捷的使用方式。

#### 基础用法

```vue
<template>
  <el-button @click="showModal = true">打开弹窗</el-button>

  <VeModal
    v-model="showModal"
    title="基础弹窗"
    show-default-footer
    @confirm="handleConfirm"
    @cancel="handleCancel"
  >
    <p>这是弹窗内容</p>
  </VeModal>
</template>

<script setup>
import { ref } from 'vue'
import { VeModal } from 'vue3-element-ui'

const showModal = ref(false)

const handleConfirm = () => {
  console.log('确认操作')
  showModal.value = false
}

const handleCancel = () => {
  console.log('取消操作')
}
</script>
```

#### 自定义头部和底部

```vue
<template>
  <VeModal v-model="showModal" width="600px" :center="true">
    <template #header>
      <div style="color: #409EFF; font-size: 18px;">
        <el-icon><Star /></el-icon>
        自定义标题
      </div>
    </template>

    <div style="text-align: center;">
      <h3>自定义内容区域</h3>
      <el-input v-model="inputValue" placeholder="请输入内容" />
    </div>

    <template #footer>
      <div style="text-align: center;">
        <el-button @click="showModal = false">关闭</el-button>
        <el-button type="primary" @click="handleConfirm">
          保存并关闭
        </el-button>
      </div>
    </template>
  </VeModal>
</template>
```

#### VeModal Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------|------|------|--------|--------|
| modelValue | 控制弹窗显示/隐藏 | boolean | — | false |
| title | 弹窗标题 | string | — | '提示' |
| width | 弹窗宽度 | string / number | — | '50%' |
| content | 弹窗内容（默认插槽时使用） | string | — | '' |
| closeOnClickModal | 点击遮罩层是否关闭弹窗 | boolean | — | true |
| closeOnPressEscape | 按下ESC键是否关闭弹窗 | boolean | — | true |
| showClose | 是否显示关闭按钮 | boolean | — | true |
| center | 是否居中显示 | boolean | — | false |
| appendToBody | 是否插入到body元素上 | boolean | — | true |
| customClass | 自定义类名 | string | — | '' |
| showDefaultFooter | 是否显示默认底部按钮 | boolean | — | false |
| cancelText | 取消按钮文本 | string | — | '取消' |
| confirmText | 确认按钮文本 | string | — | '确定' |
| confirmLoading | 确认按钮加载状态 | boolean | — | false |

#### VeModal Events

| 事件名 | 说明 | 参数 |
|--------|------|------|
| update:modelValue | 弹窗显示状态改变时触发 | (value: boolean) |
| open | 弹窗打开时触发 | — |
| opened | 弹窗打开动画完成时触发 | — |
| close | 弹窗关闭时触发 | — |
| closed | 弹窗关闭动画完成时触发 | — |
| confirm | 点击确认按钮时触发 | — |
| cancel | 点击取消按钮时触发 | — |

#### VeModal Slots

| 插槽名 | 说明 |
|--------|------|
| — | 弹窗内容 |
| header | 弹窗头部内容 |
| footer | 弹窗底部内容 |

### VeAlertModal - 提示弹窗组件

专门用于各类提示的弹窗组件，预设了四种提示类型。

#### 基础用法

```vue
<template>
  <el-space wrap>
    <el-button type="success" @click="showAlert('success')">
      成功提示
    </el-button>
    <el-button type="warning" @click="showAlert('warning')">
      警告提示
    </el-button>
    <el-button type="danger" @click="showAlert('error')">
      错误提示
    </el-button>
    <el-button type="info" @click="showAlert('info')">
      信息提示
    </el-button>
  </el-space>

  <VeAlertModal
    v-model="showAlertModal"
    :type="alertType"
    :title="alertTitle"
    :message="alertMessage"
    @confirm="handleAlertConfirm"
  />
</template>

<script setup>
import { ref } from 'vue'
import { VeAlertModal } from 'vue3-element-ui'

const showAlertModal = ref(false)
const alertType = ref('success')
const alertTitle = ref('成功')
const alertMessage = ref('操作成功！')

const showAlert = (type) => {
  alertType.value = type
  showAlertModal.value = true
}

const handleAlertConfirm = () => {
  console.log('提示确认')
}
</script>
```

#### VeAlertModal Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|------|------|------|--------|--------|
| modelValue | 控制弹窗显示/隐藏 | boolean | — | false |
| type | 提示类型 | string | success / warning / error / info | 'info' |
| title | 弹窗标题 | string | — | '提示' |
| message | 提示消息 | string / object | — | '' |
| width | 弹窗宽度 | string / number | — | '420px' |
| confirmText | 确认按钮文本 | string | — | '确定' |
| loading | 确认按钮加载状态 | boolean | — | false |

#### VeAlertModal Events

| 事件名 | 说明 | 参数 |
|--------|------|------|
| update:modelValue | 弹窗显示状态改变时触发 | (value: boolean) |
| confirm | 点击确认按钮时触发 | — |

## 🛠️ 开发

### 本地开发

```bash
# 克隆项目
git clone https://github.com/yourusername/vue3-element-ui.git

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建组件库
npm run build-lib
```

### 项目结构

```
vue3-element-ui/
├── src/
│   ├── components/          # 组件目录
│   │   ├── VeModal.vue     # 通用弹窗组件
│   │   └── VeAlertModal.vue # 提示弹窗组件
│   ├── index.ts            # 入口文件
│   ├── App.vue             # 开发示例
│   └── main.ts             # 开发入口
├── dist/                   # 构建输出
├── package.json
├── vite.config.ts
├── tsconfig.json
└── README.md
```

## 📄 许可证

[MIT](LICENSE)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📞 联系

- GitHub: [yourusername](https://github.com/yourusername)
- Email: your.email@example.com

---

⭐ 如果这个项目对你有帮助，请给我一个 Star！