# ggwork-nuxt3-component

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

## Basic Information

- **Project Name**: ggwork-nuxt3-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-16
- **Last Updated**: 2025-11-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# GGWork Vue3 通用组件库

基于 Nuxt 3.3.2 + Element Plus 2.3.3 的通用组件库，包含联系方式弹窗、登录、注册等常用组件。

## ✨ 特性

- 🚀 基于 Vue 3 + TypeScript 开发
- 🎨 使用 Element Plus 2.3.3 作为 UI 基础库
- 📦 开箱即用的高质量组件
- 💪 支持按需引入
- 📝 完整的 TypeScript 类型定义
- 🎯 专注于业务场景的组件设计

## 📦 安装

```bash
npm install ggwork-vue3-common-component
# 或
yarn add ggwork-vue3-common-component
# 或
pnpm add ggwork-vue3-common-component
```

## 🔧 使用方法

### 全局注册

```typescript
import { createApp } from 'vue'
import GGWorkComponents from 'ggwork-vue3-common-component'
import 'ggwork-vue3-common-component/lib/style.css'

const app = createApp(App)
app.use(GGWorkComponents)
```

### 按需引入

```typescript
import { ContactDialog, LoginDialog, RegisterDialog } from 'ggwork-vue3-common-component'
```

## 📚 组件文档

### ContactDialog 联系方式弹窗

展示客服联系方式的弹窗组件。

#### 基础用法

```vue
<template>
  <ContactDialog
    v-model="visible"
    :contact-methods="contactMethods"
    @contact="handleContact"
  />
</template>

<script setup>
import { ref } from 'vue'
import { ContactDialog } from 'ggwork-vue3-common-component'

const visible = ref(false)
const contactMethods = [
  {
    label: '手机号',
    value: '13800138000',
    icon: 'Iphone',
    action: 'tel'
  },
  {
    label: '微信号',
    value: 'customer_service',
    icon: 'MessageFilled',
    action: 'copy'
  }
]

const handleContact = (method) => {
  console.log('联系客服:', method)
}
</script>
```

#### Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| modelValue | 控制弹窗显示/隐藏 | boolean | false |
| title | 弹窗标题 | string | '联系我们' |
| contactName | 联系人名称 | string | '客服支持' |
| avatar | 头像地址 | string | '' |
| status | 在线状态 | string | '在线' |
| contactMethods | 联系方式列表 | ContactMethod[] | 默认联系方式 |
| tips | 提示信息 | string | 工作时间提示 |

#### Events

| 事件名 | 说明 | 参数 |
|--------|------|------|
| contact | 点击联系方式 | method: ContactMethod |
| confirm | 点击确定按钮 | - |
| close | 弹窗关闭 | - |

### LoginDialog 登录弹窗

用户登录弹窗组件，支持多种登录方式。

#### 基础用法

```vue
<template>
  <LoginDialog
    v-model="visible"
    :show-captcha="true"
    :show-other-login="true"
    @login="handleLogin"
    @social-login="handleSocialLogin"
  />
</template>

<script setup>
import { ref } from 'vue'
import { LoginDialog } from 'ggwork-vue3-common-component'

const visible = ref(false)

const handleLogin = (formData) => {
  console.log('登录数据:', formData)
  // 处理登录逻辑
}

const handleSocialLogin = (type) => {
  console.log('社交登录:', type)
  // 处理社交登录
}
</script>
```

#### Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| modelValue | 控制弹窗显示/隐藏 | boolean | false |
| title | 弹窗标题 | string | '用户登录' |
| showCaptcha | 是否显示验证码 | boolean | false |
| showOtherLogin | 是否显示其他登录方式 | boolean | true |
| showRegisterLink | 是否显示注册链接 | boolean | true |
| showContact | 是否显示联系客服按钮 | boolean | false |
| socialLoginMethods | 社交登录方式列表 | SocialLoginMethod[] | 默认社交登录 |

#### Events

| 事件名 | 说明 | 参数 |
|--------|------|------|
| login | 登录提交 | formData: LoginFormData |
| social-login | 社交登录 | type: string |
| forgot-password | 忘记密码 | - |
| register | 跳转注册 | - |

### RegisterDialog 注册弹窗

用户注册弹窗组件，支持手机号验证码注册。

#### 基础用法

```vue
<template>
  <RegisterDialog
    v-model="visible"
    @register="handleRegister"
    @send-code="handleSendCode"
  />
</template>

<script setup>
import { ref } from 'vue'
import { RegisterDialog } from 'ggwork-vue3-common-component'

const visible = ref(false)

const handleRegister = (formData) => {
  console.log('注册数据:', formData)
  // 处理注册逻辑
}

const handleSendCode = (phone) => {
  console.log('发送验证码:', phone)
  // 处理发送验证码逻辑
}
</script>
```

#### Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| modelValue | 控制弹窗显示/隐藏 | boolean | false |
| title | 弹窗标题 | string | '用户注册' |
| showContact | 是否显示联系客服按钮 | boolean | false |

#### Events

| 事件名 | 说明 | 参数 |
|--------|------|------|
| register | 注册提交 | formData: RegisterFormData |
| send-code | 发送验证码 | phone: string |
| login | 跳转登录 | - |
| show-agreement | 显示用户协议 | - |
| show-privacy | 显示隐私政策 | - |

## 🔨 开发

```bash
# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建项目
npm run build

# 代码检查
npm run lint

# 修复代码格式
npm run lint:fix
```

## 📄 License

[MIT](LICENSE)

## 🤝 贡献

欢迎提交 Issue 和 Pull Request。

## 📞 联系我们

- 项目地址：[https://github.com/your-username/ggwork-vue3-common-component](https://github.com/your-username/ggwork-vue3-common-component)
- 问题反馈：[Issues](https://github.com/your-username/ggwork-vue3-common-component/issues)

---

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