geekplus-digital-ui 0.1.41 → 0.1.42
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: use-geekplus-digital-ui
|
|
3
|
-
description: Use when developing Vue 3 features involving clipboard copy, file upload/preview/download, rich text editor, text collapse/expand, icon with tooltip, or
|
|
3
|
+
description: Use when developing Vue 3 features involving clipboard copy, file upload/preview/download, rich text editor, text collapse/expand, icon with tooltip, inline editing, or search form filters. Triggers on keywords like 复制、上传、富文本、折叠文本、行内编辑、图标提示、搜索表单、搜索筛选、copy, upload, editor, fold text, inline edit, icon tip, search form.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# Geekplus Digital UI 组件库
|
|
@@ -44,6 +44,8 @@ Peer dependencies: `vue@^3.5.0`、`element-plus@^2.13.0`
|
|
|
44
44
|
| **FoldText** | `<d-fold-text>` | 多行文本折叠/展开 |
|
|
45
45
|
| **IconTip** | `<d-icon-tip>` | 图标 + 悬浮提示 |
|
|
46
46
|
| **InlineEdit** | `<d-inline-edit>` | 展示态/编辑态切换 |
|
|
47
|
+
| **SearchForm** | `<d-search-form>` | 可折叠搜索筛选区域 |
|
|
48
|
+
| **SearchItem** | `<d-search-item>` | 搜索表单的单个搜索项，配合 SearchForm 使用 |
|
|
47
49
|
|
|
48
50
|
详细 Props/Events/Slots API 请查阅文档：https://ui.geekplus.cc/static/ui/
|
|
49
51
|
|
|
@@ -56,6 +58,7 @@ Peer dependencies: `vue@^3.5.0`、`element-plus@^2.13.0`
|
|
|
56
58
|
- 长文本折叠展开 → `<d-fold-text>`
|
|
57
59
|
- 图标悬浮提示 → `<d-icon-tip>`
|
|
58
60
|
- 行内编辑切换 → `<d-inline-edit>`
|
|
61
|
+
- 搜索筛选表单 → `<d-search-form>` + `<d-search-item>`
|
|
59
62
|
|
|
60
63
|
2. **全局配置优先**：通用参数（如 Upload 的 `domain`、`axios`、`url`）应通过全局配置注入，业务页面只关注数据绑定和交互逻辑：
|
|
61
64
|
|
|
@@ -83,6 +86,28 @@ app.use(GeekplusDigitalUI, {
|
|
|
83
86
|
| 长文本展开收起 | 自己写 CSS line-clamp + 按钮 | `<d-fold-text :line-clamp="3">{{ text }}</d-fold-text>` |
|
|
84
87
|
| 字段旁加说明图标 | 自己写 el-tooltip + icon | `<d-icon-tip content="说明文字" />` |
|
|
85
88
|
| 单元格就地编辑 | 自己写 v-if 切换显示/输入 | `<d-inline-edit>展示内容<template #editor>编辑内容</template></d-inline-edit>` |
|
|
89
|
+
| 列表页搜索筛选区 | 自己用 el-form + el-row/col 手写 | `<d-search-form>` + `<d-search-item>` 组合 |
|
|
90
|
+
|
|
91
|
+
## SearchForm 用法
|
|
92
|
+
|
|
93
|
+
```vue
|
|
94
|
+
<template>
|
|
95
|
+
<d-search-form :loading="loading" @search="handleSearch" @reset="handleReset">
|
|
96
|
+
<d-search-item label="关键词" :span="6" track-label="keyword" :track-value="form.keyword">
|
|
97
|
+
<el-input v-model="form.keyword" clearable />
|
|
98
|
+
</d-search-item>
|
|
99
|
+
<d-search-item label="状态" :span="6">
|
|
100
|
+
<el-select v-model="form.status" clearable>
|
|
101
|
+
<el-option label="启用" value="1" />
|
|
102
|
+
</el-select>
|
|
103
|
+
</d-search-item>
|
|
104
|
+
</d-search-form>
|
|
105
|
+
</template>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
- 超过单行时自动出现展开/收起按钮
|
|
109
|
+
- `track-label` + `track-value` 启用埋点，通过 `formRef.getTrackText()` 获取 `keyword=hello,status=1` 格式字符串（空值自动过滤）
|
|
110
|
+
- `no-label` 无标签紧凑模式；`enter-click` 回车触发查询
|
|
86
111
|
|
|
87
112
|
## Hooks
|
|
88
113
|
|