mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-12-11 18:42:52 +00:00
docs: 完善文档
This commit is contained in:
roymondchen
parent
7a0dae9f5a
commit
f7811fdb24
@ -4,34 +4,101 @@
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} componentGroupList 组件列表配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置左侧面板的组件列表配置
|
||||
|
||||
:::tip
|
||||
该方法通常由编辑器内部调用，开发者可以通过 [m-editor 的 componentGroupList prop](./props.md#componentgrouplist) 来配置组件列表
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { componentListService } from '@tmagic/editor';
|
||||
|
||||
componentListService.setList([
|
||||
{
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
icon: 'text-icon',
|
||||
text: '文本',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
icon: 'button-icon',
|
||||
text: '按钮',
|
||||
type: 'button',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
## getList
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} 组件列表配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取当前的组件列表配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { componentListService } from '@tmagic/editor';
|
||||
|
||||
const list = componentListService.getList();
|
||||
console.log(list);
|
||||
```
|
||||
|
||||
## resetState
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置组件列表状态，清空所有配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { componentListService } from '@tmagic/editor';
|
||||
|
||||
componentListService.resetState();
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 componentListService，清空状态并移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { componentListService } from '@tmagic/editor';
|
||||
|
||||
componentListService.destroy();
|
||||
```
|
||||
|
||||
@ -2,30 +2,540 @@
|
||||
|
||||
## get
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{StateKey}` name 状态键名
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{any}` 对应的状态值
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取数据源服务的内部状态
|
||||
|
||||
可用的状态键：
|
||||
- `datasourceTypeList`: 数据源类型列表
|
||||
- `dataSources`: 当前数据源列表
|
||||
- `editable`: 是否可编辑
|
||||
- `configs`: 数据源表单配置
|
||||
- `values`: 数据源默认值
|
||||
- `events`: 数据源事件列表
|
||||
- `methods`: 数据源方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const dataSources = dataSourceService.get('dataSources');
|
||||
console.log(dataSources);
|
||||
```
|
||||
|
||||
## set
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{StateKey}` name 状态键名
|
||||
- `{any}` value 状态值
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置数据源服务的内部状态
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.set('editable', false);
|
||||
```
|
||||
|
||||
## getFormConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} 表单配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型数据源的表单配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const config = dataSourceService.getFormConfig('http');
|
||||
console.log(config);
|
||||
```
|
||||
|
||||
## setFormConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 表单配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定类型数据源的表单配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.setFormConfig('http', [
|
||||
{
|
||||
name: 'url',
|
||||
text: '请求地址',
|
||||
type: 'text',
|
||||
},
|
||||
{
|
||||
name: 'method',
|
||||
text: '请求方法',
|
||||
type: 'select',
|
||||
options: [
|
||||
{ text: 'GET', value: 'GET' },
|
||||
{ text: 'POST', value: 'POST' },
|
||||
],
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
## getFormValue
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} 数据源默认值
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型数据源的默认值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const defaultValue = dataSourceService.getFormValue('http');
|
||||
console.log(defaultValue);
|
||||
```
|
||||
|
||||
## setFormValue
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型
|
||||
- {Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>} value 数据源默认值
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定类型数据源的默认值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.setFormValue('http', {
|
||||
type: 'http',
|
||||
method: 'GET',
|
||||
url: '',
|
||||
});
|
||||
```
|
||||
|
||||
## getFormEvent
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型数据源的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const events = dataSourceService.getFormEvent('http');
|
||||
console.log(events);
|
||||
```
|
||||
|
||||
## setFormEvent
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 事件列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定类型数据源的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.setFormEvent('http', [
|
||||
{ label: '请求成功', value: 'success' },
|
||||
{ label: '请求失败', value: 'error' },
|
||||
]);
|
||||
```
|
||||
|
||||
## getFormMethod
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型，默认为 'base'
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型数据源的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const methods = dataSourceService.getFormMethod('http');
|
||||
console.log(methods);
|
||||
```
|
||||
|
||||
## setFormMethod
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 数据源类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} value 方法列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定类型数据源的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.setFormMethod('http', [
|
||||
{ label: '发起请求', value: 'request' },
|
||||
{ label: '重试', value: 'retry' },
|
||||
]);
|
||||
```
|
||||
|
||||
## add
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 添加后的数据源配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
添加一个数据源，如果配置中没有id或id已存在，会自动生成新的id
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const newDs = dataSourceService.add({
|
||||
type: 'http',
|
||||
title: '用户信息',
|
||||
url: '/api/user',
|
||||
method: 'GET',
|
||||
});
|
||||
|
||||
console.log(newDs.id); // 自动生成的id
|
||||
```
|
||||
|
||||
## update
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} config 数据源配置
|
||||
- `{Object}` options 可选配置
|
||||
- {[ChangeRecord](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)[]} changeRecords 变更记录
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)} 更新后的数据源配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新数据源
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const updatedDs = dataSourceService.update({
|
||||
id: 'ds_123',
|
||||
type: 'http',
|
||||
title: '用户详情',
|
||||
url: '/api/user/detail',
|
||||
});
|
||||
|
||||
console.log(updatedDs);
|
||||
```
|
||||
|
||||
## remove
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` id 数据源id
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
删除指定id的数据源
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.remove('ds_123');
|
||||
```
|
||||
|
||||
## createId
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{string}` 生成的唯一id
|
||||
|
||||
- **详情：**
|
||||
|
||||
生成一个唯一的数据源id，格式为 `ds_` + guid
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const id = dataSourceService.createId();
|
||||
console.log(id); // 'ds_xxx-xxx-xxx'
|
||||
```
|
||||
|
||||
## getDataSourceById
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` id 数据源id
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221) | undefined} 数据源配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
根据id获取数据源配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
const ds = dataSourceService.getDataSourceById('ds_123');
|
||||
console.log(ds);
|
||||
```
|
||||
|
||||
## copyWithRelated
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]} config 组件节点配置
|
||||
- `{TargetOptions}` collectorOptions 可选的收集器配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
复制组件时会带上组件关联的数据源，将关联的数据源存储到 localStorage
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService, editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
dataSourceService.copyWithRelated(node);
|
||||
```
|
||||
|
||||
## paste
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
粘贴数据源，从 localStorage 中读取复制的数据源并添加到当前页面
|
||||
|
||||
如果数据源id已存在，则不会覆盖
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.paste();
|
||||
```
|
||||
|
||||
## resetState
|
||||
|
||||
## destroy
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置数据源服务状态，清空所有数据源
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.resetState();
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 dataSourceService，移除所有事件监听并重置状态
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.destroy();
|
||||
```
|
||||
|
||||
## usePlugin
|
||||
|
||||
- **详情：**
|
||||
|
||||
相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展
|
||||
|
||||
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.usePlugin({
|
||||
beforeAdd(config) {
|
||||
console.log('添加前:', config);
|
||||
return [config];
|
||||
},
|
||||
|
||||
afterAdd(result, config) {
|
||||
console.log('添加后:', result);
|
||||
return result;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## removeAllPlugins
|
||||
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { dataSourceService } from '@tmagic/editor';
|
||||
|
||||
dataSourceService.removeAllPlugins();
|
||||
```
|
||||
@ -1,97 +1,244 @@
|
||||
# eventService方法
|
||||
# eventsService方法
|
||||
|
||||
## init
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- {Record<string, { events: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]; methods: [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[] }>} eventMethodList 事件方法列表配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
初始化事件服务，设置所有组件的事件和方法列表
|
||||
|
||||
:::tip
|
||||
该方法通常由编辑器内部调用，开发者可以通过 [m-editor 的 eventMethodList prop](./props.md#eventmethodlist) 来配置
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.init({
|
||||
page: {
|
||||
events: [
|
||||
{ label: '页面加载', value: 'load' },
|
||||
{ label: '页面卸载', value: 'unload' },
|
||||
],
|
||||
methods: [
|
||||
{ label: '刷新', value: 'refresh' },
|
||||
{ label: '返回', value: 'back' },
|
||||
],
|
||||
},
|
||||
button: {
|
||||
events: [
|
||||
{ label: '点击', value: 'click' },
|
||||
],
|
||||
methods: [],
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## setEvents
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} events 事件配置对象
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
批量设置多个组件类型的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setEvents({
|
||||
page: [
|
||||
{ label: '页面加载', value: 'load' },
|
||||
{ label: '页面显示', value: 'show' },
|
||||
],
|
||||
text: [
|
||||
{ label: '点击', value: 'click' },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## setEvent
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` type 组件类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} events 事件列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定组件类型的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setEvent('button', [
|
||||
{ label: '点击', value: 'click' },
|
||||
{ label: '长按', value: 'longpress' },
|
||||
]);
|
||||
```
|
||||
|
||||
## getEvent
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 事件列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定组件类型的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
const events = eventsService.getEvent('button');
|
||||
console.log(events); // [{ label: '点击', value: 'click' }, ...]
|
||||
```
|
||||
|
||||
## setMethods
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- {Record<string, [EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]>} methods 方法配置对象
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
批量设置多个组件类型的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setMethods({
|
||||
page: [
|
||||
{ label: '刷新', value: 'refresh' },
|
||||
{ label: '滚动到顶部', value: 'scrollToTop' },
|
||||
],
|
||||
video: [
|
||||
{ label: '播放', value: 'play' },
|
||||
{ label: '暂停', value: 'pause' },
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## setMethod
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` type 组件类型
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} methods 方法列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定组件类型的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setMethod('video', [
|
||||
{ label: '播放', value: 'play' },
|
||||
{ label: '暂停', value: 'pause' },
|
||||
{ label: '停止', value: 'stop' },
|
||||
]);
|
||||
```
|
||||
|
||||
## getMethod
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- {[EventOption](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/core/src/events.ts#L26-L29)[]} 方法列表
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定组件类型的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
const methods = eventsService.getMethod('video');
|
||||
console.log(methods); // [{ label: '播放', value: 'play' }, ...]
|
||||
```
|
||||
|
||||
## resetState
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置事件服务状态，清空所有事件和方法配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.resetState();
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 eventsService，重置状态并移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.destroy();
|
||||
```
|
||||
|
||||
@ -967,83 +967,316 @@ const updateDragEl = (el, target) => {
|
||||
|
||||
- **详情：**
|
||||
|
||||
标尺配置
|
||||
画布标尺和参考线的配置选项
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `Partial<GuidesOptions>`
|
||||
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :guides-options="guidesOptions"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const guidesOptions = {
|
||||
// 标尺刻度单位
|
||||
unit: 1,
|
||||
// 标尺背景色
|
||||
backgroundColor: '#f0f0f0',
|
||||
// 标尺文字颜色
|
||||
textColor: '#333',
|
||||
// 参考线颜色
|
||||
lineColor: '#ff0000',
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## disabledPageFragment
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用页面片
|
||||
禁用页面片功能
|
||||
|
||||
页面片是可以在多个页面中复用的组件集合
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-page-fragment="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## disabledStageOverlay
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用双击在浮层中单独编辑选中组件
|
||||
禁用双击在浮层中单独编辑选中组件的功能
|
||||
|
||||
启用时，双击组件可以在浮层中单独编辑，避免其他组件干扰
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-stage-overlay="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## disabledShowSrc
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用属性配置面板右下角显示源码的按钮
|
||||
禁用属性配置面板右下角"显示源码"的按钮
|
||||
|
||||
该按钮可以查看和编辑组件的 JSON 配置
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-show-src="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## disabledDataSource
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用数据源
|
||||
禁用数据源功能
|
||||
|
||||
禁用后，左侧面板将不显示数据源选项卡
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-data-source="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## disabledCodeBlock
|
||||
|
||||
- **详情：**
|
||||
|
||||
禁用代码块
|
||||
禁用代码块功能
|
||||
|
||||
禁用后，左侧面板将不显示代码块选项卡
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :disabled-code-block="true"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## treeIndent
|
||||
|
||||
- **详情：**
|
||||
|
||||
已选组件、代码编辑、数据源缩进配置
|
||||
组件树、代码块列表、数据源列表的缩进配置（单位：px）
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `number`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :tree-indent="20"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## treeNextLevelIndentIncrement
|
||||
|
||||
- **详情：**
|
||||
|
||||
已选组件、代码编辑、数据源子节点缩进增量配置
|
||||
组件树、代码块列表、数据源列表子节点缩进增量配置（单位：px）
|
||||
|
||||
每一级子节点会在父节点缩进基础上增加该值
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `number`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<!-- 第一级缩进20px，第二级缩进35px，第三级缩进50px -->
|
||||
<m-editor :tree-indent="20" :tree-next-level-indent-increment="15"></m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## customContentMenu
|
||||
|
||||
- **详情：**
|
||||
|
||||
用于自定义组件树与画布的右键菜单
|
||||
用于自定义组件树与画布的右键菜单
|
||||
|
||||
- **类型：** `function`
|
||||
该函数会在显示右键菜单前被调用，接收默认菜单项作为参数，返回最终显示的菜单项
|
||||
|
||||
- **默认值：** `(menus) => menus`
|
||||
|
||||
- **类型：** `(menus: (MenuButton | MenuComponent)[], data: { node?: MNode; page?: MPage; parent?: MContainer; stage?: StageCore }) => (MenuButton | MenuComponent)[]`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :custom-content-menu="customContentMenu"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const customContentMenu = (menus, { node }) => {
|
||||
// 为特定类型的组件添加自定义菜单
|
||||
if (node?.type === 'container') {
|
||||
menus.push({
|
||||
type: 'button',
|
||||
text: '清空容器',
|
||||
handler: () => {
|
||||
// 清空容器的逻辑
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 可以过滤掉某些菜单项
|
||||
return menus.filter(menu => menu.text !== '删除');
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## extendFormState
|
||||
|
||||
- **详情：**
|
||||
|
||||
扩展表单状态
|
||||
|
||||
用于在属性表单中注入自定义的状态数据，这些数据可以在表单配置的各个字段为函数时的第一个参数中获取
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `(state: FormState) => Record<string, any> | Promise<Record<string, any>>`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :extend-form-state="extendFormState"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const extendFormState = async (state) => {
|
||||
// 返回自定义的状态数据
|
||||
return {
|
||||
// 可以是同步数据
|
||||
currentUser: {
|
||||
name: 'Admin',
|
||||
role: 'admin',
|
||||
},
|
||||
// 也可以是异步获取的数据
|
||||
projectConfig: await fetchProjectConfig(),
|
||||
};
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
扩展的状态可以在表单配置中通过 `state` 访问，例如：
|
||||
|
||||
```js
|
||||
{
|
||||
name: 'title',
|
||||
text: '标题',
|
||||
// 根据扩展的状态动态设置
|
||||
disabled: (state) => state.currentUser.role !== 'admin',
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## pageBarSortOptions
|
||||
|
||||
- **详情：**
|
||||
|
||||
页面顺序拖拽配置参数
|
||||
页面标签栏的拖拽排序配置参数
|
||||
|
||||
用于配置页面标签的拖拽排序行为
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** [PageBarSortOptions](https://github.com/Tencent/tmagic-editor/blob/master/packages/editor/src/type.ts)
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :page-bar-sort-options="sortOptions"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const sortOptions = {
|
||||
// 是否启用拖拽排序
|
||||
animation: 150,
|
||||
// 拖拽手柄的class
|
||||
handle: '.page-bar-item',
|
||||
// 其他 sortablejs 配置
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## pageFilterFunction
|
||||
|
||||
- **详情：**
|
||||
|
||||
页面搜索函数
|
||||
页面搜索/过滤函数
|
||||
|
||||
用于自定义页面的搜索逻辑，在页面列表中输入关键词时会调用该函数进行过滤
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `(page: MPage | MPageFragment, keyword: string) => boolean`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :page-filter-function="pageFilterFunction"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const pageFilterFunction = (page, keyword) => {
|
||||
// 自定义搜索逻辑
|
||||
// 不仅搜索页面名称，还搜索页面的其他属性
|
||||
return (
|
||||
page.name?.includes(keyword) ||
|
||||
page.title?.includes(keyword) ||
|
||||
page.id?.includes(keyword)
|
||||
);
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -1,29 +1,111 @@
|
||||
# Editor组件 slots
|
||||
|
||||
## header
|
||||
|
||||
- **详情：** 编辑器最顶部区域
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #header>
|
||||
<div class="custom-header">自定义头部内容</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## nav
|
||||
|
||||
- **详情：** 编辑器顶部菜单栏
|
||||
|
||||
- **默认：** [NavMenu.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/NavMenu.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
:::warning
|
||||
属性配置[menu](./props.md#menu)由默认组件接收，如设置该slot，[menu](./props.md#menu)配置将失效
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #nav="{ editorService }">
|
||||
<div class="custom-nav">
|
||||
<button @click="save">保存</button>
|
||||
</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## content-before
|
||||
|
||||
- **详情：** 编辑器主要内容区域之前
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
## src-code
|
||||
|
||||
- **详情：** 源码查看区域
|
||||
|
||||
- **默认：** 默认的代码编辑器
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
## sidebar
|
||||
|
||||
- **详情：** 左边栏
|
||||
|
||||
- **默认：** [Sidebar.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/sidebar/Sidebar.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
:::warning
|
||||
属性配置[sidebar](./props.md#sidebar)由默认组件接收，如设置该slot，[sidebar](./props.md#sidebar)配置将失效
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #sidebar="{ editorService }">
|
||||
<div class="custom-sidebar">
|
||||
<!-- 自定义侧边栏内容 -->
|
||||
</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## component-list
|
||||
|
||||
- **详情：** 左边栏中的组件列表
|
||||
|
||||
- **默认：** 默认的组件列表
|
||||
|
||||
- **插槽 Props：**
|
||||
- `componentGroupList`: 组件分组列表
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## component-list-panel-header
|
||||
|
||||
- **详情：** 左边栏中的组件列表内上方位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
@ -34,24 +116,84 @@
|
||||
|
||||
- **默认：** 图片加文案
|
||||
|
||||
- **插槽 Props：**
|
||||
- `component`: 组件配置对象
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #component-list-item="{ component }">
|
||||
<div class="custom-item">
|
||||
<span>{{ component.text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## layer-panel-header
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）内顶部位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## layer-node-content
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）节点
|
||||
- **详情：** 左边栏中的已选组件（组件树）节点完整内容
|
||||
|
||||
- **默认：** 组件名称加id和工具按钮
|
||||
|
||||
- **插槽 Props：**
|
||||
- `data`: 节点数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## layer-node-label
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）节点标签部分
|
||||
|
||||
- **默认：** 组件名称加id
|
||||
|
||||
- **插槽 Props：**
|
||||
- `data`: 节点数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #layer-node-label="{ data }">
|
||||
<span>{{ data.type }} - {{ data.name }}</span>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## layer-node-tool
|
||||
|
||||
- **详情：** 左边栏中的已选组件（组件树）节点右侧工具区域
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `data`: 节点数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
@ -60,6 +202,8 @@
|
||||
|
||||
- **详情：** 左边栏中的代码块列表内顶部位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
@ -68,13 +212,44 @@
|
||||
|
||||
- **详情：** 左边栏中的代码块列表中代码块右侧位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `id`: 代码块id
|
||||
- `data`: 代码块数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## code-block-edit-panel-header
|
||||
## code-block-panel-search
|
||||
|
||||
- **详情：** 代码块弹窗编辑器中弹窗顶部区域
|
||||
- **详情：** 左边栏中的代码块列表搜索框位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## data-source-panel-tool
|
||||
|
||||
- **详情：** 左边栏中的数据源列表中数据源右侧位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `data`: 数据源数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## data-source-panel-search
|
||||
|
||||
- **详情：** 左边栏中的数据源列表搜索框位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
@ -86,6 +261,9 @@
|
||||
|
||||
- **默认：** [Workspace.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Workspace.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
## stage
|
||||
|
||||
- **详情：** 画布
|
||||
@ -94,15 +272,63 @@
|
||||
|
||||
## workspace-content
|
||||
|
||||
- **详情：** 编辑器中间区域内
|
||||
- **详情：** 编辑器中间区域内，画布上方位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
## page-bar
|
||||
|
||||
- **详情：** 编辑器中间区域底部页面标签栏
|
||||
|
||||
- **默认：** 默认的页面标签栏
|
||||
|
||||
## page-bar-add-button
|
||||
|
||||
- **详情：** 页面标签栏中的"添加页面"按钮
|
||||
|
||||
- **默认：** 默认的添加按钮
|
||||
|
||||
## page-bar-title
|
||||
|
||||
- **详情：** 编辑器中间区域底部页面标题
|
||||
|
||||
- **默认：** 页面名称
|
||||
|
||||
- **插槽 Props：**
|
||||
- `page`: 页面配置对象
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #page-bar-title="{ page }">
|
||||
<span>{{ page.name }} - {{ page.id }}</span>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
## page-bar-popover
|
||||
|
||||
- **详情：** 编辑器中间区域底部页面标题悬浮框
|
||||
- **详情：** 编辑器中间区域底部页面标题悬浮框内容
|
||||
|
||||
- **默认：** 页面详细信息
|
||||
|
||||
- **插槽 Props：**
|
||||
- `page`: 页面配置对象
|
||||
|
||||
## page-list-popover
|
||||
|
||||
- **详情：** 页面列表弹出框内容
|
||||
|
||||
- **默认：** 页面列表
|
||||
|
||||
- **插槽 Props：**
|
||||
- `list`: 页面列表
|
||||
|
||||
## props-panel
|
||||
|
||||
@ -114,8 +340,40 @@
|
||||
|
||||
- **详情：** 编辑器右侧属性配置内顶部区域
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
## content-after
|
||||
|
||||
- **详情：** 编辑器主要内容区域之后
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
## footer
|
||||
|
||||
- **详情：** 编辑器底部区域
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
## empty
|
||||
|
||||
- **详情：** 当前没有页面时，编辑器中间区域
|
||||
|
||||
- **默认：** [AddPageBox.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/AddPageBox.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor>
|
||||
<template #empty="{ editorService }">
|
||||
<div class="custom-empty">
|
||||
<p>暂无页面</p>
|
||||
<button @click="createFirstPage">创建第一个页面</button>
|
||||
</div>
|
||||
</template>
|
||||
</m-editor>
|
||||
</template>
|
||||
```
|
||||
|
||||
@ -4,114 +4,250 @@
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{Storage}` Storage 对象
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取数据存储对象，默认返回 localStorage
|
||||
|
||||
可以通过插件机制替换为其他存储对象（如 sessionStorage）
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
const storage = storageService.getStorage();
|
||||
console.log(storage); // localStorage
|
||||
|
||||
// 通过插件替换为 sessionStorage
|
||||
storageService.usePlugin({
|
||||
afterGetStorage() {
|
||||
return window.sessionStorage;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## getNamespace
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{string}` 命名空间字符串
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取存储项的命名空间，默认为 'tmagic'
|
||||
|
||||
命名空间用于区分不同应用的存储数据
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
const namespace = storageService.getNamespace();
|
||||
console.log(namespace); // 'tmagic'
|
||||
```
|
||||
|
||||
## clear
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
清空当前存储对象中的所有数据
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.clear();
|
||||
```
|
||||
|
||||
## getItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` key 存储项的键名
|
||||
- `{Options}` options 可选配置
|
||||
- `namespace?: string` 自定义命名空间
|
||||
- `protocol?: Protocol` 数据协议类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{any}` 存储的值，如果不存在返回 null
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取存储项，支持多种数据类型的自动解析
|
||||
|
||||
支持的协议类型：
|
||||
- `Protocol.OBJECT`: JavaScript 对象
|
||||
- `Protocol.JSON`: JSON 格式
|
||||
- `Protocol.NUMBER`: 数字类型
|
||||
- `Protocol.BOOLEAN`: 布尔类型
|
||||
- `Protocol.STRING`: 字符串类型
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
// 获取字符串
|
||||
const str = storageService.getItem('myKey');
|
||||
|
||||
// 使用自定义命名空间
|
||||
const value = storageService.getItem('key', { namespace: 'custom' });
|
||||
|
||||
// 指定协议类型
|
||||
const num = storageService.getItem('count', { protocol: Protocol.NUMBER });
|
||||
```
|
||||
|
||||
## key
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{number}` index 索引位置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{string | null}` 指定位置的键名，不存在返回 null
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取存储对象中指定索引位置的键名
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
const firstKey = storageService.key(0);
|
||||
console.log(firstKey);
|
||||
```
|
||||
|
||||
## removeItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` key 存储项的键名
|
||||
- `{Options}` options 可选配置
|
||||
- `namespace?: string` 自定义命名空间
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
移除指定的存储项
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
// 移除默认命名空间下的存储项
|
||||
storageService.removeItem('myKey');
|
||||
|
||||
// 移除自定义命名空间下的存储项
|
||||
storageService.removeItem('key', { namespace: 'custom' });
|
||||
```
|
||||
|
||||
## setItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- `{string}` key 存储项的键名
|
||||
- `{any}` value 要存储的值
|
||||
- `{Options}` options 可选配置
|
||||
- `namespace?: string` 自定义命名空间
|
||||
- `protocol?: Protocol` 数据协议类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置存储项，自动序列化复杂数据类型
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService, Protocol } from '@tmagic/editor';
|
||||
|
||||
// 存储字符串
|
||||
storageService.setItem('name', 'tmagic');
|
||||
|
||||
// 存储对象
|
||||
storageService.setItem('config', { a: 1, b: 2 }, { protocol: Protocol.OBJECT });
|
||||
|
||||
// 存储数字
|
||||
storageService.setItem('count', 100, { protocol: Protocol.NUMBER });
|
||||
|
||||
// 使用自定义命名空间
|
||||
storageService.setItem('key', 'value', { namespace: 'custom' });
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 storageService，移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.destroy();
|
||||
```
|
||||
|
||||
## use
|
||||
|
||||
使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.use({
|
||||
getItem(key, options, next) {
|
||||
console.log('获取存储项:', key);
|
||||
return next();
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## usePlugin
|
||||
|
||||
- **详情：**
|
||||
@ -120,9 +256,35 @@
|
||||
|
||||
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.usePlugin({
|
||||
beforeSetItem(key, value, options) {
|
||||
console.log('设置前:', key, value);
|
||||
return [key, value, options];
|
||||
},
|
||||
|
||||
afterGetItem(result, key, options) {
|
||||
console.log('获取后:', result);
|
||||
return result;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## removeAllPlugins
|
||||
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.removeAllPlugins();
|
||||
```
|
||||
|
||||
|
||||
@ -1,12 +1,89 @@
|
||||
# uiService方法
|
||||
|
||||
## set
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{keyof UiState}` name 状态键名
|
||||
- `{any}` value 状态值
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置UI服务的状态
|
||||
|
||||
可用的状态键：
|
||||
- `uiSelectMode`: UI选择模式
|
||||
- `showSrc`: 是否显示源码
|
||||
- `showStylePanel`: 是否显示样式面板
|
||||
- `zoom`: 缩放比例
|
||||
- `stageContainerRect`: 画布容器尺寸
|
||||
- `stageRect`: 画布尺寸
|
||||
- `columnWidth`: 列宽度配置
|
||||
- `showGuides`: 是否显示参考线
|
||||
- `showRule`: 是否显示标尺
|
||||
- `propsPanelSize`: 属性面板尺寸
|
||||
- `showAddPageButton`: 是否显示添加页面按钮
|
||||
- `showPageListButton`: 是否显示页面列表按钮
|
||||
- `hideSlideBar`: 是否隐藏侧边栏
|
||||
- `sideBarItems`: 侧边栏项目
|
||||
- `navMenuRect`: 导航菜单尺寸
|
||||
- `frameworkRect`: 框架尺寸
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
// 设置缩放比例
|
||||
uiService.set('zoom', 1.5);
|
||||
|
||||
// 设置画布尺寸
|
||||
uiService.set('stageRect', { width: 375, height: 667 });
|
||||
|
||||
// 显示/隐藏参考线
|
||||
uiService.set('showGuides', true);
|
||||
|
||||
// 显示/隐藏标尺
|
||||
uiService.set('showRule', true);
|
||||
```
|
||||
|
||||
## get
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{keyof UiState}` name 状态键名
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{any}` 对应的状态值
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取UI服务的状态值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
const zoom = uiService.get('zoom');
|
||||
console.log('当前缩放:', zoom);
|
||||
|
||||
const stageRect = uiService.get('stageRect');
|
||||
console.log('画布尺寸:', stageRect);
|
||||
```
|
||||
|
||||
## zoom
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number}` zoom 缩放倍数
|
||||
- `{number}` zoom 缩放增量（可以为负数）
|
||||
|
||||
- **返回：**
|
||||
|
||||
@ -14,24 +91,111 @@
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置缩放倍数，最小为0.1
|
||||
调整缩放倍数，最小为0.1
|
||||
|
||||
传入的值会被累加到当前缩放倍数上
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
// 放大0.1倍
|
||||
await uiService.zoom(0.1);
|
||||
|
||||
// 缩小0.1倍
|
||||
await uiService.zoom(-0.1);
|
||||
|
||||
// 当前缩放如果是1.0，执行zoom(0.5)后变为1.5
|
||||
await uiService.zoom(0.5);
|
||||
```
|
||||
|
||||
## calcZoom
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<number>}`
|
||||
- `{Promise<number>}` 计算出的缩放倍数
|
||||
|
||||
- **详情：**
|
||||
|
||||
计算出缩放以适应的倍数
|
||||
计算"缩放以适应"的倍数
|
||||
|
||||
根据画布容器的尺寸和画布尺寸自动计算出合适的缩放比例，使画布完全显示在容器内
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
const fitZoom = await uiService.calcZoom();
|
||||
console.log('适应缩放:', fitZoom);
|
||||
|
||||
// 应用缩放以适应
|
||||
uiService.set('zoom', fitZoom);
|
||||
```
|
||||
|
||||
## resetState
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置UI服务状态到初始值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.resetState();
|
||||
```
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 uiService，重置状态并移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.destroy();
|
||||
```
|
||||
|
||||
## use
|
||||
|
||||
使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.use({
|
||||
async zoom(value, next) {
|
||||
console.log('缩放前:', uiService.get('zoom'));
|
||||
await next();
|
||||
console.log('缩放后:', uiService.get('zoom'));
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## usePlugin
|
||||
|
||||
- **详情：**
|
||||
@ -40,9 +204,36 @@
|
||||
|
||||
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.usePlugin({
|
||||
beforeZoom(value) {
|
||||
console.log('缩放增量:', value);
|
||||
return [value];
|
||||
},
|
||||
|
||||
afterCalcZoom(result) {
|
||||
console.log('计算的缩放:', result);
|
||||
// 可以修改返回值
|
||||
return result;
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## removeAllPlugins
|
||||
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { uiService } from '@tmagic/editor';
|
||||
|
||||
uiService.removeAllPlugins();
|
||||
```
|
||||
|
||||
|
||||
@ -2,14 +2,109 @@
|
||||
|
||||
## sort-change
|
||||
|
||||
- **参数：**
|
||||
- `{ column, prop, order }` - 排序信息对象
|
||||
- `column: Object` - 排序的列配置
|
||||
- `prop: string` - 排序的列属性名
|
||||
- `order: 'ascending' | 'descending' | null` - 排序方式
|
||||
|
||||
- **说明：** 当表格的排序条件发生变化时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleSortChange = ({ column, prop, order }) => {
|
||||
console.log('排序变化:', prop, order);
|
||||
};
|
||||
```
|
||||
|
||||
## after-action
|
||||
|
||||
- **参数：**
|
||||
- `action: string` - 操作类型
|
||||
- `data: any` - 操作相关数据
|
||||
|
||||
- **说明：** 表格操作完成后触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleAfterAction = (action, data) => {
|
||||
console.log('操作完成:', action, data);
|
||||
};
|
||||
```
|
||||
|
||||
## select
|
||||
|
||||
- **参数：**
|
||||
- `selection: Array<any>` - 当前选中的行数据数组
|
||||
- `row: any` - 刚刚被选中的行数据
|
||||
|
||||
- **说明：** 当用户手动勾选某一行时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleSelect = (selection, row) => {
|
||||
console.log('选中行:', row);
|
||||
console.log('当前选中:', selection);
|
||||
};
|
||||
```
|
||||
|
||||
## select-all
|
||||
|
||||
- **参数：**
|
||||
- `selection: Array<any>` - 当前选中的行数据数组
|
||||
|
||||
- **说明：** 当用户手动勾选全选 Checkbox 时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleSelectAll = (selection) => {
|
||||
console.log('全选/取消全选:', selection.length);
|
||||
};
|
||||
```
|
||||
|
||||
## selection-change
|
||||
|
||||
- **参数：**
|
||||
- `selection: Array<any>` - 当前选中的行数据数组
|
||||
|
||||
- **说明：** 当选择项发生变化时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleSelectionChange = (selection) => {
|
||||
console.log('选中项变化:', selection);
|
||||
};
|
||||
```
|
||||
|
||||
## expand-change
|
||||
|
||||
- **参数：**
|
||||
- `row: any` - 被展开/收起的行数据
|
||||
- `expandedRows: Array<any>` - 当前所有展开的行数据数组
|
||||
|
||||
- **说明：** 当用户展开或收起某一行时触发（用于可展开表格）
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleExpandChange = (row, expandedRows) => {
|
||||
console.log('展开状态变化:', row);
|
||||
console.log('当前展开行:', expandedRows);
|
||||
};
|
||||
```
|
||||
|
||||
## cell-click
|
||||
|
||||
- **参数：**
|
||||
- `row: any` - 行数据
|
||||
- `column: Object` - 列配置
|
||||
- `cell: HTMLElement` - 单元格 DOM 元素
|
||||
- `event: Event` - 原生事件对象
|
||||
|
||||
- **说明：** 当某个单元格被点击时触发
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
const handleCellClick = (row, column, cell, event) => {
|
||||
console.log('单元格点击:', row, column.property);
|
||||
};
|
||||
```
|
||||
|
||||
@ -2,6 +2,40 @@
|
||||
|
||||
## toggleRowSelection
|
||||
|
||||
- **参数：**
|
||||
- `row: any` - 要切换选中状态的行数据
|
||||
- `selected?: boolean` - 是否选中，不传则切换当前状态
|
||||
|
||||
- **说明：** 切换某一行的选中状态
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
tableRef.value.toggleRowSelection(row, true); // 选中
|
||||
tableRef.value.toggleRowSelection(row, false); // 取消选中
|
||||
tableRef.value.toggleRowSelection(row); // 切换状态
|
||||
```
|
||||
|
||||
## toggleRowExpansion
|
||||
|
||||
- **参数：**
|
||||
- `row: any` - 要展开/收起的行数据
|
||||
- `expanded?: boolean` - 是否展开，不传则切换当前状态
|
||||
|
||||
- **说明：** 切换某一行的展开状态（用于可展开表格）
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
tableRef.value.toggleRowExpansion(row, true); // 展开
|
||||
tableRef.value.toggleRowExpansion(row, false); // 收起
|
||||
```
|
||||
|
||||
## clearSelection
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **说明：** 清空所有选中的行
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
tableRef.value.clearSelection();
|
||||
```
|
||||
|
||||
@ -2,123 +2,122 @@
|
||||
|
||||
## data
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 表格数据，数组格式
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **类型：** `Array<any>`
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
[
|
||||
{ id: 1, name: '张三', age: 20 },
|
||||
{ id: 2, name: '李四', age: 25 }
|
||||
]
|
||||
```
|
||||
|
||||
## columns
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 表格列配置
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **类型：** `Array<ColumnConfig>`
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
[
|
||||
{ prop: 'name', label: '姓名', width: 120 },
|
||||
{ prop: 'age', label: '年龄', width: 80 }
|
||||
]
|
||||
```
|
||||
|
||||
## spanMethod
|
||||
|
||||
- **详情：** 合并行或列的计算方法
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `Function`
|
||||
|
||||
- **参数：**
|
||||
- `{ row, column, rowIndex, columnIndex }`
|
||||
|
||||
- **返回值：** `[rowspan, colspan]` 或 `{ rowspan, colspan }`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **示例：**
|
||||
```js
|
||||
({ rowIndex, columnIndex }) => {
|
||||
if (rowIndex % 2 === 0) {
|
||||
if (columnIndex === 0) {
|
||||
return [1, 2];
|
||||
} else if (columnIndex === 1) {
|
||||
return [0, 0];
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## loading
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 是否显示加载状态
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## showHeader
|
||||
|
||||
- **详情：** 是否显示表头
|
||||
|
||||
- **默认值：** `true`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **类型：** `boolean`
|
||||
|
||||
## bodyHeight
|
||||
|
||||
- **详情：** Table的最大高度。合法的值为数字或者单位为 px 的高度
|
||||
- **详情：** Table 的最大高度。合法的值为数字或者单位为 px 的高度
|
||||
|
||||
- **默认值：**
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **示例：**
|
||||
```js
|
||||
bodyHeight: 400
|
||||
bodyHeight: '400px'
|
||||
```
|
||||
|
||||
## emptyText
|
||||
|
||||
- **详情：** 空数据时显示的文本内容
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
- **默认值：** `'暂无数据'`
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
## defaultExpandAll
|
||||
|
||||
- **详情：** 是否默认展开所有行，当Table包含展开行存在或者为树形表格时有效
|
||||
- **详情：** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## rowkeyName
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 行数据的 Key，用来优化 Table 的渲染
|
||||
|
||||
- **默认值：** `'id'`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
- **类型：** `string`
|
||||
|
||||
- **说明：** 在使用 reserve-selection 功能与显示树形数据时，该属性是必填的
|
||||
|
||||
## border
|
||||
|
||||
- **详情：**
|
||||
|
||||
- **详情：** 是否显示边框
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
@ -62,6 +62,59 @@ MenuButton 的[定义](https://github.com/Tencent/tmagic-editor/blob/239b5d3efea
|
||||
|
||||
### 二、左侧菜单栏
|
||||
|
||||
左侧菜单栏主要展示组件列表、组件树、代码块、数据源等内容。可以通过 `m-editor` 组件的 [sidebar](/api/editor/props.html#sidebar) `prop` 来进行配置。
|
||||
|
||||
#### 1. 自定义左侧面板
|
||||
|
||||
可以使用 `sidebar` slot 来完全自定义左侧面板：
|
||||
|
||||
```html
|
||||
<m-editor>
|
||||
<template #sidebar>
|
||||
<your-sidebar></your-sidebar>
|
||||
</template>
|
||||
</m-editor>
|
||||
```
|
||||
|
||||
#### 2. 扩展组件列表
|
||||
|
||||
通过 [componentGroupList](/api/editor/props.html#componentgrouplist) prop 配置组件分组和列表：
|
||||
|
||||
```js
|
||||
const componentGroupList = [
|
||||
{
|
||||
title: '基础组件',
|
||||
items: [
|
||||
{
|
||||
text: '文本',
|
||||
type: 'text',
|
||||
icon: 'text-icon'
|
||||
},
|
||||
{
|
||||
text: '按钮',
|
||||
type: 'button',
|
||||
icon: 'button-icon'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '业务组件',
|
||||
items: [
|
||||
// 自定义业务组件
|
||||
]
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 3. 组件树扩展
|
||||
|
||||
组件树会自动根据页面配置生成，可以通过 `editorService` 监听组件树相关事件：
|
||||
|
||||
```js
|
||||
editorService.on('select', (node) => {
|
||||
console.log('选中组件:', node);
|
||||
});
|
||||
```
|
||||
|
||||
### 三、右侧属性配置栏
|
||||
|
||||
@ -118,6 +171,50 @@ propsService.usePlugin({
|
||||
</m-editor>
|
||||
```
|
||||
|
||||
### 四、中间工作区域
|
||||
|
||||
## 行为扩展
|
||||
|
||||
### 二、服务扩展
|
||||
|
||||
可以通过监听事件和使用插件来扩展 EditorService：
|
||||
|
||||
```js
|
||||
// 监听编辑器事件
|
||||
editorService.on('add', (node) => {
|
||||
console.log('添加组件:', node);
|
||||
});
|
||||
|
||||
// 使用插件扩展
|
||||
editorService.usePlugin({
|
||||
beforeAdd(node) {
|
||||
// 在添加组件前执行
|
||||
return node;
|
||||
},
|
||||
afterAdd(node) {
|
||||
// 在添加组件后执行
|
||||
return node;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 2. PropsService 扩展
|
||||
|
||||
自定义属性配置的处理逻辑：
|
||||
|
||||
```js
|
||||
propsService.usePlugin({
|
||||
// 修改属性配置
|
||||
beforeGetPropsConfig(type) {
|
||||
console.log('获取配置前:', type);
|
||||
},
|
||||
|
||||
afterGetPropsConfig(config, type) {
|
||||
// 添加自定义配置
|
||||
return config;
|
||||
},
|
||||
|
||||
// 自定义配置填充逻辑
|
||||
afterFillConfig(config, type) {
|
||||
return config;
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user