-
表达式编辑器组件
+
表达式编辑器组件 - {{ usageMode === 'props' ? '属性方式' : '插槽方式' }}
@@ -124,6 +164,7 @@ declare const __APP_VERSION__: string
const version = __APP_VERSION__
import { ref, computed } from 'vue'
import ExpressionEditor from '../components/ExpressionEditor.vue'
+import VariableItem from '../components/VariableItem.vue'
import { ElMessage } from 'element-plus'
import { Platform, Box, Delete, Plus } from '@element-plus/icons-vue'
@@ -132,6 +173,18 @@ const testExpression = ref('')
const originalExpression = ref('')
const validateResult = ref
(null)
const currentLanguage = ref('zh')
+const usageMode = ref<'props' | 'slots'>('props')
+
+// 插槽模式的搜索功能
+const slotSearchText = ref('')
+const slotFilteredVariables = computed(() => {
+ if (!slotSearchText.value) return variables.value
+ const searchText = slotSearchText.value.toLowerCase()
+ return variables.value.filter(v =>
+ v.name.toLowerCase().includes(searchText) ||
+ v.code.toLowerCase().includes(searchText)
+ )
+})
const handleLanguageChange = (lang: string) => {
currentLanguage.value = lang
@@ -748,4 +801,25 @@ const cancelAddVariable = () => {
font-weight: 500;
margin-left: 16px;
}
+
+/* 使用方式切换样式 */
+.usage-toggle {
+ margin-bottom: 16px;
+ padding: 12px;
+ background-color: #f8f9fa;
+ border-radius: 6px;
+}
+
+/* 自定义变量区域样式 */
+.custom-variables-section {
+ padding: 8px;
+}
+
+.custom-variables-section .variables-search {
+ margin-bottom: 8px;
+}
+
+.custom-variables-section .variables-list {
+ height: 200px;
+}
diff --git a/src/index.ts b/src/index.ts
index 08d28cc..361153f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,19 +1,25 @@
import { App } from 'vue'
import ExpressionEditor from './components/ExpressionEditor.vue'
+import VariableItem from './components/VariableItem.vue'
import './styles/index.scss';
+// Export types
+export type { Variable } from './types';
+
// 添加组件类型声明
declare module 'vue' {
export interface GlobalComponents {
ExpressionEditor: typeof ExpressionEditor
+ VariableItem: typeof VariableItem
}
}
const install = (app: App) => {
app.component('ExpressionEditor', ExpressionEditor)
+ app.component('VariableItem', VariableItem)
}
ExpressionEditor.install = install
-export { ExpressionEditor }
+export { ExpressionEditor, VariableItem }
export default ExpressionEditor
diff --git a/src/locales/en.ts b/src/locales/en.ts
index 34226c3..58521cd 100644
--- a/src/locales/en.ts
+++ b/src/locales/en.ts
@@ -1,6 +1,7 @@
export default {
editor: {
placeholder: 'Enter expression, use @ to insert variables',
+ searchVariables: 'Search Variables',
incompleteTip: 'Formula is incomplete, please continue',
calculationResult: 'Calculation Result',
actualFormula: 'Actual Formula',
diff --git a/src/locales/zh.ts b/src/locales/zh.ts
index d49a10f..f08cad6 100644
--- a/src/locales/zh.ts
+++ b/src/locales/zh.ts
@@ -1,6 +1,7 @@
export default {
editor: {
placeholder: '请输入表达式，使用 @ 插入变量',
+ searchVariables: '搜索变量',
incompleteTip: '公式尚未完成，请继续输入',
calculationResult: '计算结果',
actualFormula: '实际公式',
From 74b35f48e471f3ebd4c93cf5b7396a70dad89ae1 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Sep 2025 08:59:09 +0000
Subject: [PATCH 3/4] Fix circular reference in allVariables computed property
Co-authored-by: iwangbowen <26178681+iwangbowen@users.noreply.github.com>
---
src/components/ExpressionEditor.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/ExpressionEditor.vue b/src/components/ExpressionEditor.vue
index ad790f0..298b0b6 100644
--- a/src/components/ExpressionEditor.vue
+++ b/src/components/ExpressionEditor.vue
@@ -1459,7 +1459,7 @@ provide('onVariableClick', addVariable);
// 合并属性变量和插槽变量
const allVariables = computed(() => {
// 优先使用插槽变量，如果插槽变量存在则使用插槽变量，否则使用属性变量
- return slotVariables.value.length > 0 ? slotVariables.value : allVariables.value;
+ return slotVariables.value.length > 0 ? slotVariables.value : props.variables;
});
// 添加过滤后的变量计算属性
From 5722e8e21f9114dbbcf2d7d15d198bcbd469d956 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 10 Sep 2025 09:02:11 +0000
Subject: [PATCH 4/4] Add comprehensive slot usage documentation to README
files
Co-authored-by: iwangbowen <26178681+iwangbowen@users.noreply.github.com>
---
README.en.md | 186 ++++++++++++++++++++++++++++++++++++++++++++++++++
README.md | 187 +++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 373 insertions(+)
diff --git a/README.en.md b/README.en.md
index e5ba11d..d0efd00 100644
--- a/README.en.md
+++ b/README.en.md
@@ -250,6 +250,132 @@ const insertAtCursor = (text) => {
```
+### Slot Usage (Advanced Usage)
+
+In addition to passing variables via the `variables` prop, the component also supports customizing the variables section through slots:
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### Advanced Slot Example
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### Slot Advantages
+
+Using slots provides the following advantages:
+
+- **Complete UI Control**: Full control over variable section layout and styling
+- **Dynamic Variables**: Variables can be added/removed dynamically without prop updates
+- **Advanced Layouts**: Support for tabs, categories, search, filtering, etc.
+- **Custom Components**: Use any UI components within the variable section
+- **Automatic Registration**: VariableItem components handle registration automatically
+
+#### Slot Props
+
+The `#variables` slot provides these props:
+
+- `variables`: All available variables (Array<Variable>)
+- `filteredVariables`: Filtered variables based on search (Array<Variable>)
+- `searchText`: Current search text (string)
+- `onVariableClick`: Variable selection handler ((variable: Variable) => void)
+- `onSearchChange`: Search text update handler ((text: string) => void)
+
## Component Properties
| Property | Type | Default | Description |
@@ -549,6 +675,66 @@ Notes:
4. Push to branch: `git push origin feature/your-feature`
5. Submit Pull Request
+## VariableItem Component
+
+The `VariableItem` component is provided for convenient use in slots:
+
+### Props
+
+| Property | Type | Required | Description |
+|----------|------|----------|-------------|
+| variable | Variable | Yes | Variable object with `name` and `code` properties |
+
+### Usage
+
+```vue
+
+```
+
+### Features
+
+- **Auto Registration**: Automatically registers the variable when mounted
+- **Auto Cleanup**: Automatically unregisters the variable when unmounted
+- **Click Handling**: Handles variable click events to insert into expression
+- **Customizable**: Supports custom styling via CSS classes
+
+### Variable Interface
+
+```typescript
+interface Variable {
+ name: string; // Display name (supports Chinese/English)
+ code: string; // Unique identifier for calculations
+}
+```
+
+## Slots
+
+### variables
+
+Custom variables section slot.
+
+**Slot Props:**
+- `variables` (Array<Variable>): All available variables
+- `filteredVariables` (Array<Variable>): Search-filtered variables
+- `searchText` (string): Current search text
+- `onVariableClick` (Function): Variable click handler
+- `onSearchChange` (Function): Search text change handler
+
+**Example:**
+```vue
+
+
+
+
+
+
+
+```
+
## Acknowledgments
Special thanks to Claude 3.5 Sonnet for assistance. This project's code was primarily generated by Claude 3.5 Sonnet, which provided significant support in:
diff --git a/README.md b/README.md
index fe9af0d..c79ded4 100644
--- a/README.md
+++ b/README.md
@@ -250,6 +250,133 @@ const insertAtCursor = (text) => {
```
+### 插槽用法（高级用法）
+
+除了通过 `variables` 属性传递变量，组件还支持通过插槽自定义变量区域：
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### 高级插槽示例
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+#### 插槽优势
+
+使用插槽方式具有以下优势：
+
+- **完全的UI控制**：可以完全自定义变量区域的布局和样式
+- **动态变量**：无需更新 props，变量可以动态添加/删除
+- **高级布局**：支持标签页、分类、搜索、过滤等复杂布局
+- **自定义组件**：可在变量区域使用任何UI组件
+- **自动注册**：VariableItem 组件自动处理变量的注册和注销
+
+#### 插槽属性说明
+
+`#variables` 插槽提供以下属性：
+
+- `variables`: 所有可用变量 (Array<Variable>)
+- `filteredVariables`: 基于搜索过滤的变量 (Array<Variable>)
+- `searchText`: 当前搜索文本 (string)
+- `onVariableClick`: 变量选择处理函数 ((variable: Variable) => void)
+- `onSearchChange`: 搜索文本更新函数 ((text: string) => void)
+```
+
## 组件属性
| 属性名 | 类型 | 默认值 | 说明 |
@@ -549,6 +676,66 @@ interface Variable {
4. 推送到分支：`git push origin feature/your-feature`
5. 提交 Pull Request
+## VariableItem 组件
+
+`VariableItem` 组件用于在插槽中方便地使用：
+
+### 属性
+
+| 属性 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| variable | Variable | 是 | 包含 `name` 和 `code` 属性的变量对象 |
+
+### 使用方法
+
+```vue
+
+```
+
+### 特性
+
+- **自动注册**：挂载时自动注册变量
+- **自动清理**：卸载时自动取消注册变量
+- **点击处理**：处理变量点击事件以插入到表达式中
+- **可自定义**：支持通过 CSS 类自定义样式
+
+### 变量接口
+
+```typescript
+interface Variable {
+ name: string; // 显示名称（支持中文/英文）
+ code: string; // 用于计算的唯一标识符
+}
+```
+
+## 插槽
+
+### variables
+
+自定义变量区域插槽。
+
+**插槽属性：**
+- `variables` (Array<Variable>): 所有可用变量
+- `filteredVariables` (Array<Variable>): 基于搜索过滤的变量
+- `searchText` (string): 当前搜索文本
+- `onVariableClick` (Function): 变量点击处理函数
+- `onSearchChange` (Function): 搜索文本变更处理函数
+
+**示例：**
+```vue
+
+
+
+
+
+
+
+```
+
## 致谢
特别感谢 Claude 3.5 Sonnet 的帮助。本项目的代码主要由 Claude 3.5 Sonnet 生成,它在以下方面提供了重要支持: