4
0
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:
roymondchen 2023-11-02 17:07:06 +08:00
parent 5880dfbe15
commit ae0b206c4c
6 changed files with 998 additions and 618 deletions

@ -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

File diff suppressed because it is too large Load Diff