# g-character-dialog.
**Repository Path**: ujjldn/g-character-dialog.
## Basic Information
- **Project Name**: g-character-dialog.
- **Description**: vue+element-plus 特殊字符选择器
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-02
- **Last Updated**: 2025-08-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: Vue, Element-UI
## README
# g-dialog 组件库
一个基于 Vue 3 和 Element Plus 的字符选择对话框和抽屉组件库。
## 组件介绍
本组件库包含两个核心组件：
1. **CharacterDialog** - 对话框形式的字符选择器
2. **CharacterDrawer** - 抽屉形式的字符选择器
两个组件都基于 Element Plus 的 `el-dialog` 和 `el-drawer` 组件，并集成了字符选择功能。
## 安装
```bash
npm install element-plus
```
注意：本组件库依赖 Element Plus，使用前请确保已安装 Element Plus。
## 使用方式
### 1. 通过构建工具使用（推荐）
#### 安装依赖
```bash
npm install element-plus
```
#### 在项目中引入
```javascript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import { CharacterDialog, CharacterDrawer } from 'g-dialog'
const app = createApp(App)
app.use(ElementPlus)
app.component('character-dialog', CharacterDialog)
app.component('character-drawer', CharacterDrawer)
```
### 2. 通过 CDN 使用
```html
g-dialog 示例
```
## API 参考
### CharacterDialog 组件
#### 方法
| 方法名 | 说明 | 参数 |
| --- | --- | --- |
| openDialog() | 打开对话框 | - |
| closeDialog() | 关闭对话框 | - |
| getSelectedChars() | 获取选中的字符 | - |
#### 事件
| 事件名 | 说明 | 参数 |
| --- | --- | --- |
| character-selected | 当字符被选中时触发 | 选中的字符 |
### CharacterDrawer 组件
#### 方法
| 方法名 | 说明 | 参数 |
| --- | --- | --- |
| openDrawer() | 打开抽屉 | - |
| closeDrawer() | 关闭抽屉 | - |
| getSelectedChars() | 获取选中的字符 | - |
#### 事件
| 事件名 | 说明 | 参数 |
| --- | --- | --- |
| character-selected | 当字符被选中时触发 | 选中的字符 |
## 构建
```bash
# 构建所有组件
npm run build
# 构建特定组件
npm run build:dialog
npm run build:drawer
npm run build:all
```
## 注意事项
1. 使用前必须安装并引入 Element Plus
2. 组件通过 `ref` 调用内部方法，如 `openDialog()` 和 `openDrawer()`
3. 组件会自动处理字符选择器的初始化和清理工作
4. 两个组件可以同时使用，但在某些情况下可能需要延迟渲染其中一个以避免冲突
## 许可证
MIT