mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-06 03:57:56 +08:00
docs: 补充数据源相关props
This commit is contained in:
parent
5880dfbe15
commit
ae0b206c4c
31
docs/api/editor/dataSourceServiceMethods.md
Normal file
31
docs/api/editor/dataSourceServiceMethods.md
Normal file
@ -0,0 +1,31 @@
|
||||
# dataSourceService方法
|
||||
|
||||
## get
|
||||
|
||||
## getFormConfig
|
||||
|
||||
## setFormConfig
|
||||
|
||||
## getFormValue
|
||||
|
||||
## setFormValue
|
||||
|
||||
## getFormEvent
|
||||
|
||||
## setFormEvent
|
||||
|
||||
## getFormMethod
|
||||
|
||||
## setFormMethod
|
||||
|
||||
## add
|
||||
|
||||
## update
|
||||
|
||||
## remove
|
||||
|
||||
## getDataSourceById
|
||||
|
||||
## resetState
|
||||
|
||||
## destroy
|
@ -49,7 +49,7 @@ const dsl = ref({
|
||||
|
||||
- **默认值:** `[]`
|
||||
|
||||
- **类型:** [ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L279-L284)
|
||||
- **类型:** [ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)
|
||||
|
||||
::: tip
|
||||
icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/icon.html)
|
||||
@ -60,6 +60,19 @@ icon使用的是[element-plus icon](https://element-plus.org/zh-CN/component/ico
|
||||
icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png'
|
||||
}
|
||||
```
|
||||
url支持相对路径或者绝对路径,例如
|
||||
```js
|
||||
{
|
||||
icon: './icon.png'
|
||||
}
|
||||
{
|
||||
icon: '/icon.png'
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
:::warning
|
||||
请注意如果只是文件名的话是不行的,会被认为是css class
|
||||
:::
|
||||
|
||||
- **示例:**
|
||||
@ -107,6 +120,39 @@ const componentGroupList = ref([
|
||||
此配置仅在[sidebar](#sidebar)中配置了'component-list'时有效
|
||||
:::
|
||||
|
||||
## datasourceList
|
||||
|
||||
- **详情:**
|
||||
|
||||
左侧数据源面板中可新增的自定义数据源列表
|
||||
|
||||
- **默认值:** `[]`
|
||||
|
||||
- **类型:** [DatasourceTypeOption](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L589)
|
||||
|
||||
- **示例:**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :datasource-list="datasourceTypeList"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const datasourceTypeList = ref([
|
||||
{
|
||||
type: 'http',
|
||||
text: 'Http数据源'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
系统默认已提供了base,http两种基础数据源,此处配置的使用者新增的数据源
|
||||
:::
|
||||
|
||||
## sidebar
|
||||
|
||||
- **详情:**
|
||||
@ -514,6 +560,92 @@ const eventMethodList = {
|
||||
</script>
|
||||
```
|
||||
|
||||
## datasourceValues
|
||||
|
||||
- **详情:**
|
||||
|
||||
与 `propsValues` 类似,新增数据源时的默认值
|
||||
|
||||
:::tip
|
||||
该属性最终会设置到[dataSourceService](./dataSourceServiceMethods.md)中,所以也可直接调用[dataSourceService.setFormValue()](./dataSourceServiceMethods.md#setFormValue)方法来配置
|
||||
:::
|
||||
|
||||
- **默认值:** `{}`
|
||||
|
||||
- **类型:** Record<string, Partial<[DataSourceSchema](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/schema/src/index.ts#L221)>>
|
||||
|
||||
- **示例:**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :datasource-values="datasourceValues"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const datasourceValues = {
|
||||
'user-info': {
|
||||
type: 'user-info',
|
||||
title: '用户信息',
|
||||
description: '用户信息',
|
||||
fields: [
|
||||
{
|
||||
type: 'string',
|
||||
name: 'nick',
|
||||
title: '昵称',
|
||||
defaultValue: '请登录',
|
||||
enable: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## datasourceConfigs
|
||||
|
||||
- **详情:**
|
||||
|
||||
与 `propsConfigs` 类似,数据源的属性配置[表单的dsl](../../form-config/fields/text.md)
|
||||
|
||||
:::tip
|
||||
该属性最终会设置到[dataSourceService](./dataSourceServiceMethods.md)中,所以也可直接调用[dataSourceService.setFormConfig()](./dataSourceServiceMethods.md#setFormConfig)方法来配置
|
||||
:::
|
||||
|
||||
- **默认值:** `{}`
|
||||
|
||||
- **类型:** Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L706)>
|
||||
|
||||
- **示例:**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor :datasource-configs="datasourceConfigs"></m-editor>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const datasourceConfigs = {
|
||||
'user-info': [
|
||||
{
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
text: '类型',
|
||||
options: [
|
||||
{ text: 'qq', value: 'qq'}
|
||||
]
|
||||
}
|
||||
],
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## datasourceEventMethodList
|
||||
|
||||
- **详情:**
|
||||
|
||||
组件属性配置中事件tab中的事件名与动作的下拉选项列表
|
||||
|
||||
- **默认值:** `{}`
|
||||
|
||||
## moveableOptions
|
||||
|
||||
- **详情:**
|
||||
|
@ -73,4 +73,4 @@ DSL 是编辑器搭建页面的最终产物(描述文件),其中包含了
|
||||
|
||||
### 组件联动
|
||||
组件 A 在完成点击事件后,希望组件 B 可以展示一个弹窗,就是组件联动的一个示例。tmagic-editor通过事件绑定方式,可以为组件 A 和 B 配置事件关联,实现上述的组件联动。
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-37_723692309_1636032154483681" alt="组件联动">
|
||||
<img src="https://vip.image.video.qpic.cn/vupload/20231027/3e02d31698914788006.png" alt="组件联动">
|
||||
|
@ -2,6 +2,7 @@
|
||||
"version": "1.3.0-beta.7",
|
||||
"name": "tmagic",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"packageManager": "pnpm@8.2.0",
|
||||
"scripts": {
|
||||
"bootstrap": "pnpm i && pnpm build",
|
||||
@ -42,8 +43,8 @@
|
||||
"devDependencies": {
|
||||
"@algolia/client-search": ">= 4.9.1 < 6",
|
||||
"@babel/core": "^7.18.0",
|
||||
"@commitlint/cli": "^16.2.3",
|
||||
"@commitlint/config-conventional": "^16.2.1",
|
||||
"@commitlint/cli": "^18.2.0",
|
||||
"@commitlint/config-conventional": "^18.1.0",
|
||||
"@types/node": "^18.15.11",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.1",
|
||||
"@typescript-eslint/parser": "^5.57.1",
|
||||
@ -52,7 +53,7 @@
|
||||
"c8": "^7.11.3",
|
||||
"chalk": "^4.1.0",
|
||||
"commitizen": "^4.3.0",
|
||||
"conventional-changelog-cli": "^2.2.2",
|
||||
"conventional-changelog-cli": "^4.1.0",
|
||||
"cz-conventional-changelog": "^3.3.0",
|
||||
"element-plus": "^2.2.32",
|
||||
"enquirer": "^2.3.6",
|
||||
@ -76,7 +77,7 @@
|
||||
"shx": "^0.3.4",
|
||||
"typescript": "^5.0.4",
|
||||
"vite": "^4.4.4",
|
||||
"vitepress": "1.0.0-beta.1",
|
||||
"vitepress": "1.0.0-rc.24",
|
||||
"vitest": "^0.31.1",
|
||||
"vue": "^3.3.4"
|
||||
},
|
||||
|
1440
pnpm-lock.yaml
generated
1440
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user