mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-03-14 15:50:48 +00:00
Compare commits
1 Commits
master
...
v1.0.0-rc.
| Author | SHA1 | Date | |
|---|---|---|---|
|
d9f6ca25a0 |
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
@ -0,0 +1,3 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
10
.eslintignore
Normal file
10
.eslintignore
Normal file
@ -0,0 +1,10 @@
|
||||
dist
|
||||
coverage
|
||||
node_modules
|
||||
dest
|
||||
|
||||
comp-entry.ts
|
||||
config-entry.ts
|
||||
value-entry.ts
|
||||
|
||||
magic-admin/web/public/runtime
|
||||
69
.eslintrc.js
Normal file
69
.eslintrc.js
Normal file
@ -0,0 +1,69 @@
|
||||
module.exports = {
|
||||
env: {
|
||||
node: true,
|
||||
browser: true,
|
||||
es2021: true,
|
||||
},
|
||||
globals: {
|
||||
describe: true,
|
||||
it: true,
|
||||
expect: true,
|
||||
jest: true,
|
||||
beforeEach: true,
|
||||
},
|
||||
extends: [
|
||||
'eslint-config-tencent',
|
||||
'eslint-config-tencent/ts',
|
||||
'plugin:vue/vue3-essential',
|
||||
'eslint-config-tencent/prettier',
|
||||
],
|
||||
parser: 'vue-eslint-parser',
|
||||
parserOptions: {
|
||||
ecmaVersion: 12,
|
||||
parser: '@typescript-eslint/parser',
|
||||
extraFileExtensions: ['.vue'],
|
||||
sourceType: 'module',
|
||||
},
|
||||
plugins: [
|
||||
'vue',
|
||||
'@typescript-eslint',
|
||||
'simple-import-sort'
|
||||
],
|
||||
ignorePatterns: ['.eslintrc.js'],
|
||||
rules: {
|
||||
'vue/no-mutating-props': 'off',
|
||||
'no-param-reassign': 'off',
|
||||
'@typescript-eslint/no-require-imports': 'off',
|
||||
"@typescript-eslint/no-misused-promises": [
|
||||
"error",
|
||||
{
|
||||
"checksVoidReturn": false
|
||||
}
|
||||
],
|
||||
'simple-import-sort/imports': [
|
||||
"error", {
|
||||
groups: [
|
||||
['./polyfills'],
|
||||
// Node.js builtins. You could also generate this regex if you use a `.js` config.
|
||||
// For example: `^(${require("module").builtinModules.join("|")})(/|$)`
|
||||
[
|
||||
"^(assert|buffer|child_process|cluster|console|constants|crypto|dgram|dns|domain|events|fs|http|https|module|net|os|path|punycode|querystring|readline|repl|stream|string_decoder|sys|timers|tls|tty|url|util|vm|zlib|freelist|v8|process|async_hooks|http2|perf_hooks)(/.*|$)",
|
||||
],
|
||||
// Packages. `react|vue` related packages come first.
|
||||
["^(react|vue|vite)", "^@?\\w"],
|
||||
["^(@tmagic)(/.*|$)"],
|
||||
// Internal packages.
|
||||
["^(@|@editor)(/.*|$)"],
|
||||
// Side effect imports.
|
||||
["^\\u0000"],
|
||||
// Parent imports. Put `..` last.
|
||||
["^\\.\\.(?!/?$)", "^\\.\\./?$"],
|
||||
// Other relative imports. Put same-folder imports and `.` last.
|
||||
["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
|
||||
// Style imports.
|
||||
["^.+\\.s?css$"],
|
||||
],
|
||||
}
|
||||
]
|
||||
},
|
||||
};
|
||||
38
.github/ISSUE_TEMPLATE/bug_report.md
vendored
38
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@ -1,38 +0,0 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Describe the bug**
|
||||
A clear and concise description of what the bug is.
|
||||
|
||||
**To Reproduce**
|
||||
Steps to reproduce the behavior:
|
||||
1. Go to '...'
|
||||
2. Click on '....'
|
||||
3. Scroll down to '....'
|
||||
4. See error
|
||||
|
||||
**Expected behavior**
|
||||
A clear and concise description of what you expected to happen.
|
||||
|
||||
**Screenshots**
|
||||
If applicable, add screenshots to help explain your problem.
|
||||
|
||||
**Desktop (please complete the following information):**
|
||||
- OS: [e.g. iOS]
|
||||
- Browser [e.g. chrome, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Smartphone (please complete the following information):**
|
||||
- Device: [e.g. iPhone6]
|
||||
- OS: [e.g. iOS8.1]
|
||||
- Browser [e.g. stock browser, safari]
|
||||
- Version [e.g. 22]
|
||||
|
||||
**Additional context**
|
||||
Add any other context about the problem here.
|
||||
20
.github/ISSUE_TEMPLATE/feature_request.md
vendored
20
.github/ISSUE_TEMPLATE/feature_request.md
vendored
@ -1,20 +0,0 @@
|
||||
---
|
||||
name: Feature request
|
||||
about: Suggest an idea for this project
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
**Is your feature request related to a problem? Please describe.**
|
||||
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||
|
||||
**Describe the solution you'd like**
|
||||
A clear and concise description of what you want to happen.
|
||||
|
||||
**Describe alternatives you've considered**
|
||||
A clear and concise description of any alternative solutions or features you've considered.
|
||||
|
||||
**Additional context**
|
||||
Add any other context or screenshots about the feature request here.
|
||||
50
.github/workflows/pages.yml
vendored
50
.github/workflows/pages.yml
vendored
@ -1,50 +0,0 @@
|
||||
name: pages
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [dev]
|
||||
workflow_dispatch:
|
||||
|
||||
jobs:
|
||||
pages:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0
|
||||
ref: dev
|
||||
|
||||
- name: Install pnpm
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Set node version to 22
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 22
|
||||
cache: 'pnpm'
|
||||
|
||||
- run: pnpm bootstrap
|
||||
|
||||
- name: Build VuePress site
|
||||
run: npm run docs:build
|
||||
|
||||
- name: Build Playground site
|
||||
run: npm run build:playground
|
||||
|
||||
- name: clean dist
|
||||
run: rm -rf dist
|
||||
|
||||
- name: mkdir dist
|
||||
run: mkdir dist && mkdir dist/docs && mkdir dist/playground
|
||||
|
||||
- name: move to dist
|
||||
run: mv docs/.vitepress/dist/* dist/docs && mv playground/dist/* dist/playground
|
||||
|
||||
- name: Deploy to GitHub Pages
|
||||
uses: crazy-max/ghaction-github-pages@v2
|
||||
with:
|
||||
target_branch: gh-pages
|
||||
build_dir: dist
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
||||
12
.gitignore
vendored
12
.gitignore
vendored
@ -1,11 +1,6 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
types
|
||||
|
||||
.temp
|
||||
.cache
|
||||
temp
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
@ -27,10 +22,3 @@ pnpm-debug.log*
|
||||
*.sw?
|
||||
|
||||
coverage
|
||||
|
||||
auto-imports.d.ts
|
||||
components.d.ts
|
||||
docs/.vitepress/cache
|
||||
|
||||
.eslintcache
|
||||
.npmrc
|
||||
|
||||
@ -1 +1,4 @@
|
||||
npx --no-install commitlint --edit $1
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npx --no-install commitlint --edit $1
|
||||
|
||||
@ -1 +1,4 @@
|
||||
npx lint-staged && npm run check:type
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npx lint-staged
|
||||
|
||||
@ -1 +1,4 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npm test
|
||||
|
||||
3333
CHANGELOG.md
3333
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
@ -32,7 +32,7 @@ $ git clone git@github.com:<yourname>/tmagic-editor.git
|
||||
```bash
|
||||
$ git remote add <name> <url>
|
||||
# 例如：
|
||||
$ git remote add tmagic git@github.com:Tencent/tmagic-editor.git
|
||||
$ git remote add wepy git@github.com:Tencent/tmagic-editor.git
|
||||
```
|
||||
|
||||
#### 保持与 tmagic-editor 仓库的同步
|
||||
|
||||
2
LICENSE
2
LICENSE
@ -1,6 +1,6 @@
|
||||
Tencent is pleased to support the open source community by making TMagicEditor available.
|
||||
|
||||
Copyright (C) 2025 Tencent. All rights reserved.
|
||||
Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
||||
|
||||
TMagicEditor is licensed under the Apache License Version 2.0 except for the third-party components listed below.
|
||||
|
||||
|
||||
27
README.md
27
README.md
@ -16,20 +16,18 @@ https://tencent.github.io/tmagic-editor/playground/index.html
|
||||
|
||||
## 环境准备
|
||||
|
||||
node.js >= 18
|
||||
node.js > 14
|
||||
|
||||
pnpm >= 9
|
||||
|
||||
先安装 pnpm
|
||||
先安装lerna
|
||||
|
||||
```bash
|
||||
$ npm install -g pnpm
|
||||
$ npm install -g lerna
|
||||
```
|
||||
|
||||
然后安装依赖
|
||||
|
||||
```bash
|
||||
$ pnpm bootstrap
|
||||
$ npm run bootstrap
|
||||
```
|
||||
|
||||
## 运行项目
|
||||
@ -37,19 +35,15 @@ $ pnpm bootstrap
|
||||
执行命令
|
||||
|
||||
```bash
|
||||
$ pnpm playground
|
||||
$ npm run playground
|
||||
```
|
||||
|
||||
最后在浏览器中打开
|
||||
|
||||
http://localhost:8098/tmagic-editor/playground/
|
||||
http://localhost:8098/
|
||||
|
||||
即可得到一个魔方编辑器示例项目
|
||||
|
||||
## magic-admin
|
||||
|
||||
已迁移至 https://github.com/vft-magic/tmagic-admin
|
||||
|
||||
## 项目介绍
|
||||
在本项目中，我们核心内容，是包含在 `packages/editor` 中的编辑器，以及 `runtime` 和 `packages/ui` 提供的各个前端框架相关的 runtime 和 ui。
|
||||
|
||||
@ -77,19 +71,10 @@ runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出
|
||||
### 使用
|
||||
playground 的示例项目，就是为开发者提供的基础应用示例。开发者可以基于此或者参考自行实现，搭建一个基于魔方的可视化搭建平台。
|
||||
|
||||
tmagic-editor主要定位是搭建生成移动端H5页面，如果有搭建PC端低代码平台的需求，可以了解一下腾讯出品的另外一个低代码平台：[无极低代码平台](https://wujicode.cn?from=tmagic)。
|
||||
|
||||
### 参与贡献
|
||||
|
||||
如果你有好的意见或建议，欢迎给我们提 Issues 或 Pull Requests，为提升魔方可视化编辑器开发体验贡献力量。<br>详见：[CONTRIBUTING.md](./CONTRIBUTING.md)
|
||||
|
||||
## 贡献者
|
||||
|
||||
<a href="https://github.com/Tencent/tmagic-editor/graphs/contributors">
|
||||
<img src="https://contrib.rocks/image?repo=Tencent/tmagic-editor" />
|
||||
</a>
|
||||
|
||||
|
||||
### 欢迎入群交流
|
||||
|
||||
<img src="https://vfiles.gtimg.cn/vupload/20220412/b85d331649748582992.jpg" width=375>
|
||||
|
||||
3
babel.config.js
Normal file
3
babel.config.js
Normal file
@ -0,0 +1,3 @@
|
||||
module.exports = {
|
||||
presets: ['@vue/cli-plugin-babel/preset'],
|
||||
};
|
||||
@ -1 +1 @@
|
||||
export default { extends: ['@commitlint/config-conventional'] };
|
||||
module.exports = { extends: ['@commitlint/config-conventional'] };
|
||||
|
||||
3
docs/.gitignore
vendored
Normal file
3
docs/.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
node_modules
|
||||
.temp
|
||||
.cache
|
||||
@ -1,575 +0,0 @@
|
||||
import path from 'path';
|
||||
import { defineConfig } from 'vitepress'
|
||||
|
||||
export default defineConfig({
|
||||
title: 'tmagic-editor',
|
||||
description: '页面可视化平台',
|
||||
|
||||
base: '/tmagic-editor/docs/',
|
||||
|
||||
head: [
|
||||
['meta', { name: 'theme-color', content: '#646cff' }],
|
||||
],
|
||||
|
||||
themeConfig: {
|
||||
logo: './favicon.png',
|
||||
|
||||
search: {
|
||||
provider: 'local'
|
||||
},
|
||||
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/Tencent/tmagic-editor' }
|
||||
],
|
||||
|
||||
footer: {
|
||||
message: 'Powered by 腾讯视频会员平台技术中心',
|
||||
copyright: 'Copyright (C) 2025 Tencent.'
|
||||
},
|
||||
|
||||
nav: [
|
||||
{ text: '文档', link: '/guide/', activeMatch: '/guide/' },
|
||||
{ text: 'Editor API', link: '/api/editor/props', activeMatch: '/api/' },
|
||||
{ text: 'Runtime API', link: '/runtime-api/core/app', activeMatch: '/runtime-api/' },
|
||||
{ text: '表单配置', link: '/form-config/fields/text', activeMatch: '/form-config/' },
|
||||
{ text: '更新日志', link: 'https://github.com/Tencent/tmagic-editor/releases' },
|
||||
{ text: 'Playground', link: 'https://tencent.github.io/tmagic-editor/playground/index.html' },
|
||||
],
|
||||
|
||||
sidebar: {
|
||||
'/guide/': [
|
||||
{
|
||||
text: '文档',
|
||||
items: [
|
||||
{
|
||||
text: '介绍',
|
||||
link: '/guide/introduction.md'
|
||||
},
|
||||
{
|
||||
text: '快速开始',
|
||||
link: '/guide/'
|
||||
},
|
||||
{
|
||||
text: 'RUNTIME',
|
||||
link: '/guide/runtime.md'
|
||||
},
|
||||
{
|
||||
text: '组件开发',
|
||||
link: '/guide/component.md'
|
||||
},
|
||||
{
|
||||
text: '基础概念',
|
||||
link: '/guide/conception.md',
|
||||
},
|
||||
{
|
||||
text: '页面发布',
|
||||
link: '/guide/publish.md'
|
||||
},
|
||||
{
|
||||
text: '编辑器扩展',
|
||||
link: '/guide/editor-expand.md'
|
||||
},
|
||||
{
|
||||
text: '升级到1.5.x',
|
||||
link: '/guide/migration.md'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '进阶指南',
|
||||
items: [
|
||||
{
|
||||
text: 'JS Schema',
|
||||
link: '/guide/advanced/js-schema.md',
|
||||
},
|
||||
{
|
||||
text: '布局原理',
|
||||
link: '/guide/advanced/layout.md',
|
||||
},
|
||||
{
|
||||
text: '页面渲染',
|
||||
link: '/guide/advanced/page.md',
|
||||
},
|
||||
{
|
||||
text: '联动原理',
|
||||
link: '/guide/advanced/coupling.md',
|
||||
},
|
||||
{
|
||||
text: '代码块',
|
||||
link: '/guide/advanced/code-block.md',
|
||||
},
|
||||
{
|
||||
text: '数据源',
|
||||
link: '/guide/advanced/data-source.md'
|
||||
},
|
||||
{
|
||||
text: '@tmagic/ui',
|
||||
link: '/guide/advanced/tmagic-ui.md',
|
||||
},
|
||||
{
|
||||
text: '@tmagic/form',
|
||||
link: '/guide/advanced/tmagic-form.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '教程',
|
||||
items: [
|
||||
{
|
||||
text: '写在前面',
|
||||
link: '/guide/tutorial/'
|
||||
},
|
||||
{
|
||||
text: '1.Hello World',
|
||||
link: '/guide/tutorial/hello-world.md'
|
||||
},
|
||||
{
|
||||
text: '2.Runtime',
|
||||
link: '/guide/tutorial/runtime.md'
|
||||
},
|
||||
{
|
||||
text: '3.DSL解析渲染',
|
||||
link: '/guide/tutorial/render.md'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/api/': [
|
||||
{
|
||||
text: '编辑器',
|
||||
items: [
|
||||
{
|
||||
text: 'Editor组件',
|
||||
items: [
|
||||
{
|
||||
text: 'props',
|
||||
link: '/api/editor/props.md'
|
||||
},
|
||||
{
|
||||
text: 'slots',
|
||||
link: '/api/editor/slots.md'
|
||||
},
|
||||
{
|
||||
text: 'events',
|
||||
link: '/api/editor/events.md'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'editorService',
|
||||
items: [
|
||||
{
|
||||
text: '方法',
|
||||
link: '/api/editor/editorServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: '事件',
|
||||
link: '/api/editor/editorServiceEvents.md',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'propsService',
|
||||
items: [
|
||||
{
|
||||
text: '方法',
|
||||
link: '/api/editor/propsServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: '事件',
|
||||
link: '/api/editor/propsServiceEvents.md',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'historyService',
|
||||
items: [
|
||||
{
|
||||
text: '方法',
|
||||
link: '/api/editor/historyServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: '事件',
|
||||
link: '/api/editor/historyServiceEvents.md',
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
text: 'eventsService',
|
||||
link: '/api/editor/eventsServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: 'uiService',
|
||||
link: '/api/editor/uiServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: 'codeBlockService',
|
||||
link: '/api/editor/codeBlockServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: 'componentListService',
|
||||
link: '/api/editor/componentListServiceMethods.md',
|
||||
},
|
||||
{
|
||||
text: 'storageService',
|
||||
link: '/api/editor/storageServiceMethods.md',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '表单',
|
||||
items: [
|
||||
{
|
||||
text: 'Form组件',
|
||||
items: [
|
||||
{
|
||||
text: 'props',
|
||||
link: '/api/form/form-props'
|
||||
},
|
||||
{
|
||||
text: 'methods',
|
||||
link: '/api/form/form-methods'
|
||||
},
|
||||
{
|
||||
text: 'events',
|
||||
link: '/api/form/form-events'
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'FormDialog组件',
|
||||
items: [
|
||||
{
|
||||
text: 'props',
|
||||
link: '/api/form/form-dialog-props'
|
||||
},
|
||||
{
|
||||
text: 'methods',
|
||||
link: '/api/form/form-dialog-methods'
|
||||
},
|
||||
{
|
||||
text: 'events',
|
||||
link: '/api/form/form-dialog-events'
|
||||
},
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '表格',
|
||||
items: [
|
||||
{
|
||||
text: 'Table组件',
|
||||
items: [
|
||||
{
|
||||
text: 'props',
|
||||
link: '/api/table/props'
|
||||
},
|
||||
{
|
||||
text: 'methods',
|
||||
link: '/api/table/methods'
|
||||
},
|
||||
{
|
||||
text: 'events',
|
||||
link: '/api/table/events'
|
||||
},
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'stage',
|
||||
items: [
|
||||
{
|
||||
text: 'StageCore',
|
||||
items: [
|
||||
{
|
||||
text: '方法',
|
||||
link: '/api/stage/coreMethods',
|
||||
},
|
||||
{
|
||||
text: '事件',
|
||||
link: '/api/stage/coreEvents',
|
||||
}
|
||||
]
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
'/form-config/': [
|
||||
{
|
||||
text: '基础配置',
|
||||
items: [
|
||||
{
|
||||
text: 'Input输入框',
|
||||
link: '/form-config/fields/text.md'
|
||||
},
|
||||
{
|
||||
text: 'Textarea文本域',
|
||||
link: '/form-config/fields/textarea.md'
|
||||
},
|
||||
{
|
||||
text: 'InputNumber计数器',
|
||||
link: '/form-config/fields/number.md'
|
||||
},
|
||||
{
|
||||
text: 'NumberRange数字范围',
|
||||
link: '/form-config/fields/number-range.md'
|
||||
},
|
||||
{
|
||||
text: 'Display只读文本',
|
||||
link: '/form-config/fields/display.md'
|
||||
},
|
||||
{
|
||||
text: 'Hidden隐藏域',
|
||||
link: '/form-config/fields/hidden.md'
|
||||
},
|
||||
{
|
||||
text: 'Link链接',
|
||||
link: '/form-config/fields/link.md'
|
||||
},
|
||||
{
|
||||
text: 'Checkbox多选框',
|
||||
link: '/form-config/fields/checkbox.md'
|
||||
},
|
||||
{
|
||||
text: 'Radio单选框',
|
||||
link: '/form-config/fields/radio.md'
|
||||
},
|
||||
{
|
||||
text: 'Switch开关',
|
||||
link: '/form-config/fields/switch.md'
|
||||
},
|
||||
{
|
||||
text: 'Select选择器',
|
||||
link: '/form-config/fields/select.md'
|
||||
},
|
||||
{
|
||||
text: 'Cascader级联选择器',
|
||||
link: '/form-config/fields/cascader.md'
|
||||
},
|
||||
{
|
||||
text: 'ColorPicker颜色选择器',
|
||||
link: '/form-config/fields/color-picker.md'
|
||||
},
|
||||
{
|
||||
text: 'DatePick日期选择器',
|
||||
link: '/form-config/fields/date-picker.md'
|
||||
},
|
||||
{
|
||||
text: 'DateRangePick日期范围选择器',
|
||||
link: '/form-config/fields/daterange-picker.md'
|
||||
},
|
||||
{
|
||||
text: 'DatetimePick日期时间选择器',
|
||||
link: '/form-config/fields/datetime-picker.md'
|
||||
},
|
||||
{
|
||||
text: 'TimePick时间选择器',
|
||||
link: '/form-config/fields/time-picker.md'
|
||||
},
|
||||
{
|
||||
text: 'TimeRangePick时间范围选择器',
|
||||
link: '/form-config/fields/timerange-picker.md'
|
||||
},
|
||||
{
|
||||
text: 'DynamicField动态表单',
|
||||
link: '/form-config/fields/dynamic-field.md'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '编辑器中可用配置',
|
||||
items: [
|
||||
{
|
||||
text: 'Code代码编辑器',
|
||||
link: '/form-config/editor-fields/code.md'
|
||||
},
|
||||
{
|
||||
text: 'CodeLink代码链接',
|
||||
link: '/form-config/editor-fields/code-link.md'
|
||||
},
|
||||
{
|
||||
text: 'CodeSelect代码块选择器',
|
||||
link: '/form-config/editor-fields/code-select.md'
|
||||
},
|
||||
{
|
||||
text: 'CodeSelectCol代码块选择列',
|
||||
link: '/form-config/editor-fields/code-select-col.md'
|
||||
},
|
||||
{
|
||||
text: 'DataSourceSelect数据源选择器',
|
||||
link: '/form-config/editor-fields/data-source-select.md'
|
||||
},
|
||||
{
|
||||
text: 'DataSourceFieldSelect数据源字段选择器',
|
||||
link: '/form-config/editor-fields/data-source-field-select.md'
|
||||
},
|
||||
{
|
||||
text: 'DataSourceMethodSelect数据源方法选择器',
|
||||
link: '/form-config/editor-fields/data-source-method-select.md'
|
||||
},
|
||||
{
|
||||
text: 'DataSourceFields数据源字段配置',
|
||||
link: '/form-config/editor-fields/data-source-fields.md'
|
||||
},
|
||||
{
|
||||
text: 'DataSourceInput数据源输入框',
|
||||
link: '/form-config/editor-fields/data-source-input.md'
|
||||
},
|
||||
{
|
||||
text: 'DataSourceMethods数据源方法配置',
|
||||
link: '/form-config/editor-fields/data-source-methods.md'
|
||||
},
|
||||
{
|
||||
text: 'DataSourceMocks数据源Mock配置',
|
||||
link: '/form-config/editor-fields/data-source-mocks.md'
|
||||
},
|
||||
{
|
||||
text: 'UISelect组件选择器',
|
||||
link: '/form-config/editor-fields/ui-select.md'
|
||||
},
|
||||
{
|
||||
text: 'KeyValue键值对',
|
||||
link: '/form-config/editor-fields/key-value.md'
|
||||
},
|
||||
{
|
||||
text: 'PageFragmentSelect页面片选择器',
|
||||
link: '/form-config/editor-fields/page-fragment-select.md'
|
||||
},
|
||||
{
|
||||
text: 'EventSelect事件选择器',
|
||||
link: '/form-config/editor-fields/event-select.md'
|
||||
},
|
||||
{
|
||||
text: 'DisplayConds显示条件配置',
|
||||
link: '/form-config/editor-fields/display-conds.md'
|
||||
},
|
||||
{
|
||||
text: 'CondOpSelect条件操作选择器',
|
||||
link: '/form-config/editor-fields/cond-op-select.md'
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '布局配置',
|
||||
items: [
|
||||
{
|
||||
text: '布局',
|
||||
link: '/form-config/layout.md',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '联动配置',
|
||||
items: [
|
||||
{
|
||||
text: '联动',
|
||||
link: '/form-config/relate.md',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '表单对比',
|
||||
items: [
|
||||
{
|
||||
text: '表单对比',
|
||||
link: '/form-config/compare.md',
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'/runtime-api/': [
|
||||
{
|
||||
text: '@tmagic/core',
|
||||
items: [
|
||||
{
|
||||
text: 'App',
|
||||
link: '/runtime-api/core/app',
|
||||
},
|
||||
{
|
||||
text: 'Node',
|
||||
link: '/runtime-api/core/node',
|
||||
},
|
||||
{
|
||||
text: 'Page',
|
||||
link: '/runtime-api/core/page',
|
||||
},
|
||||
{
|
||||
text: 'EventHelper',
|
||||
link: '/runtime-api/core/eventHelper',
|
||||
},
|
||||
{
|
||||
text: 'Env',
|
||||
link: '/runtime-api/core/env',
|
||||
},
|
||||
{
|
||||
text: 'IteratorContainer',
|
||||
link: '/runtime-api/core/iteratorContainer',
|
||||
},
|
||||
{
|
||||
text: 'FlowState',
|
||||
link: '/runtime-api/core/flowState',
|
||||
},
|
||||
{
|
||||
text: 'DevtoolApi',
|
||||
link: '/runtime-api/core/devtoolApi',
|
||||
},
|
||||
{
|
||||
text: '工具函数',
|
||||
link: '/runtime-api/core/utils',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
text: '@tmagic/data-source',
|
||||
items: [
|
||||
{
|
||||
text: 'DataSourceManager',
|
||||
link: '/runtime-api/data-source/dataSourceManager',
|
||||
},
|
||||
{
|
||||
text: 'DataSource',
|
||||
link: '/runtime-api/data-source/dataSource',
|
||||
},
|
||||
{
|
||||
text: 'HttpDataSource',
|
||||
link: '/runtime-api/data-source/httpDataSource',
|
||||
},
|
||||
{
|
||||
text: '观察者数据类',
|
||||
link: '/runtime-api/data-source/observedData',
|
||||
},
|
||||
{
|
||||
text: '工具函数',
|
||||
link: '/runtime-api/data-source/utils',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
},
|
||||
},
|
||||
|
||||
vite: {
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
define: {
|
||||
global: 'globalThis',
|
||||
},
|
||||
},
|
||||
},
|
||||
resolve: {
|
||||
alias:[
|
||||
{ find: /^@tmagic\/form-schema/, replacement: path.join(__dirname, '../../packages/form-schema/src/index.ts') },
|
||||
{ find: /^@tmagic\/form/, replacement: path.join(__dirname, '../../packages/form/src/index.ts') },
|
||||
{ find: /^@tmagic\/utils/, replacement: path.join(__dirname, '../../packages/utils/src/index.ts') },
|
||||
{ find: /^@tmagic\/schema/, replacement: path.join(__dirname, '../../packages/schema/src/index.ts') },
|
||||
{ find: /^@tmagic\/design/, replacement: path.join(__dirname, '../../packages/design/src/index.ts') },
|
||||
{ find: /^@tmagic\/element-plus-adapter/, replacement: path.join(__dirname, '../../packages/element-plus-adapter/src/index.ts') },
|
||||
]
|
||||
},
|
||||
ssr: {
|
||||
noExternal: ['lodash-es'],
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,46 +0,0 @@
|
||||
import 'element-plus/dist/index.css';
|
||||
import 'highlight.js/styles/github.css';
|
||||
|
||||
import ElementPlus from 'element-plus';
|
||||
import Theme from 'vitepress/theme';
|
||||
|
||||
import TMagicDesign from '@tmagic/design';
|
||||
import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
|
||||
import MagicForm from '@tmagic/form';
|
||||
|
||||
import DemoBlock from './components/demo-block.vue';
|
||||
|
||||
import './styles/vars.css';
|
||||
|
||||
export default {
|
||||
...Theme,
|
||||
|
||||
enhanceApp({ app }) {
|
||||
app.use(ElementPlus);
|
||||
app.use(TMagicDesign, MagicElementPlusAdapter)
|
||||
app.use(MagicForm, {
|
||||
request: (options: any) => new Promise((resolve) => {
|
||||
if (options.url === 'select/remote') {
|
||||
setTimeout(() => {
|
||||
resolve({
|
||||
data: [
|
||||
{
|
||||
name: 'select-1',
|
||||
id: 1
|
||||
},
|
||||
{
|
||||
name: 'select-2',
|
||||
id: 2
|
||||
},
|
||||
],
|
||||
});
|
||||
}, 1000);
|
||||
} else {
|
||||
resolve({});
|
||||
}
|
||||
}),
|
||||
});
|
||||
|
||||
app.component('demo-block', DemoBlock);
|
||||
},
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
:root {
|
||||
--vp-c-brand: #2882e0;
|
||||
--vp-button-brand-border: #2882e0;
|
||||
--vp-button-brand-hover-border: #2882e0;
|
||||
--vp-c-brand-light: #559ce7;
|
||||
--vp-c-brand-lighter: #2882e0;
|
||||
--vp-c-brand-lightest: #2882e0;
|
||||
--vp-c-brand-dark: #2882e0;
|
||||
--vp-c-brand-darker: #2882e0;
|
||||
}
|
||||
@ -1,370 +0,0 @@
|
||||
# codeBlockService方法
|
||||
|
||||
|
||||
|
||||
## setCodeDsl
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeDsl
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeContentById
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCodeDslById
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeDslByIds
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCodeEditorShowStatus
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeEditorShowStatus
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCodeEditorContent
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCurrentDsl
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getEditStatus
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
## setEditStatus
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setId
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getId
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getMode
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setMode
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCombineIds
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCombineIds
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## refreshAllRelations
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCombineInfo
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getUndeletableList
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setUndeleteableList
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## setCodeDraft
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getCodeDraft
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## removeCodeDraft
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## deleteCodeDslByIds
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## getUniqueId
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## deleteCompsInRelation
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## destroy
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
## use
|
||||
|
||||
使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
|
||||
|
||||
## usePlugin
|
||||
|
||||
- **详情：**
|
||||
|
||||
相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展
|
||||
|
||||
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
|
||||
|
||||
## removeAllPlugins
|
||||
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
|
||||
@ -1,104 +0,0 @@
|
||||
# componentListService方法
|
||||
|
||||
## setList
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[ComponentGroup](https://github.com/Tencent/tmagic-editor/blob/5880dfbe15fcead63e9dc7c91900f8c4e7a574d8/packages/editor/src/type.ts#L355)[]} componentGroupList 组件列表配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[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
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 componentListService，清空状态并移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { componentListService } from '@tmagic/editor';
|
||||
|
||||
componentListService.destroy();
|
||||
```
|
||||
@ -1,541 +0,0 @@
|
||||
# dataSourceService方法
|
||||
|
||||
## 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
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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,40 +0,0 @@
|
||||
|
||||
# editorService事件
|
||||
|
||||
## root-change
|
||||
|
||||
- **详情：** dsl跟节点发生变化，[editorService.set('root', {})](./editorServiceMethods.md#set)后触发
|
||||
|
||||
- **回调函数：** (value: [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73), preValue: [MApp](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/schema/src/index.ts?plain=1#L66-L73)) => void
|
||||
|
||||
## select
|
||||
|
||||
- **详情：** 选中组件，[editorService.select()](./editorServiceMethods.md#select)后触发
|
||||
|
||||
- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)) => void
|
||||
|
||||
## add
|
||||
|
||||
- **详情：** 选中组件，[editorService.add()](./editorServiceMethods.md#add)后触发
|
||||
|
||||
- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
|
||||
|
||||
|
||||
## remove
|
||||
|
||||
- **详情：** 选中组件，[editorService.remove()](./editorServiceMethods.md#remove)后触发
|
||||
|
||||
- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
|
||||
|
||||
|
||||
## update
|
||||
|
||||
- **详情：** 选中组件，[editorService.update()](./editorServiceMethods.md#update)后触发
|
||||
|
||||
- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)[]) => void
|
||||
|
||||
|
||||
## history-change
|
||||
- **详情：** 历史记录改变，[editorService.redo()，editorService.undo()](./editorServiceMethods.html#undo)后触发
|
||||
|
||||
- **回调函数：** (node: [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)) => void
|
||||
@ -1,665 +0,0 @@
|
||||
# editorService方法
|
||||
|
||||
## get
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'stage'} name`
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{any} value`
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取当前指指定name的值
|
||||
|
||||
'root': 当前整个配置，也就是当前编辑器的值
|
||||
|
||||
'page': 当前正在编辑的页面配置
|
||||
|
||||
'parent': 当前选中的节点的父节点
|
||||
|
||||
'node': 当前选中的第一个节点
|
||||
|
||||
'highlightNode': 当前高亮的节点
|
||||
|
||||
'nodes': 当前选中的所有节点
|
||||
|
||||
'modifiedNodeIds': 当前页面所有改动过的节点id
|
||||
|
||||
'pageLength': 所以页面个数
|
||||
|
||||
'stage': [StageCore](../stage/coreMethods.md)实例
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
```
|
||||
|
||||
## set
|
||||
- `{'root' | 'page' | 'parent' | 'node' | 'highlightNode' | 'nodes' | 'modifiedNodeIds' | 'pageLength' | 'stage'} name`
|
||||
- `{any} value`
|
||||
|
||||
- **详情：**
|
||||
参考[get](#get)方法
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.get('node');
|
||||
|
||||
editorService.set('node', {
|
||||
...node,
|
||||
name: 'new name'
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## getNodeInfo
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id 组件id
|
||||
|
||||
- `{boolean}` raw 是否使用toRaw，默认为true
|
||||
|
||||
:::tip
|
||||
如果raw为false，对获取到的对象进行操作会触发vue响应式处理
|
||||
:::
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[EditorNodeInfo](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L139-L143)}
|
||||
|
||||
- **详情：**
|
||||
|
||||
根据id获取组件、组件的父组件以及组件所属的页面节点
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const info = editorService.getNodeInfo('text_123');
|
||||
|
||||
console.log(info.node);
|
||||
console.log(info.parent);
|
||||
console.log(info.page);
|
||||
```
|
||||
|
||||
## getNodeById
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id
|
||||
|
||||
- `{boolean}` raw 是否使用toRaw，默认为true
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} 组件节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
根据id获取组件的信息
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const node = editorService.getNodeById('text_123');
|
||||
|
||||
console.log(node);
|
||||
```
|
||||
|
||||
## getParentById
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | string}` id
|
||||
|
||||
- `{boolean}` raw 是否使用toRaw，默认为true
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} 指点组件的父节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
根据ID获取指点节点的父节点配置
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const parent = editorService.getParentById('text_123');
|
||||
|
||||
console.log(parent);
|
||||
```
|
||||
|
||||
## getLayout
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} parent
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 可选
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[Layout](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/type.ts#L297-L302)>} 当前布局模式
|
||||
|
||||
- **详情：**
|
||||
|
||||
只有容器拥有布局，目前支持的布局有流式布局（relative），绝对定位布局（absolute），固定定位布局（fixed）
|
||||
|
||||
:::tip
|
||||
固定定位布局需要从当前选中节点判断，固需要传递可选参数 node
|
||||
|
||||
其他布局则是从父组件（容器）来判断
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
const parent = editorService.getParentById('text_123');
|
||||
editorService.getLayout(parent).then((layout) => {
|
||||
console.log(parent);
|
||||
});
|
||||
```
|
||||
|
||||
## select
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {number | string | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要选中的节点或节点ID
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 当前选中的节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中指点节点（将指点节点设置成当前选中状态）
|
||||
|
||||
:::tip
|
||||
editorService.select只是设置了编辑器的选中状态，并没有设置画布的选中状态，所以根据实际情况可以调用[stage.select](../stage/coreMethods.md#select)来设置画布的选中态
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.select('text_123');
|
||||
editorService.get('stage')?.select('text_123');
|
||||
```
|
||||
|
||||
## multiSelect
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {(number | string)[]} ids 需要选中的节点ID集合
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
选中多个节点
|
||||
|
||||
:::tip
|
||||
editorService.multiSelect只是设置了编辑器的选中状态，并没有设置画布的选中状态，所以根据实际情况可以调用[stage.multiSelect](../stage/coreMethods.md#multiSelect)来设置画布的选中态
|
||||
:::
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.multiSelect(['text_123', 'button_123']);
|
||||
editorService.get('stage')?.multiSelect(['text_123', 'button_123']);
|
||||
```
|
||||
|
||||
## highlight
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {number | string | [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要高亮的节点或节点ID
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
高亮指定节点
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.highlight('text_123');
|
||||
```
|
||||
|
||||
## doAdd
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 新组件节点
|
||||
|
||||
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59)} parent 指定的容器节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} 新增的组件
|
||||
|
||||
- **详情：**
|
||||
|
||||
往指定的容器中添加组件
|
||||
|
||||
## add
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[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)[]} node 新组件节点配置或多个节点集合
|
||||
|
||||
- {[MContainer](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L54-L59)} parent 指定的容器组件节点配置，如果不设置，默认为当前选中的组件的父节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[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)[]>} 新增的组件或组件集合
|
||||
|
||||
- **详情：**
|
||||
|
||||
往指定的容器或当前容器中添加组件
|
||||
|
||||
:::tip
|
||||
**与[doAdd](#doadd)的区别：**
|
||||
|
||||
add可以支持一次添加多个组件，add是通过调用[doAdd](#doadd)来最终实现添加的。
|
||||
|
||||
编辑器内部添加组件都是调用add来实现的，add除了添加操作外，还会记录历史堆栈，还会更新编辑中相关的状态，而[doAdd](#doadd)就仅仅是完成添加的行为
|
||||
:::
|
||||
|
||||
## doRemove
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} node 要删除的节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
删除指定的组件或者页面
|
||||
|
||||
|
||||
## remove
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[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)[])} node 要删除的节点或节点集合
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
删除指定的组件或者页面或组件集合
|
||||
|
||||
:::tip
|
||||
**与[doRemove](#doRemove)的区别：**
|
||||
|
||||
remove可以支持一次删除多个组件，remove是通过调用[doRemove](#doRemove)来最终实现删除的。
|
||||
|
||||
编辑器内部删除组件都是调用remove来实现的，remove除了删除操作外，还会记录历史堆。
|
||||
:::
|
||||
|
||||
## doUpdate
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[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))} node 新的节点
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[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)>} 新的节点
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新节点
|
||||
|
||||
:::tip
|
||||
节点中应该要有id，不然不知道要更新哪个节点
|
||||
:::
|
||||
|
||||
## update
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Promise<[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)[]>} node 新的节点或节点集合
|
||||
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[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)[]>} 新的节点或节点集合
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新单个或多个节点
|
||||
|
||||
:::tip
|
||||
**与[doUpdate](#doupdate)的区别：**
|
||||
|
||||
update可以支持一次更新多个组件，update是通过调用[doUpdate](#doupdate)来最终实现更新的。
|
||||
|
||||
编辑器内部更新组件都是调用update来实现的，update除了更新操作外，还会记录历史堆，还会更新[代码块](../../guide/advanced/code-block.md)关系链。
|
||||
:::
|
||||
|
||||
## sort
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{ string | number }` id1
|
||||
- `{ string | number }` id2
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
将id为id1的组件移动到id为id2的组件位置上，例如：[1,2,3,4] -> sort(1,3) -> [2,1,3,4]
|
||||
|
||||
用于流式布局下的组件拖动更新
|
||||
|
||||
## copy
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Promise<[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)[]>} node 需要复制的节点或节点集合
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
复制组件节点或节点集合
|
||||
|
||||
通过[storageService.setItem](./storageServiceMethods.md#setitem),将组将节点配置转化成string，然后存储到localStorage中
|
||||
|
||||
## doPaste
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
-
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
粘贴前置操作：返回分配了新id以及校准了坐标的配置
|
||||
|
||||
## paste
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[PastePosition](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L152-L163)} position 粘贴的坐标
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[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)[]>} 添加后的组件节点配置
|
||||
|
||||
- **详情：**
|
||||
|
||||
粘贴组件节点或节点集合
|
||||
|
||||
通过[storageService.getItem](./storageServiceMethods.md#setitem),从localStorage中获取节点，然后添加到当前容器中
|
||||
|
||||
|
||||
## doAlignCenter
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要居中的组件
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
水平居中组件节点，仅在[流式布局](../../guide/advanced/layout.md)下有效
|
||||
|
||||
:::warning
|
||||
仅是计算出left，并未更新到编辑器中
|
||||
:::
|
||||
|
||||
## alignCenter
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Promise<[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 需要居中的组件或者组件集合
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[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)[]>}
|
||||
|
||||
|
||||
- **详情：**
|
||||
|
||||
水平居中组件或者组件集合，仅在[流式布局](../../guide/advanced/layout.md)下有效
|
||||
|
||||
:::tip
|
||||
**与[doAlignCenter](#doaligncentere)的区别：**
|
||||
|
||||
alignCenter可以支持一次水平居中多个组件，alignCenter是通过调用[doAlignCenter](#doaligncentere)来获取到已设置好水平居中的位置信息的节点，然后调用update更新。
|
||||
:::
|
||||
## moveLayer
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number | 'top' | 'bottom'}` offset
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
移动当前选中节点位置
|
||||
|
||||
用于实现上移一层、下移一层、置顶、置底
|
||||
|
||||
|
||||
## moveToContainer
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config 需要移动的节点
|
||||
- `{string | number}` targetId 容器ID
|
||||
|
||||
- **返回：**
|
||||
|
||||
- Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99) | undefined>
|
||||
|
||||
- **详情：**
|
||||
|
||||
移动到指定容器中
|
||||
|
||||
## undo
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
撤销当前操作
|
||||
|
||||
## redo
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
恢复到下一步
|
||||
|
||||
## move
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{number}` left
|
||||
- `{number}` top
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新当前选中组件位置，通常用于键盘上下左右快捷键操作
|
||||
|
||||
## resetModifiedNodeId
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置当前记录的修改过的节点id记录，通常用于保存之后
|
||||
|
||||
## resetState
|
||||
|
||||
- **详情：**
|
||||
|
||||
清空state
|
||||
|
||||
## destroy
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁editorService
|
||||
|
||||
移除所有事件监听，清空state，移除所有插件
|
||||
|
||||
## use
|
||||
|
||||
使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService, getAddParent } from '@tmagic/editor';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
|
||||
editorService.use({
|
||||
// 添加是否删除节点确认提示
|
||||
async remove(node, next) {
|
||||
await ElMessageBox.confirm('是否删除', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
});
|
||||
|
||||
next();
|
||||
},
|
||||
|
||||
add(node, next) {
|
||||
// text组件只能添加到container中
|
||||
const parentNode = getAddParent(node);
|
||||
if (node.type === 'text' && parentNode?.type !== 'container') {
|
||||
return;
|
||||
}
|
||||
|
||||
next();
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## usePlugin
|
||||
|
||||
- **详情：**
|
||||
|
||||
相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展
|
||||
|
||||
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { editorService } from '@tmagic/editor';
|
||||
|
||||
editorService.usePlugin({
|
||||
// 添加组件的时候设置一个添加时间
|
||||
beforeDoAdd: (config, parent) => {
|
||||
config.addTime = new Date().getTime();
|
||||
|
||||
return [config, parent];
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## removeAllPlugins
|
||||
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
@ -1,7 +0,0 @@
|
||||
# Editor组件 events
|
||||
|
||||
## props-panel-mounted
|
||||
|
||||
- **详情：** 编辑器右侧组件属性配置加载完毕后触发
|
||||
|
||||
- **回调函数：** (formState: [FomState](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/form/src/schema.ts#L27-L39)) => void
|
||||
@ -1,244 +0,0 @@
|
||||
# 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 事件方法列表配置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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 事件配置对象
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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 事件列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定组件类型的事件列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setEvent('button', [
|
||||
{ label: '点击', value: 'click' },
|
||||
{ label: '长按', value: 'longpress' },
|
||||
]);
|
||||
```
|
||||
|
||||
## getEvent
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[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 方法配置对象
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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 方法列表
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置指定组件类型的方法列表
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.setMethod('video', [
|
||||
{ label: '播放', value: 'play' },
|
||||
{ label: '暂停', value: 'pause' },
|
||||
{ label: '停止', value: 'stop' },
|
||||
]);
|
||||
```
|
||||
|
||||
## getMethod
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[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
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁 eventsService，重置状态并移除所有事件监听和插件
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { eventsService } from '@tmagic/editor';
|
||||
|
||||
eventsService.destroy();
|
||||
```
|
||||
@ -1,14 +0,0 @@
|
||||
# historyService事件
|
||||
|
||||
## page-change
|
||||
|
||||
- **详情：** 页面切换
|
||||
|
||||
- **回调函数：** (undoRedo: [undoRedo](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/utils/undo-redo.ts)) => void
|
||||
|
||||
## change
|
||||
|
||||
- **详情：** 历史记录发生变化
|
||||
|
||||
- **回调函数：** (state: [StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)) => void
|
||||
|
||||
@ -1,62 +0,0 @@
|
||||
# historyService方法
|
||||
|
||||
## reset
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置记录
|
||||
|
||||
## changePage
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MPage](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L61)} page
|
||||
|
||||
- **详情：**
|
||||
|
||||
按页面切换历史堆栈
|
||||
|
||||
## empty
|
||||
|
||||
- **详情：**
|
||||
|
||||
重置记录，同[reset](#reset)
|
||||
## push
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404)} state
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null}
|
||||
|
||||
- **详情：**
|
||||
|
||||
添加一条历史记录
|
||||
|
||||
## undo
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
撤销当前操作
|
||||
|
||||
## redo
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[StepValue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L400-L404) | null>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
恢复到下一步
|
||||
|
||||
## destroy
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,7 +0,0 @@
|
||||
# propsService事件
|
||||
|
||||
## props-configs-change
|
||||
|
||||
- **详情：** [propsService.setPropsConfigs()](./propsServiceMethods.md#setPropsConfigs)后触发
|
||||
|
||||
- **回调函数：** () => void
|
||||
@ -1,190 +0,0 @@
|
||||
# propsService方法
|
||||
|
||||
## fillConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
扩展属性表单配置DSL，用于为所有表单配置添加公共配置
|
||||
|
||||
## setPropsConfigs
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Record<string, [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>} configs
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置组件与属性表单配置DSL的对应关系
|
||||
|
||||
## setPropsConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- {[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)} config 属性表单配置DSL
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
为指定类型组件设置组件属性表单配置
|
||||
|
||||
## getPropsConfig
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指点类型的组件属性表单配置
|
||||
|
||||
## setPropsValues
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {Record<string, [MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>} values
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置组件与属性表单默认值的对应关系
|
||||
|
||||
## setPropsValue
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} value 组件初始值
|
||||
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置组件与属性表单默认值的对应关系
|
||||
|
||||
|
||||
## getPropsValue
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} value 组件默认值，可选
|
||||
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定类型的组件初始值
|
||||
|
||||
## createId
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {string} type 组件列席
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<string>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
生成组件id
|
||||
## setNewItemId
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- {[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)} config
|
||||
|
||||
- **返回：**
|
||||
|
||||
- {Promise<[MNode](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L99)>}
|
||||
|
||||
- **详情：**
|
||||
|
||||
将组件与组件的子元素配置中的id都设置成一个新的ID
|
||||
|
||||
## getDefaultPropsValue
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` type 组件类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取默认属性配置
|
||||
|
||||
## resetState
|
||||
|
||||
- **详情：**
|
||||
|
||||
情况所有组件的属性配置与初始值
|
||||
|
||||
## destroy
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁propsService
|
||||
|
||||
## use
|
||||
|
||||
使用中间件的方式扩展方法，上述方法中标记有`扩展支持： 是`的方法都支持使用use扩展
|
||||
|
||||
## usePlugin
|
||||
|
||||
- **详情：**
|
||||
|
||||
相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展
|
||||
|
||||
每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为，before可以用于修改传入参数，after可以用于修改返回的值
|
||||
|
||||
## removeAllPlugins
|
||||
|
||||
- **详情：**
|
||||
|
||||
删掉当前设置的所有扩展
|
||||
@ -1,379 +0,0 @@
|
||||
# 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)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## component-list-item
|
||||
|
||||
- **详情：** 左边栏中的组件列表中组件item
|
||||
|
||||
- **默认：** 图片加文案
|
||||
|
||||
- **插槽 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)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## code-block-panel-header
|
||||
|
||||
- **详情：** 左边栏中的代码块列表内顶部位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## code-block-panel-tool
|
||||
|
||||
- **详情：** 左边栏中的代码块列表中代码块右侧位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `id`: 代码块id
|
||||
- `data`: 代码块数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## code-block-panel-search
|
||||
|
||||
- **详情：** 左边栏中的代码块列表搜索框位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## data-source-panel-tool
|
||||
|
||||
- **详情：** 左边栏中的数据源列表中数据源右侧位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
- **插槽 Props：**
|
||||
- `data`: 数据源数据
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## data-source-panel-search
|
||||
|
||||
- **详情：** 左边栏中的数据源列表搜索框位置
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
:::warning
|
||||
如设置了[sidebar](#sidebar)插槽，此插槽将失效
|
||||
:::
|
||||
|
||||
## workspace
|
||||
|
||||
- **详情：** 编辑器中间区域
|
||||
|
||||
- **默认：** [Workspace.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Workspace.vue)
|
||||
|
||||
- **插槽 Props：**
|
||||
- `editorService`: editorService 实例
|
||||
|
||||
## stage
|
||||
|
||||
- **详情：** 画布
|
||||
|
||||
- **默认：** [Stage.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/workspace/Stage.vue)
|
||||
|
||||
## 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
|
||||
|
||||
- **详情：** 编辑器右侧属性配置
|
||||
|
||||
- **默认：** [PropsPanel.vue](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/layouts/PropsPanel.vue)
|
||||
|
||||
## props-panel-header
|
||||
|
||||
- **详情：** 编辑器右侧属性配置内顶部区域
|
||||
|
||||
- **默认：** 无
|
||||
|
||||
## 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>
|
||||
```
|
||||
@ -1,290 +0,0 @@
|
||||
# storageService方法
|
||||
|
||||
## getStorage
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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#行为扩展)：** 是
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{string}` 命名空间字符串
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取存储项的命名空间，默认为 'tmagic'
|
||||
|
||||
命名空间用于区分不同应用的存储数据
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
const namespace = storageService.getNamespace();
|
||||
console.log(namespace); // 'tmagic'
|
||||
```
|
||||
|
||||
## clear
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
清空当前存储对象中的所有数据
|
||||
|
||||
- **示例：**
|
||||
|
||||
```js
|
||||
import { storageService } from '@tmagic/editor';
|
||||
|
||||
storageService.clear();
|
||||
```
|
||||
|
||||
## getItem
|
||||
|
||||
- **[扩展支持](../../guide/editor-expand#行为扩展)：** 是
|
||||
|
||||
- **参数：**
|
||||
|
||||
- `{string}` key 存储项的键名
|
||||
- `{Options}` options 可选配置
|
||||
- `namespace?: string` 自定义命名空间
|
||||
- `protocol?: Protocol` 数据协议类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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 索引位置
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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` 自定义命名空间
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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` 数据协议类型
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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
|
||||
|
||||
- **参数：** 无
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{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
|
||||
|
||||
- **详情：**
|
||||
|
||||
相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展
|
||||
|
||||
每个支持扩展的方法都支持定制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,239 +0,0 @@
|
||||
# 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 缩放增量（可以为负数）
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
调整缩放倍数，最小为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>}` 计算出的缩放倍数
|
||||
|
||||
- **详情：**
|
||||
|
||||
计算"缩放以适应"的倍数
|
||||
|
||||
根据画布容器的尺寸和画布尺寸自动计算出合适的缩放比例，使画布完全显示在容器内
|
||||
|
||||
- **示例：**
|
||||
|
||||
```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
|
||||
|
||||
- **详情：**
|
||||
|
||||
相对于[use](#use), usePlugin支持更加灵活更加细致的扩展， 上述方法中标记有`扩展支持： 是`的方法都支持使用usePlugin扩展
|
||||
|
||||
每个支持扩展的方法都支持定制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();
|
||||
```
|
||||
|
||||
@ -1,27 +0,0 @@
|
||||
# FormDialog组件 events
|
||||
|
||||
## close
|
||||
|
||||
- **详情：** 弹出关闭
|
||||
|
||||
- **回调函数：** () => void
|
||||
|
||||
|
||||
## submit
|
||||
|
||||
- **详情：** 调用[save()](./form-dialog-methods.md#save)
|
||||
|
||||
- **回调函数：** (values: any) => void
|
||||
|
||||
## error
|
||||
|
||||
- **详情：** 表单校验不同
|
||||
|
||||
- **回调函数：** (error: any) => void
|
||||
|
||||
## change
|
||||
|
||||
- **详情：** 表单中任何值发生变化
|
||||
|
||||
- **回调函数：** (values: any) => void
|
||||
|
||||
@ -1,13 +0,0 @@
|
||||
# FormDialog组件 methods
|
||||
|
||||
## cancel
|
||||
|
||||
- **详情：** 关闭弹窗
|
||||
|
||||
## save
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<any>}`
|
||||
|
||||
- **详情：** 获取表单的值
|
||||
@ -1,110 +0,0 @@
|
||||
# FormDialog组件 props
|
||||
|
||||
## config
|
||||
|
||||
- **详情：** 表单配置
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-form-dialog :config="config"></m-form-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const config = ref([
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## values
|
||||
|
||||
- **详情：** 表单初始化值
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** `Object`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-form-dialog :values="values"></m-form-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const values = ref([
|
||||
text: 'text',
|
||||
multiply: true,
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## width
|
||||
|
||||
- **详情：** 弹窗宽度
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
## labelWidth
|
||||
|
||||
- **详情：**
|
||||
|
||||
表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
|
||||
|
||||
- **默认值：** `'200px'`
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
## fullscreen
|
||||
|
||||
- **详情：** 弹出是否全屏
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **类型：** boolean
|
||||
|
||||
## disabled
|
||||
|
||||
- **详情：** 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## title
|
||||
|
||||
- **详情：** 弹出标题
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
## size
|
||||
|
||||
- **详情：** 用于控制该表单内组件的尺寸
|
||||
|
||||
- **类型：** `'small' | 'default' | 'large'`
|
||||
|
||||
## confirmText
|
||||
|
||||
- **详情：** 提交按钮文案
|
||||
|
||||
- **默认值：** `'确定'`
|
||||
|
||||
- **类型：** `string`
|
||||
@ -1,7 +0,0 @@
|
||||
# Form组件 events
|
||||
|
||||
## change
|
||||
|
||||
- **详情：** 表单中任何值发生变化
|
||||
|
||||
- **回调函数：** (values: any) => void
|
||||
@ -1,13 +0,0 @@
|
||||
# Form组件 methods
|
||||
|
||||
## resetForm
|
||||
|
||||
- **详情：** 重置该表单项，将其值重置为初始值，并移除校验结果
|
||||
|
||||
## submitForm
|
||||
|
||||
- **返回：**
|
||||
|
||||
- `{Promise<any>}`
|
||||
|
||||
- **详情：** 提交表单，获取表单的值
|
||||
@ -1,137 +0,0 @@
|
||||
# Form组件属性 props
|
||||
|
||||
## config
|
||||
|
||||
- **详情：** 表单配置
|
||||
|
||||
- **默认值：** `[]`
|
||||
|
||||
- **类型：** [FormConfig](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/form/src/schema.ts#L706)
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-form-dialog :config="config"></m-form-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const config = ref([
|
||||
{
|
||||
name: 'text',
|
||||
text: '文本',
|
||||
},
|
||||
{
|
||||
name: 'multiple',
|
||||
text: '多行文本',
|
||||
type: 'switch',
|
||||
},
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## initValues
|
||||
|
||||
- **详情：** 表单初始化值
|
||||
|
||||
- **默认值：** `{}`
|
||||
|
||||
- **类型：** `Object`
|
||||
|
||||
- **示例：**
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-form-dialog :init-values="initValues"></m-form-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'Vue';
|
||||
|
||||
const initValues = ref([
|
||||
text: 'text',
|
||||
multiply: true,
|
||||
]);
|
||||
</script>
|
||||
```
|
||||
|
||||
## labelWidth
|
||||
|
||||
- **详情：**
|
||||
|
||||
表单域标签的宽度，例如 '50px'。 作为 Form 直接子元素的 form-item 会继承该值。 支持 auto
|
||||
|
||||
- **默认值：** `'200px'`
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
## disabled
|
||||
|
||||
- **详情：** 是否禁用该表单内的所有组件。 若设置为 true，则表单内组件上的 disabled 属性不再生效
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## height
|
||||
|
||||
- **详情：**
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
## stepActive
|
||||
|
||||
- **详情：**
|
||||
|
||||
|
||||
|
||||
- **默认值：**
|
||||
|
||||
|
||||
|
||||
- **类型：**
|
||||
|
||||
## size
|
||||
|
||||
- **详情：** 用于控制该表单内组件的尺寸
|
||||
|
||||
- **类型：** `'small' | 'default' | 'large'`
|
||||
|
||||
|
||||
## inline
|
||||
|
||||
- **详情：** 行内表单模式
|
||||
|
||||
- **默认值：** false
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## labelPosition
|
||||
|
||||
- **详情：** 表单域标签的位置， 当设置为 left 或 right 时，则也需要设置 label-width 属性
|
||||
|
||||
- **默认值：** ’right'
|
||||
|
||||
- **类型：** `'left' | 'right' | 'top`
|
||||
|
||||
## keyProp
|
||||
|
||||
- **详情：** 作为表单项的组件实例的key
|
||||
|
||||
- **默认值：** `'__key'`
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
## popperClass
|
||||
|
||||
- **详情：** tooltip弹出层的class
|
||||
|
||||
- **类型：** `string`
|
||||
@ -1,21 +0,0 @@
|
||||
# stage事件
|
||||
|
||||
## runtime-ready
|
||||
|
||||
## mounted
|
||||
|
||||
## highlight
|
||||
|
||||
## update
|
||||
|
||||
## select
|
||||
|
||||
## multi-select
|
||||
|
||||
## select-parent
|
||||
|
||||
## sort
|
||||
|
||||
## update
|
||||
|
||||
## change-guides
|
||||
@ -1,58 +0,0 @@
|
||||
# stage方法
|
||||
|
||||
## select
|
||||
|
||||
- **详情：** 单选选中元素
|
||||
|
||||
## multiSelect
|
||||
|
||||
- **详情：** 多选选中多个元素
|
||||
|
||||
## highlight
|
||||
|
||||
- **详情：** 高亮选中元素
|
||||
|
||||
## update
|
||||
|
||||
- **详情：** 更新组件
|
||||
|
||||
## add
|
||||
|
||||
- **详情：** 往画布增加一个组件
|
||||
|
||||
## remove
|
||||
|
||||
- **详情：** 从画布删除一个组件
|
||||
|
||||
## setZoom
|
||||
|
||||
- **详情：**
|
||||
|
||||
## mount
|
||||
|
||||
- **详情：** 挂载Dom节点
|
||||
|
||||
## clearGuides
|
||||
|
||||
- **详情：** 清空所有参考线
|
||||
|
||||
## clearGuides
|
||||
|
||||
- **详情：** 清空所有参考线
|
||||
|
||||
## delayedMarkContainer
|
||||
|
||||
- **详情：**
|
||||
|
||||
鼠标拖拽着元素，在容器上方悬停，延迟一段时间后，对容器进行标记，如果悬停时间够长将标记成功，悬停时间短，调用方通过返回的timeoutId取消标记
|
||||
|
||||
标记的作用：
|
||||
|
||||
1、高亮容器，给用户一个加入容器的交互感知；
|
||||
|
||||
2、释放鼠标后，通过标记的标志找到要加入的容器
|
||||
|
||||
## destroy
|
||||
|
||||
- **详情：** 销毁实例
|
||||
|
||||
@ -1,110 +0,0 @@
|
||||
# Table组件 events
|
||||
|
||||
## 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);
|
||||
};
|
||||
```
|
||||
@ -1,41 +0,0 @@
|
||||
# Table组件 methods
|
||||
|
||||
## 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();
|
||||
```
|
||||
@ -1,123 +0,0 @@
|
||||
# Table组件 props
|
||||
|
||||
## 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 的高度
|
||||
|
||||
- **默认值：** `undefined`
|
||||
|
||||
- **类型：** `string | number`
|
||||
|
||||
- **示例：**
|
||||
```js
|
||||
bodyHeight: 400
|
||||
bodyHeight: '400px'
|
||||
```
|
||||
|
||||
## emptyText
|
||||
|
||||
- **详情：** 空数据时显示的文本内容
|
||||
|
||||
- **默认值：** `'暂无数据'`
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
## defaultExpandAll
|
||||
|
||||
- **详情：** 是否默认展开所有行，当 Table 包含展开行存在或者为树形表格时有效
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
|
||||
## rowkeyName
|
||||
|
||||
- **详情：** 行数据的 Key，用来优化 Table 的渲染
|
||||
|
||||
- **默认值：** `'id'`
|
||||
|
||||
- **类型：** `string`
|
||||
|
||||
- **说明：** 在使用 reserve-selection 功能与显示树形数据时，该属性是必填的
|
||||
|
||||
## border
|
||||
|
||||
- **详情：** 是否显示边框
|
||||
|
||||
- **默认值：** `false`
|
||||
|
||||
- **类型：** `boolean`
|
||||
@ -1,7 +0,0 @@
|
||||
# 表单对比
|
||||
tmagic-form可以支持两个版本的表单值对比，如果有容器嵌套，将在tab标签页展示对应tab下存在的差异数，便于在复杂嵌套表单场景下直观的看到差异情况
|
||||
## 使用方法
|
||||
在初始化表单时，需要传入当前版本的表单值，上一版本的表单值，以及表单配置，具体可参见[Form Playground](https://tencent.github.io/tmagic-editor/playground/index.html#/form)的demo演示
|
||||
## 效果展示
|
||||
<img src="https://vip.image.video.qpic.cn/vupload/20230301/c626071677661813135.png" alt="表单对比"/>
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
# CodeLink 代码链接
|
||||
|
||||
通过弹窗链接的方式编辑代码内容。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'code-link',
|
||||
name: 'codeLink',
|
||||
text: '代码配置'
|
||||
}
|
||||
```
|
||||
|
||||
## 自定义弹窗标题
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'code-link',
|
||||
name: 'codeLink',
|
||||
text: '代码配置',
|
||||
formTitle: '编辑代码'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| formTitle | 弹窗标题 | string | — | — |
|
||||
| codeOptions | 代码编辑器配置项 | object | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,37 +0,0 @@
|
||||
# CodeSelectCol 代码块选择列
|
||||
|
||||
代码块选择器的列组件，支持选择代码块并配置参数。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'code-select-col',
|
||||
name: 'codeId',
|
||||
text: '代码块'
|
||||
}
|
||||
```
|
||||
|
||||
## 禁止编辑
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'code-select-col',
|
||||
name: 'codeId',
|
||||
text: '代码块',
|
||||
notEditable: true
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| notEditable | 是否不可编辑代码块（disable控制是否可选择） | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,33 +0,0 @@
|
||||
# CodeSelect 代码块选择器
|
||||
|
||||
用于选择代码块并配置参数的组件。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'code-select',
|
||||
name: 'codeSelect',
|
||||
text: '代码块'
|
||||
}
|
||||
```
|
||||
|
||||
## 功能说明
|
||||
|
||||
CodeSelect 组件支持：
|
||||
- 选择代码块
|
||||
- 选择数据源方法
|
||||
- 配置代码块参数
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| className | 自定义类名 | string | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,61 +0,0 @@
|
||||
# Code 代码编辑器
|
||||
|
||||
代码编辑器字段，用于编辑代码内容。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'code',
|
||||
name: 'code',
|
||||
text: '代码'
|
||||
}
|
||||
```
|
||||
|
||||
## 指定语言
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'code',
|
||||
name: 'code',
|
||||
text: '代码',
|
||||
language: 'javascript'
|
||||
}
|
||||
```
|
||||
|
||||
## 自动调整大小
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'code',
|
||||
name: 'code',
|
||||
text: '代码',
|
||||
autosize: {
|
||||
minRows: 3,
|
||||
maxRows: 10
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| language | 代码语言 | string | javascript/typescript/json等 | — |
|
||||
| height | 编辑器高度 | string | — | — |
|
||||
| parse | 是否解析代码 | boolean | — | false |
|
||||
| options | 编辑器配置项 | object | — | — |
|
||||
| autosize | 自动调整大小配置 | object | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
|
||||
## autosize Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| minRows | 最小行数 | number | — | — |
|
||||
| maxRows | 最大行数 | number | — | — |
|
||||
@ -1,37 +0,0 @@
|
||||
# CondOpSelect 条件操作选择器
|
||||
|
||||
用于选择条件操作符的选择器。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'cond-op',
|
||||
name: 'op',
|
||||
text: '操作符'
|
||||
}
|
||||
```
|
||||
|
||||
## 指定父级字段
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'cond-op',
|
||||
name: 'op',
|
||||
text: '操作符',
|
||||
parentFields: ['field1', 'field2']
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| parentFields | 父级字段 | string[] | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,67 +0,0 @@
|
||||
# DataSourceFieldSelect 数据源字段选择器
|
||||
|
||||
用于选择数据源字段的级联选择器。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-field-select',
|
||||
name: 'field',
|
||||
text: '数据源字段'
|
||||
}
|
||||
```
|
||||
|
||||
## 返回字段key
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-field-select',
|
||||
name: 'field',
|
||||
text: '数据源字段',
|
||||
value: 'key'
|
||||
}
|
||||
```
|
||||
|
||||
## 限制字段类型
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-field-select',
|
||||
name: 'field',
|
||||
text: '数据源字段',
|
||||
dataSourceFieldType: ['string', 'number']
|
||||
}
|
||||
```
|
||||
|
||||
## 父子节点不关联
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-field-select',
|
||||
name: 'field',
|
||||
text: '数据源字段',
|
||||
checkStrictly: true
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| value | 返回值类型 | string | key/value | — |
|
||||
| checkStrictly | 是否严格遵守父子节点不互相关联 | boolean / Function | — | — |
|
||||
| dataSourceFieldType | 允许选择的字段类型 | DataSourceFieldType[] | — | — |
|
||||
| fieldConfig | 自定义字段配置 | ChildConfig | — | — |
|
||||
| notEditable | 是否不可编辑数据源（disable控制是否可选择） | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
|
||||
## value说明
|
||||
- `key`: 不编译，返回数据源id和字段name
|
||||
- `value`: 编译后返回数据源data[field]
|
||||
@ -1,25 +0,0 @@
|
||||
# DataSourceFields 数据源字段配置
|
||||
|
||||
用于配置数据源字段的表单组件。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-fields',
|
||||
name: 'fields',
|
||||
text: '字段配置'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,25 +0,0 @@
|
||||
# DataSourceInput 数据源输入框
|
||||
|
||||
支持绑定数据源的输入框组件。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-input',
|
||||
name: 'input',
|
||||
text: '输入框'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,37 +0,0 @@
|
||||
# DataSourceMethodSelect 数据源方法选择器
|
||||
|
||||
用于选择数据源方法的选择器。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-method-select',
|
||||
name: 'method',
|
||||
text: '数据源方法'
|
||||
}
|
||||
```
|
||||
|
||||
## 禁止编辑
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-method-select',
|
||||
name: 'method',
|
||||
text: '数据源方法',
|
||||
notEditable: true
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| notEditable | 是否不可编辑数据源（disable控制是否可选择） | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,25 +0,0 @@
|
||||
# DataSourceMethods 数据源方法配置
|
||||
|
||||
用于配置数据源方法的表单组件。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-methods',
|
||||
name: 'methods',
|
||||
text: '方法配置'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,25 +0,0 @@
|
||||
# DataSourceMocks 数据源Mock配置
|
||||
|
||||
用于配置数据源Mock数据的表单组件。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-mocks',
|
||||
name: 'mocks',
|
||||
text: 'Mock配置'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,55 +0,0 @@
|
||||
# DataSourceSelect 数据源选择器
|
||||
|
||||
用于选择数据源的下拉选择器。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-select',
|
||||
name: 'dataSource',
|
||||
text: '数据源'
|
||||
}
|
||||
```
|
||||
|
||||
## 过滤数据源类型
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-select',
|
||||
name: 'dataSource',
|
||||
text: '数据源',
|
||||
dataSourceType: 'http'
|
||||
}
|
||||
```
|
||||
|
||||
## 返回数据源ID
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'data-source-select',
|
||||
name: 'dataSource',
|
||||
text: '数据源',
|
||||
value: 'id'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| dataSourceType | 数据源类型过滤 | string | base/http等 | — |
|
||||
| value | 返回值类型 | string | id/value | — |
|
||||
| notEditable | 是否不可编辑数据源（disable控制是否可选择） | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
|
||||
## value说明
|
||||
- `id`: 不编译，返回数据源id
|
||||
- `value`: 编译后返回数据源data
|
||||
@ -1,38 +0,0 @@
|
||||
# DisplayConds 显示条件配置
|
||||
|
||||
用于配置组件显示条件的表单组件。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'display-conds',
|
||||
name: 'displayConds',
|
||||
text: '显示条件'
|
||||
}
|
||||
```
|
||||
|
||||
## 带标题前缀
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'display-conds',
|
||||
name: 'displayConds',
|
||||
text: '显示条件',
|
||||
titlePrefix: '条件'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| titlePrefix | 标题前缀 | string | — | — |
|
||||
| parentFields | 父级字段 | string[] / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,49 +0,0 @@
|
||||
# EventSelect 事件选择器
|
||||
|
||||
用于配置组件或数据源事件的选择器。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'event-select',
|
||||
name: 'events',
|
||||
text: '事件配置',
|
||||
src: 'component'
|
||||
}
|
||||
```
|
||||
|
||||
## 数据源事件
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'event-select',
|
||||
name: 'events',
|
||||
text: '事件配置',
|
||||
src: 'datasource'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| src | 事件来源 | string | datasource/component | — |
|
||||
| labelWidth | 标签宽度 | string | — | — |
|
||||
| eventNameConfig | 事件名称表单配置 | FormItem | — | — |
|
||||
| actionTypeConfig | 动作类型配置 | FormItem | — | — |
|
||||
| targetCompConfig | 联动组件配置 | FormItem | — | — |
|
||||
| compActionConfig | 联动组件动作配置 | FormItem | — | — |
|
||||
| codeActionConfig | 联动代码配置 | FormItem | — | — |
|
||||
| dataSourceActionConfig | 联动数据源配置 | FormItem | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
|
||||
## src说明
|
||||
- `component`: 组件事件
|
||||
- `datasource`: 数据源事件
|
||||
@ -1,39 +0,0 @@
|
||||
# KeyValue 键值对
|
||||
|
||||
用于配置键值对数据的表单组件。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'key-value',
|
||||
name: 'params',
|
||||
text: '参数'
|
||||
}
|
||||
```
|
||||
|
||||
## 高级模式
|
||||
|
||||
设置 `advanced` 为 `true`，可切换到代码编辑模式。
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'key-value',
|
||||
name: 'params',
|
||||
text: '参数',
|
||||
advanced: true
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| advanced | 是否支持高级模式（代码编辑） | boolean | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,30 +0,0 @@
|
||||
# PageFragmentSelect 页面片选择器
|
||||
|
||||
用于选择页面片的下拉选择器。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'page-fragment-select',
|
||||
name: 'pageFragment',
|
||||
text: '页面片'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. 下拉框会自动列出当前项目中所有的页面片
|
||||
2. 选中页面片后，点击编辑图标可跳转到对应页面片进行编辑
|
||||
@ -1,33 +0,0 @@
|
||||
# UISelect 组件选择器
|
||||
|
||||
用于在画布中选择组件的选择器。
|
||||
|
||||
::: warning 注意
|
||||
此组件仅在编辑器环境中可用，需要配合 `@tmagic/editor` 使用。
|
||||
:::
|
||||
|
||||
## 基础用法
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'ui-select',
|
||||
name: 'targetId',
|
||||
text: '目标组件'
|
||||
}
|
||||
```
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
|
||||
## 使用说明
|
||||
|
||||
1. 点击"点击此处选择"按钮进入选择模式
|
||||
2. 在画布中点击目标组件完成选择
|
||||
3. 选择后会显示组件名称和ID
|
||||
4. 可通过清除按钮清空选择
|
||||
5. 点击组件名称可跳转到对应组件
|
||||
@ -1,454 +0,0 @@
|
||||
# Cascader 级联选择器
|
||||
|
||||
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
|
||||
|
||||
## 基础用法
|
||||
|
||||
有两种触发子菜单的方式
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'cascader',
|
||||
name: 'cascader',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '导航',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航'
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
}]
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form',
|
||||
children: [{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
}, {
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]"><template #source><p>type为'cascader'</p></template></demo-block>
|
||||
|
||||
## 禁用选项
|
||||
|
||||
通过在数据源中设置 disabled 字段来声明该选项是禁用的
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'cascader',
|
||||
name: 'cascader',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
disabled: true,
|
||||
options: [
|
||||
]
|
||||
}, {
|
||||
type: 'cascader',
|
||||
name: 'cascader1',
|
||||
text: '选项2',
|
||||
placeholder: '请选择',
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
disabled: true,
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '导航',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航'
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
disabled: true,
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
}]
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form',
|
||||
children: [{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
}, {
|
||||
value: 'input',
|
||||
disabled: true,
|
||||
label: 'Input 输入框'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
本例中，options 指定的数组中的第一个元素含有 disabled: true 键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的 disabled 字段是否为 true ，如果你的数据中表示禁用含义的字段名不为 disabled ，可以通过 disabled 属性来指定（详见下方 API 表格）。当然， value 、 label 和 children 这三个字段名也可以通过同样的方式指定。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 多选
|
||||
|
||||
可通过 `multiple = true` 来开启多选模式
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'cascader',
|
||||
name: 'cascader',
|
||||
text: '选项',
|
||||
multiple: true,
|
||||
placeholder: '请选择',
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}]
|
||||
}, {
|
||||
value: 'daohang',
|
||||
label: '导航',
|
||||
children: [{
|
||||
value: 'cexiangdaohang',
|
||||
label: '侧向导航'
|
||||
}, {
|
||||
value: 'dingbudaohang',
|
||||
label: '顶部导航'
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
}]
|
||||
}, {
|
||||
value: 'form',
|
||||
label: 'Form',
|
||||
children: [{
|
||||
value: 'checkbox',
|
||||
label: 'Checkbox 多选框'
|
||||
}, {
|
||||
value: 'input',
|
||||
label: 'Input 输入框'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 任意一级可选
|
||||
|
||||
在单选模式下，你只能选择叶子节点；而在多选模式下，勾选父节点真正选中的都是叶子节点。启用该功能后，可让父子节点取消关联，选择任意一级选项。
|
||||
|
||||
可通过 `checkStrictly = true` 来设置父子节点取消选中关联，从而达到选择任意一级选项的目的。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'cascader',
|
||||
name: 'cascader',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
checkStrictly: true,
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置 checkStrictly 为 true，可选择任意一级选项
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 仅返回选中节点的值
|
||||
|
||||
在选中节点改变时，默认返回由该节点所在的各级菜单的值所组成的数组。可通过 `emitPath = false` 设置仅返回该节点的值。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'cascader',
|
||||
name: 'cascader',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
emitPath: false,
|
||||
checkStrictly: true,
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}, {
|
||||
value: 'fankui',
|
||||
label: '反馈'
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
}, {
|
||||
value: 'color',
|
||||
label: 'Color 色彩'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置 emitPath 为 false，仅返回选中节点的值，而非完整路径数组
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 值分隔符
|
||||
|
||||
当需要将选中值以字符串形式存储时，可通过 `valueSeparator` 指定分隔符，组件会自动将数组转换为字符串存储，读取时也会自动还原。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'cascader',
|
||||
name: 'cascader',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
valueSeparator: '/',
|
||||
options: [
|
||||
{
|
||||
value: 'zhinan',
|
||||
label: '指南',
|
||||
children: [{
|
||||
value: 'shejiyuanze',
|
||||
label: '设计原则',
|
||||
children: [{
|
||||
value: 'yizhi',
|
||||
label: '一致'
|
||||
}]
|
||||
}]
|
||||
},
|
||||
{
|
||||
value: 'zujian',
|
||||
label: '组件',
|
||||
children: [{
|
||||
value: 'basic',
|
||||
label: 'Basic',
|
||||
children: [{
|
||||
value: 'layout',
|
||||
label: 'Layout 布局'
|
||||
}]
|
||||
}]
|
||||
}
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置 valueSeparator 为 '/'，选中值将以 'zhinan/shejiyuanze/yizhi' 的字符串形式存储
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 远程选项
|
||||
|
||||
通过接口请求获取选项列表
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'cascader',
|
||||
name: 'cascader',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
remote: true,
|
||||
option: {
|
||||
url: 'cascader/remote',
|
||||
root: 'data',
|
||||
cache: true,
|
||||
timeout: 5000,
|
||||
body: { query: '' },
|
||||
item: (data) => data
|
||||
}
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置 remote 为 true，然后配置 option 对象，而不是 options 数组
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
同时在 `src/main.ts` 中需要自定义实现请求：
|
||||
|
||||
```typescript
|
||||
app.use(MagicForm, {
|
||||
request: async (options: any) => {
|
||||
// 自定义请求实现
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## 动态选项
|
||||
|
||||
options 支持传入函数，可根据表单其他字段动态生成选项列表
|
||||
|
||||
```typescript
|
||||
{
|
||||
type: 'cascader',
|
||||
name: 'cascader',
|
||||
text: '选项',
|
||||
options: (mForm, { model, formValue }) => {
|
||||
// 根据表单值动态返回选项
|
||||
return [
|
||||
{ value: 'a', label: '选项A', children: [] }
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Cascader Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------|------|------|--------|--------|
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| multiple | 是否多选 | boolean | — | false |
|
||||
| emitPath | 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值 | boolean | — | true |
|
||||
| checkStrictly | 是否严格的遵守父子节点不互相关联 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| valueSeparator | 合并成字符串时的分隔符 | string / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
| popperClass | 弹出内容的自定义类名 | string | — | — |
|
||||
| remote | 是否为远程搜索 | boolean | — | false |
|
||||
| options | 选项数据源 | Array / Function | — | — |
|
||||
| option | 远程选项配置 | Object | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
|
||||
## options item
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------|------|------|--------|--------|
|
||||
| value | 选项的值 | any | — | — |
|
||||
| label | 选项的标签 | string | — | — |
|
||||
| children | 子选项 | Array | — | — |
|
||||
|
||||
## option（远程配置）
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------|------|------|--------|--------|
|
||||
| url | 请求地址 | string | — | — |
|
||||
| root | 响应数据的根路径 | string | — | — |
|
||||
| cache | 是否缓存请求结果 | boolean | — | false |
|
||||
| timeout | 请求超时时间（毫秒） | number | — | — |
|
||||
| body | 请求体 | Object / Function | — | — |
|
||||
| item | 数据转换函数，将响应数据转换为选项格式 | Function | — | — |
|
||||
@ -1,180 +0,0 @@
|
||||
# Checkbox 多选框
|
||||
|
||||
一组备选项中进行多选
|
||||
|
||||
## 基础用法
|
||||
|
||||
单独使用可以表示两种状态之间的切换。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'checkbox',
|
||||
name: 'checkbox',
|
||||
text: '选项'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
要使用 Checkbox 组件，只需要配置 type: 'checkbox'，选中意味着变量的值为 true。默认绑定变量的值会是 Boolean，选中为 true。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
多选框不可用状态。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'checkbox',
|
||||
name: 'checkbox',
|
||||
text: '选项',
|
||||
disabled: () => true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置 disabled 属性即可，它接受一个 Boolean，true 为禁用，也可以接受一个返回 Boolean 的函数。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 自定义选中值
|
||||
|
||||
通过 `activeValue` 和 `inactiveValue` 自定义选中和未选中时的值。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'checkbox',
|
||||
name: 'checkbox',
|
||||
text: '选项',
|
||||
activeValue: 'yes',
|
||||
inactiveValue: 'no'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置 activeValue 为选中时的值，inactiveValue 为未选中时的值。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 数值类型
|
||||
|
||||
当需要绑定数值类型时，可以使用 `filter: 'number'` 配合默认的 activeValue/inactiveValue。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'checkbox',
|
||||
name: 'checkbox',
|
||||
text: '选项',
|
||||
filter: 'number'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置 filter 为 'number' 时，默认 activeValue 为 1，inactiveValue 为 0。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 使用 Label 显示
|
||||
|
||||
通过 `useLabel` 属性控制是否使用 label 作为显示内容。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'checkbox',
|
||||
name: 'checkbox',
|
||||
text: '选项',
|
||||
useLabel: true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置 useLabel 为 true 时，不显示 text 内容，由外部 label 控制显示。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 多选框组
|
||||
|
||||
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'checkbox-group',
|
||||
name: 'checkbox',
|
||||
text: '选项',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 },
|
||||
{ text: '选项3', value: 3 }
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
checkbox-group 元素能把多个 checkbox 管理为一组，绑定值为数组类型。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 多选框组禁用选项
|
||||
|
||||
在选项中设置 `disabled` 可禁用单个选项。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'checkbox-group',
|
||||
name: 'checkbox',
|
||||
text: '选项',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2, disabled: true },
|
||||
{ text: '选项3', value: 3 }
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在 options 中设置 disabled: true 可禁用该选项。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 动态选项
|
||||
|
||||
options 支持函数形式，可根据表单状态动态生成选项。
|
||||
|
||||
```typescript
|
||||
{
|
||||
type: 'checkbox-group',
|
||||
name: 'checkbox',
|
||||
text: '选项',
|
||||
options: (mForm, { model, formValue }) => {
|
||||
// 根据表单值动态返回选项
|
||||
return [
|
||||
{ text: '选项A', value: 'a' },
|
||||
{ text: '选项B', value: 'b' }
|
||||
];
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Checkbox Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------|------|------|--------|--------|
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| activeValue | 选中时的值 | string / number | — | true（filter 为 'number' 时默认 1） |
|
||||
| inactiveValue | 未选中时的值 | string / number | — | false（filter 为 'number' 时默认 0） |
|
||||
| useLabel | 是否使用外部 label 显示 | boolean | — | false |
|
||||
| filter | 值过滤器 | 'number' / Function | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
|
||||
## CheckboxGroup Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------|------|------|--------|--------|
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| options | 选项列表 | Array / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
|
||||
## options item
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------|------|------|--------|--------|
|
||||
| value | 选项的值 | any | — | — |
|
||||
| text | 选项的标签 | string | — | — |
|
||||
| disabled | 是否禁用该选项 | boolean | — | false |
|
||||
@ -1,86 +0,0 @@
|
||||
# ColorPicker 颜色选择器
|
||||
|
||||
用于颜色选择，支持多种颜色格式，包括透明度设置。
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
text: '颜色选择器',
|
||||
type: 'colorPicker',
|
||||
name: 'color'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
type 为 'colorPicker'，默认支持透明度选择（showAlpha: true）。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
text: '颜色选择器',
|
||||
type: 'colorPicker',
|
||||
name: 'color',
|
||||
disabled: true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置 disabled 属性可禁用颜色选择器。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 设置默认值
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
text: '颜色选择器',
|
||||
type: 'colorPicker',
|
||||
name: 'color',
|
||||
defaultValue: '#409EFF'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
通过 defaultValue 设置默认颜色值。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 带透明度的颜色
|
||||
|
||||
颜色选择器默认开启透明度选择，返回值为 rgba 格式。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
text: '颜色选择器',
|
||||
type: 'colorPicker',
|
||||
name: 'color',
|
||||
defaultValue: 'rgba(64, 158, 255, 0.5)'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
支持 rgba 格式的颜色值，可以设置透明度。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## ColorPicker Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|------|------|------|--------|--------|
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | false |
|
||||
| defaultValue | 默认颜色值 | string | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form-schema/src/base.ts) | — | — |
|
||||
|
||||
## 颜色格式说明
|
||||
|
||||
支持以下颜色格式：
|
||||
|
||||
| 格式 | 示例 | 说明 |
|
||||
|------|------|------|
|
||||
| HEX | #409EFF | 十六进制颜色值 |
|
||||
| RGB | rgb(64, 158, 255) | RGB 颜色值 |
|
||||
| RGBA | rgba(64, 158, 255, 0.5) | 带透明度的 RGBA 颜色值 |
|
||||
| HSL | hsl(210, 100%, 63%) | HSL 颜色值 |
|
||||
| HSLA | hsla(210, 100%, 63%, 0.5) | 带透明度的 HSLA 颜色值 |
|
||||
@ -1,112 +0,0 @@
|
||||
# DatePicker 日期选择器
|
||||
|
||||
用于选择或输入日期
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'date',
|
||||
name: 'date',
|
||||
text: '日期选择器'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
以日期为基本单位，基础的日期选择控件
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'date',
|
||||
name: 'date',
|
||||
text: '日期选择器',
|
||||
disabled: () => true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
通过 <code>disabled</code> 属性禁用日期选择器
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 占位符
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'date',
|
||||
name: 'date',
|
||||
text: '日期选择器',
|
||||
placeholder: '请选择日期'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
通过 <code>placeholder</code> 属性设置输入框占位文本
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 日期格式
|
||||
|
||||
使用`format`指定输入框的格式；使用`valueFormat`指定绑定值的格式。
|
||||
|
||||
默认情况下，组件的 `format` 默认值为 `YYYY/MM/DD`，`valueFormat` 默认值为 `YYYY/MM/DD`。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
|
||||
|
||||
:::warning
|
||||
请注意大小写
|
||||
:::
|
||||
|
||||
| 格式 | 含义 | 备注 | 举例 |
|
||||
|------|------|------|------|
|
||||
| `YYYY` | 年 | | 2017 |
|
||||
| `M` | 月 | 不补0 | 1 |
|
||||
| `MM` | 月 | | 01 |
|
||||
| `D` | 日 | 不补0 | 2 |
|
||||
| `DD` | 日 | | 02 |
|
||||
| `H` | 小时 | 24小时制；不补0 | 3 |
|
||||
| `HH` | 小时 | 24小时制 | 03 |
|
||||
| `h` | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3 |
|
||||
| `hh` | 小时 | 12小时制，须和 `A` 或 `a` 使用 | 03 |
|
||||
| `m` | 分钟 | 不补0 | 4 |
|
||||
| `mm` | 分钟 | | 04 |
|
||||
| `s` | 秒 | 不补0 | 5 |
|
||||
| `ss` | 秒 | | 05 |
|
||||
| `x` | JS时间戳 | 组件绑定值为`number`类型 | 1483326245000 |
|
||||
| `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM |
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'date',
|
||||
name: 'date',
|
||||
text: '日期选择器',
|
||||
format: 'YYYY-MM-DD',
|
||||
valueFormat: 'x'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置 <code>valueFormat</code> 为 <code>timestamp</code>，绑定值将返回时间戳格式
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 绑定值的字段名 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD |
|
||||
| valueFormat | 绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#日期格式) | YYYY/MM/DD |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | — |
|
||||
|
||||
## TypeScript 定义
|
||||
|
||||
```typescript
|
||||
interface DateConfig extends FormItem, Input {
|
||||
type: 'date';
|
||||
format?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
valueFormat?: 'YYYY-MM-dd HH:mm:ss' | string;
|
||||
}
|
||||
```
|
||||
|
||||
@ -1,46 +0,0 @@
|
||||
# DateRangePicker 日期范围选择器
|
||||
|
||||
用于选择或输入日期范围
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'daterange',
|
||||
name: 'daterange',
|
||||
text: '日期范围'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
type为'daterange'
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 绑定多个字段
|
||||
|
||||
可以通过配置 `names` 来将日期范围绑定到两个不同的字段上。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'daterange',
|
||||
names: ['startTime', 'endTime'],
|
||||
text: '日期范围'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置 names 属性，将开始时间和结束时间分别绑定到 startTime 和 endTime 字段。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 绑定值（数组形式） | string | — | — |
|
||||
| names | 绑定值（拆分为两个字段） | string[] | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| dateFormat | 日期格式 | string | — | YYYY/MM/DD |
|
||||
| timeFormat | 时间格式 | string | — | HH:mm:ss |
|
||||
| valueFormat | 绑定值的格式 | string | — | YYYY/MM/DD HH:mm:ss |
|
||||
| defaultTime | 默认时间 | Date[] | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,104 +0,0 @@
|
||||
# DateTimePicker 日期时间选择器
|
||||
|
||||
在同一个选择器里选择日期和时间
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'datetime',
|
||||
name: 'dateTime',
|
||||
text: '日期时间选择器'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
通过设置 <code>type: 'datetime'</code> 使用日期时间选择器，可以同时选择日期和时间。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 带占位符
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'datetime',
|
||||
name: 'dateTime',
|
||||
text: '日期时间选择器',
|
||||
placeholder: '请选择日期时间'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
通过 <code>placeholder</code> 属性设置输入框的占位文本。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'datetime',
|
||||
name: 'dateTime',
|
||||
text: '日期时间选择器',
|
||||
disabled: () => true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
通过 <code>disabled</code> 属性禁用日期时间选择器，支持布尔值或函数。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 日期格式
|
||||
|
||||
使用 `format` 指定输入框的格式；使用 `valueFormat` 指定绑定值的格式。
|
||||
|
||||
默认情况下，组件接受并返回格式化后的字符串。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
|
||||
|
||||
:::warning
|
||||
请注意大小写
|
||||
:::
|
||||
|
||||
| 格式 | 含义 | 备注 | 举例 |
|
||||
|------|------|------|------|
|
||||
| `YYYY` | 年 | | 2017 |
|
||||
| `M` | 月 | 不补0 | 1 |
|
||||
| `MM` | 月 | | 01 |
|
||||
| `D` | 日 | 不补0 | 2 |
|
||||
| `DD` | 日 | | 02 |
|
||||
| `H` | 小时 | 24小时制；不补0 | 3 |
|
||||
| `HH` | 小时 | 24小时制 | 03 |
|
||||
| `h` | 小时 | 12小时制，须和 `A` 或 `a` 使用；不补0 | 3 |
|
||||
| `hh` | 小时 | 12小时制，须和 `A` 或 `a` 使用 | 03 |
|
||||
| `m` | 分钟 | 不补0 | 4 |
|
||||
| `mm` | 分钟 | | 04 |
|
||||
| `s` | 秒 | 不补0 | 5 |
|
||||
| `ss` | 秒 | | 05 |
|
||||
| `A` | AM/PM | 仅 `format` 可用，大写 | AM |
|
||||
| `a` | am/pm | 仅 `format` 可用，小写 | am |
|
||||
| `x` | JS时间戳（毫秒） | 仅 `valueFormat` 可用 | 1483326245000 |
|
||||
| `X` | Unix时间戳（秒） | 仅 `valueFormat` 可用 | 1483326245 |
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'datetime',
|
||||
name: 'dateTime',
|
||||
text: '日期时间选择器',
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
valueFormat: 'x'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
自定义格式化：显示格式为 <code>YYYY-MM-DD HH:mm</code>，绑定值格式为时间戳。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 绑定值的字段名 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| format | 显示在输入框中的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss |
|
||||
| valueFormat | 绑定值的格式 | string | 见[日期格式](#日期格式) | YYYY/MM/DD HH:mm:ss |
|
||||
| defaultTime | 选择日期后的默认时间值 | Date | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | — |
|
||||
@ -1,52 +0,0 @@
|
||||
# DynamicField 动态表单
|
||||
|
||||
根据模型中某个字段的值，动态生成一组表单字段。
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'type',
|
||||
text: '类型',
|
||||
options: [
|
||||
{ label: '类型A', value: 'a' },
|
||||
{ label: '类型B', value: 'b' }
|
||||
]
|
||||
}, {
|
||||
type: 'dynamic-field',
|
||||
text: '动态字段',
|
||||
dynamicKey: 'type',
|
||||
returnFields: async (config, model, request) => {
|
||||
if (model.type === 'a') {
|
||||
return [{ name: 'fieldA', label: '字段A', defaultValue: 'valueA' }];
|
||||
} else if (model.type === 'b') {
|
||||
return [{ name: 'fieldB', label: '字段B', defaultValue: 'valueB' }];
|
||||
}
|
||||
return [];
|
||||
}
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
当“类型”发生变化时，“动态字段”会根据 `returnFields` 返回的配置生成不同的输入框。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
:::warning
|
||||
特别注意：`dynamic-field` 的上一级配置必须设置 `extensible: true`，才能保存未在 schema 中声明的动态字段。
|
||||
:::
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| type | 组件类型 | string | dynamic-field | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| dynamicKey | 监听的字段名。当该字段值变化时，触发 `returnFields` 重新计算 | string | — | — |
|
||||
| returnFields | 返回字段列表的函数 | (config, model, request) => Promise<Field[]> | — | — |
|
||||
|
||||
### Field 对象结构
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------- |
|
||||
| name | 字段名 | string | — |
|
||||
| label | 标签名 | string | — |
|
||||
| defaultValue | 默认值 | any | — |
|
||||
@ -1,26 +0,0 @@
|
||||
# NumberRange 数字范围输入框
|
||||
|
||||
用于输入数字范围
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'number-range',
|
||||
name: 'numberRange',
|
||||
text: '数字范围'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
type为'number-range'
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 绑定值（数组形式 [min, max]） | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| clearable | 是否可清空 | boolean | — | true |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,45 +0,0 @@
|
||||
# TimeRangePicker 时间范围选择器
|
||||
|
||||
用于选择或输入时间范围
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'timerange',
|
||||
name: 'timerange',
|
||||
text: '时间范围'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
type为'timerange'
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 绑定多个字段
|
||||
|
||||
可以通过配置 `names` 来将时间范围绑定到两个不同的字段上。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'timerange',
|
||||
names: ['startTime', 'endTime'],
|
||||
text: '时间范围'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置 names 属性，将开始时间和结束时间分别绑定到 startTime 和 endTime 字段。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 绑定值（数组形式） | string | — | — |
|
||||
| names | 绑定值（拆分为两个字段） | string[] | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| format | 显示格式 | string | — | HH:mm:ss |
|
||||
| valueFormat | 绑定值的格式 | string | — | HH:mm:ss |
|
||||
| defaultTime | 默认时间 | Date[] | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,92 +0,0 @@
|
||||
# 代码块
|
||||
代码块是一种低代码能力，tmagic-editor中对组件的逻辑干预主要通过代码块来进行支持
|
||||
|
||||
## 能力展示
|
||||
代码块支持的能力有
|
||||
- 1、在线编辑
|
||||
- 2、参数定义，包括：参数类型定义
|
||||
- 3、自动保存草稿
|
||||
- 4、参数注释
|
||||
下面将主要介绍代码块的实现原理，包含dsl结构定义，以及代码块挂载执行时机等
|
||||
## 协议描述
|
||||
我们将在线编写的代码内容保存在[DSL](../advanced/js-schema.md)中，与app同一层级，这样的好处是代码块可以在同一活动，不同页面中实现灵活编排。
|
||||
类型定义参见[CodeBlockDsl](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/schema/src/index.ts#L75)。
|
||||
|
||||
```javascript
|
||||
[{
|
||||
id: 123456,
|
||||
type: 'app',
|
||||
items: [{
|
||||
id: 222222,
|
||||
type: 'page',
|
||||
items: [{
|
||||
id: 333,
|
||||
type: 'comp-A'
|
||||
}]
|
||||
}],
|
||||
codeBlocks: {
|
||||
code_123: {
|
||||
name: '代码块名称',
|
||||
content: ()=>{},
|
||||
params: [{
|
||||
name: '参数1'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}]
|
||||
```
|
||||
|
||||
在页面中创建代码块也就是会将新的代码内容添加到DSL中的codeBlocks数组并保存下来，这里涉及的逻辑可以参见CodeBlock类中的[setCodeDslById](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/services/codeBlock.ts#L107)方法。
|
||||
并且可以在编辑器左侧的“代码块”tab下看到当前活动的代码块列表
|
||||
<img src="/code-block.png" alt="代码块列表">
|
||||
|
||||
## 组件绑定
|
||||
代码块的初衷是为了实现对组件逻辑的在线干预（代码执行的时机平台提供了组件created, mounted两个钩子），因此我们需要将创建的代码与组件进行关联。
|
||||
<img src="https://vip.image.video.qpic.cn/vupload/20230228/4a34a11677585505930.png" alt="组件绑定代码块">
|
||||
选中组件之后，在组件配置-高级tab下需要支持下拉选择代码块，以及代码参数的输入。由于每一个组件绑定代码块的需求都是相同的，因此这一部分我们可以抽出为公共的表单配置，相关的逻辑处理在[prop文件](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/utils/props.ts#L223)中，我们在高级tab下统一添加了名为created和mounted两个配置项，表单组件使用了自定义的'code-select'。前面已经提过，表单组件会按照type字段来进行渲染，即 :is="${type}"，[CodeSelect](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/editor/src/fields/CodeSelect.vue)组件是在editor中自定义的
|
||||
|
||||
完成绑定的动作实质就是在组件配置中增加与代码块的映射关系
|
||||
```javascript
|
||||
[
|
||||
{
|
||||
id: '111',
|
||||
type: 'comp_A',
|
||||
created: {
|
||||
hookType: 'code',
|
||||
hookData: [
|
||||
{
|
||||
codeId: 'code_123',
|
||||
params: {
|
||||
age: 12,
|
||||
studentName: 'lisa'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
## 代码内容注入与执行
|
||||
在实现代码块创建和绑定操作之后，DSL已经包含了代码块执行所需的所有信息，接下来我们在页面加载时对代码块进行解析，并在适当的时机运行。
|
||||
|
||||
由于代码块的执行时机为组件created，mounted，因此触发执行的动作需要在runtime中完成，对于VUE3来说，我们在组件对应的生命周期去触发就可以了，react则需要在类似的时间点去触发，详细请参见[ui](https://github.com/Tencent/tmagic-editor/blob/master/packages/ui/src/useApp.ts#L29)
|
||||
|
||||
接收事件的动作是在[Core](https://github.com/Tencent/tmagic-editor/blob/c143a5f7670ae61d80c1a2cfcc780cfb5259849d/packages/core/src/Node.ts)中完成的，请记得前面提到过Core主要负责对组件进行跨框架管理与一些通用复杂逻辑的实现，触发时机各个框架不同，但接收事件并执行代码块的逻辑与框架无关。[Core/Node](https://github.com/Tencent/tmagic-editor/blob/master/packages/core/src/Node.ts#L56)会对生命周期事件进行监听，并根据组件绑定的代码块ID拿到具体的代码内容，然后执行。在执行调用时我们以{ app, params }的形式传入了两个参数，其中app包含了全局的变量，params为组件绑定时针对代码块传入的参数。
|
||||
|
||||
至此，我们就完成了代码块创建-绑定-注入-运行。与代码块功能相关的UI界面中我们也提供了丰富的插槽供开发者扩展，相关源码请见[sidebar/codeBlock](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor/src/layouts/sidebar/code-block)。
|
||||
|
||||
## 代码块界面展示
|
||||
侧边栏的代码块列表可以查看当前创建的代码块，以及每个代码块绑定的组件，点击代码块下方展示的组件icon可以在画布中选中该组件
|
||||
<img src="/code-block-list.png" alt="代码块列表">
|
||||
|
||||
代码块编辑面板，可以在这里编写代码内容，申明参数
|
||||
<img src="https://vip.image.video.qpic.cn/vupload/20230228/1fd2e11677637006239.png" alt="代码块编辑面板">
|
||||
|
||||
组件高级tab下绑定代码块，可以输入参数值，查看注释，打开代码编辑面板
|
||||
<img src="https://vip.image.video.qpic.cn/vupload/20230301/b2c8431677637119126.png" alt="绑定代码块">
|
||||
|
||||
保存后点击预览，可以看到在控制台打出了我们打印的日志内容
|
||||
<img src="https://vip.image.video.qpic.cn/vupload/20230301/672f8a1677637682103.png" alt="预览">
|
||||
|
||||
|
||||
@ -1,105 +0,0 @@
|
||||
# 数据源
|
||||
|
||||
## 使用数据源
|
||||
|
||||
### 添加数据源
|
||||
|
||||
在编辑器左侧边栏中选中数据源，在数据源面板右上角添加中选择对应的数据源类型（默认提供了两种基础的数据源）
|
||||
|
||||
[](/data-source.png){target="_blank"}
|
||||
|
||||
### 配置属性字段
|
||||
|
||||
[](/create-data-source.png){target="_blank"}
|
||||
|
||||
#### 基础数据源
|
||||
|
||||
静态数据，不会自动更新，可以通过配置方法，在方法中更新数据源
|
||||
|
||||
```js
|
||||
({ dataSource, app }) => {
|
||||
dataSource.setData({
|
||||
// 数据
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
然后再组件的事件联动中关联此方法，来触发数据源更新
|
||||
|
||||
#### HTTP数据源
|
||||
|
||||
通过配置HTTP相关参数(url, query, body, header等)通过网络api获取数据，该数据源拥有request方法，可通过此方法来刷新数据源
|
||||
|
||||
```js
|
||||
({ dataSource, app }) => {
|
||||
dataSource.request();
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 在组件中使用
|
||||
|
||||
|
||||
#### 数据源模板输入框（data-source-input）
|
||||
|
||||
formConfig.js
|
||||
```js
|
||||
[
|
||||
{
|
||||
type: 'data-source-input'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
[](/data-source-input.png){target="_blank"}
|
||||
|
||||
#### 数据源字段选择器输入框（data-source-field-select)
|
||||
|
||||
formConfig.js
|
||||
```js
|
||||
[
|
||||
{
|
||||
type: 'data-source-filed-select'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 数据源选择器（data-source-select)
|
||||
|
||||
|
||||
formConfig.js
|
||||
```js
|
||||
[
|
||||
{
|
||||
type: 'data-source-select'
|
||||
}
|
||||
]
|
||||
```
|
||||
#### 数据源方法选择器（data-source-method-select)
|
||||
|
||||
formConfig.js
|
||||
```js
|
||||
[
|
||||
{
|
||||
type: 'data-source-method-select'
|
||||
}
|
||||
]
|
||||
```
|
||||
|
||||
#### 显示条件
|
||||
|
||||
当配置的条件成立时显示，反之隐藏
|
||||
|
||||
[](/display-cond.png){target="_blank"}
|
||||
|
||||
## 数据源开发
|
||||
|
||||
### 数据源规范
|
||||
|
||||
数据源的基础形式，需要有四个文件
|
||||
- index 入口文件，引入下面几个文件
|
||||
- formConfig 表单配置描述
|
||||
- initValue 表单初始值
|
||||
- event 定义联动事件，具体可以参考[组件联动](./coupling.html#组件联动)
|
||||
- dataSource 数据源逻辑代码
|
||||
|
||||
@ -1,23 +0,0 @@
|
||||
# @tmagic/ui
|
||||
在前面[页面渲染](../advanced/page)中提到的 UI 渲染器，就是包含在 @tmagic/ui 中的渲染器组件。
|
||||
|
||||
tmagic-editor的设计是希望发布的页面支持多个前端框架，即各个业务方可以根据自己熟悉的语言来开发组件、发布页面。也可以通过 [实现一个 runtime](../runtime.html) 的方式，来实现一个自己的 @tmagic/ui。
|
||||
|
||||
所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 来 @tmagic/ui 和业务组件的，具体 runtime 概念，可以参考[页面发布](../publish)。
|
||||
|
||||
我们以项目代码中提供的 vue 版本的 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 作为示例介绍其中包含的内容。
|
||||
|
||||
## 渲染器
|
||||
在 vue 中，实现渲染器的具体形式参考[页面渲染](../advanced/page)中描述的[容器渲染](../advanced/page.html#容器渲染)和[组件渲染](../advanced/page.html#容器渲染)。
|
||||
|
||||
## 基础组件
|
||||
在 [vue-components](https://tencent.github.io/tmagic-editor/vue-components) 中，我们提供了几个基础组件，可以在项目源码中找到对应内容。
|
||||
|
||||
- page tmagic-editor的页面基础
|
||||
- container tmagic-editor的容器渲染器
|
||||
- Component.vue tmagic-editor的组件渲染器
|
||||
- button/text 基础组件示例
|
||||
|
||||
其中 page/container/Component 是 UI 的基础，是每个框架的 UI 都应该实现的。
|
||||
|
||||
button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考[组件开发](../component)。
|
||||
@ -1,220 +0,0 @@
|
||||
# 如何开发一个组件
|
||||
tmagic-editor支持业务方进行自定义组件开发。在tmagic-editor中，组件是以 npm 包形式存在的，组件和插件只要按照规范开发，就可以在tmagic-editor的 runtime 中被加入并正确渲染组件。
|
||||
|
||||
### 组件规范
|
||||
组件的基础形式，需要有四个文件
|
||||
- index 入口文件，引入下面几个文件
|
||||
- form-config 表单配置描述
|
||||
- init-value 表单初始值
|
||||
- event 定义联动事件，具体可以参考[组件联动](../guide/advanced/coupling.html#组件联动)
|
||||
- component.{vue,jsx} 组件样式、逻辑代码
|
||||
|
||||
### 1. 创建组件
|
||||
|
||||
可以使用`npm create tmagic` 选择 `components:组件库(组件/插件/数据源)` 来快速创建一个组件库。
|
||||
|
||||
然后继续使用`npm create tmagic` 选择 `component:组件` 来快速创建一个组件。
|
||||
|
||||
:::tip
|
||||
|
||||
组件库并不是必须，组件如何管理可以根据具体情况来选择。直接放到 runtime 目录中也是一个不错的选择，如果选择放到runtime中可以在runtime中的package.json添加
|
||||
```json
|
||||
{
|
||||
"createTmagic": {
|
||||
"componentsPath": "./components",
|
||||
"pluginsPath": "./plugins",
|
||||
"dataSourcesPath": "./dataSources"
|
||||
}
|
||||
}
|
||||
```
|
||||
来指定组件库的路径。这样在使用`npm create tmagic` 来创建组件时，会自动将组件添加到组件库中。
|
||||
:::
|
||||
|
||||
:::tip
|
||||
如需为组件添加npm scope name，可以在runtime中的package.json中添加
|
||||
```json
|
||||
{
|
||||
"createTmagic": {
|
||||
"npmScopeName": "@tmagic"
|
||||
}
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
手动创建组件，可以在项目中，如 runtime 目录中，创建一个名为 test-component 的组件目录，其中包含上面四个规范文件。
|
||||
```javascript
|
||||
// index.js
|
||||
// vue
|
||||
import Test from './Test.vue';
|
||||
// react
|
||||
import Test from './Test.tsx';
|
||||
|
||||
export { default as config } from './form-config';
|
||||
export { default as value } from './init-value';
|
||||
|
||||
export default Test;
|
||||
```
|
||||
|
||||
:::tip
|
||||
如果在runtime中使用了@tmagic/cli，则必须保持此规范；不使用则可以自由书写。
|
||||
:::
|
||||
|
||||
```javascript
|
||||
// form-config.js
|
||||
export default [
|
||||
{
|
||||
type: 'select',
|
||||
text: '字体颜色',
|
||||
name: 'color',
|
||||
options: [
|
||||
{
|
||||
text: '红色字体',
|
||||
value: 'red',
|
||||
},
|
||||
{
|
||||
text: '蓝色字体',
|
||||
value: 'blue',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: 'text',
|
||||
text: '配置文案',
|
||||
},
|
||||
];
|
||||
```
|
||||
|
||||
:::tip
|
||||
配置内容必须是一个数组，每个元素是一个对象，包含 type、text、name 等属性，每个对象代表一个表单项。
|
||||
|
||||
type 是表单项的类型
|
||||
|
||||
text 是表单项的文本
|
||||
|
||||
name 是表单项值的key。
|
||||
|
||||
上述实例对应生成的值为
|
||||
```json
|
||||
{
|
||||
"color": "red",
|
||||
"text": "一段文字",
|
||||
}
|
||||
```
|
||||
|
||||
type 在@tmagic/form 和 @tmagic/editor 中默认提供了一些，@tmagic/form提供的可以前往[表单配置](/form-config/fields/text.html)查看。
|
||||
:::
|
||||
|
||||
|
||||
```javascript
|
||||
// init-value.js
|
||||
export default {
|
||||
color: 'red',
|
||||
text: '一段文字',
|
||||
};
|
||||
```
|
||||
|
||||
:::tip
|
||||
在编辑器中添加组件时使用，作为初始值。
|
||||
:::
|
||||
|
||||
Vue版本的组件代码示例
|
||||
```vue
|
||||
<!-- Test.vue -->
|
||||
<template>
|
||||
<div>
|
||||
<span>this is a Test component:</span>
|
||||
<span :style="{ color: config.color }">{{ config.text }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineOptions({
|
||||
name: 'magic-ui-test',
|
||||
});
|
||||
|
||||
defineProps({
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
}):
|
||||
</script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
编辑器中配置的 config 对象，会作为 props 传入组件中。
|
||||
:::
|
||||
|
||||
react 版本组件代码示例
|
||||
```javascript
|
||||
// Test.tsx
|
||||
import React, { useContext } from 'react';
|
||||
|
||||
import Core from '@tmagic/core';
|
||||
import { AppContent } from '@tmagic/ui-react';
|
||||
|
||||
function Test({ config }: { config: any }) {
|
||||
const app = useContext<Core | undefined>(AppContent);
|
||||
console.log(app)
|
||||
|
||||
return (<div id={config.id}
|
||||
style={app.transformStyle(config.style || {})}>
|
||||
<span>this is a Test component:</span>
|
||||
<span style={ { color: config.color }}>{ config.text }</span>
|
||||
</div>);
|
||||
}
|
||||
|
||||
export default Test;
|
||||
|
||||
```
|
||||
|
||||
## 插件开发
|
||||
插件开发和组件开发形式类似，但是插件开发不需要有组件的规范。
|
||||
|
||||
我们只需要在插件中提供一个入口文件。插件需要提供一个 install 方法。
|
||||
|
||||
```javascript
|
||||
// 在Vue的runtime中
|
||||
export default {
|
||||
install(vueApp, { app: tmagicApp }) {}
|
||||
}
|
||||
```
|
||||
|
||||
```javascript
|
||||
// 在React的runtime中
|
||||
export default {
|
||||
install({ app: tmagicApp }) {}
|
||||
}
|
||||
```
|
||||
|
||||
在插件中开发者可以自由实现需要的业务逻辑。
|
||||
|
||||
## 集成到runtime中
|
||||
|
||||
### 使用@tmagic/cli
|
||||
|
||||
在使用`npm create tmagic` 创建的runtime中，自动集成了@tmagic/cli，将组件集成到此runtime中只需要在`tmagic.config.ts`中的packages字段中添加
|
||||
```javascript
|
||||
import { defineConfig } from '@tmagic/cli';
|
||||
|
||||
export default defineConfig({
|
||||
// other config
|
||||
packages: [
|
||||
{
|
||||
'组件type': '组件目录或者npm包名',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
:::tip
|
||||
组件type需要与[componentGroupList](../api/editor/props.html#componentgrouplist)中的type对应。
|
||||
:::
|
||||
|
||||
|
||||
配置到packages字段中后，执行`npm run tmagic`来创建组件库的入口文件。
|
||||
|
||||
然后使用`npm run build:libs`命令来构建用于编辑器中的组件配置、组件初始值、组件事件联动的资源文件。
|
||||
|
||||
@ -1,220 +0,0 @@
|
||||
# 编辑器扩展
|
||||
|
||||
编辑器布局组成部分名称如下图，后续将直接使用图中名称指代其部分
|
||||
|
||||
<img src="/layout.png" width="100%">
|
||||
|
||||
## UI扩展
|
||||
|
||||
### 一、顶部菜单栏定制
|
||||
|
||||
通常使用 `m-editor` 组件的 [menu](/api/editor/props.html#menu) `prop` 来对齐进行设置；
|
||||
|
||||
顶部菜单栏分为`左` `中` `右`三个部分组成，所以 [menu](/api/editor/props.html#menu) `prop`的数据格式如下：
|
||||
|
||||
```js
|
||||
{ left: [], center: [], right: [] }
|
||||
```
|
||||
|
||||
数组的内容可以有三种种形式：`内部定义好的字符串`、`其他字符串`、`MenuButton 或者 MenuComponent 对象`
|
||||
|
||||
#### 1. 内部定义好的字符串:
|
||||
```ts
|
||||
'/' | 'delete' | 'undo' | 'redo' | 'zoom' | 'zoom-in' | 'zoom-out' | 'guides' | 'rule' | 'scale-to-original' | 'scale-to-fit'
|
||||
```
|
||||
|
||||
是组件内部定义的可直接使用的内置功能，具体含义可以查看 [menu](/api/editor/props.html#menu)
|
||||
|
||||
#### 2. 其他字符串
|
||||
|
||||
除去[内部定好的字符串](#内部定义好的字符串)的其他字符串，则会被当成普通文本直接显示
|
||||
|
||||
|
||||
#### 3. `MenuButton` 或者 `MenuComponent` 对象
|
||||
|
||||
MenuButton 的[定义](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L168)
|
||||
|
||||
用于自定义一个按钮，例如定义一个返回按钮可以由如下配置实现
|
||||
|
||||
```js
|
||||
{
|
||||
type: 'buuton',
|
||||
text: '返回',
|
||||
handler: () => window.history.back(),
|
||||
}
|
||||
```
|
||||
|
||||
如果需要更复杂的功能则可以使用 `MenuComponent`, 可以用于实现渲染任意一个Vue组件
|
||||
|
||||
`MenuComponent` 的[定义](https://github.com/Tencent/tmagic-editor/blob/239b5d3efeae916a8cf3e3566d88063ecccc0553/packages/editor/src/type.ts#L197C18-L197C32)
|
||||
|
||||
:::tip
|
||||
如果对内置的顶部菜单栏实现不满意还可以使用自定义的实现完全替换掉
|
||||
|
||||
```html
|
||||
<m-editor>
|
||||
<template #nav>
|
||||
<your-nav></your-nav>
|
||||
</template>
|
||||
</m-editor>
|
||||
```
|
||||
:::
|
||||
|
||||
### 二、左侧菜单栏
|
||||
|
||||
左侧菜单栏主要展示组件列表、组件树、代码块、数据源等内容。可以通过 `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);
|
||||
});
|
||||
```
|
||||
|
||||
### 三、右侧属性配置栏
|
||||
|
||||
默认的属性配置栏会分为属性、样式、事件、高级4个tab分页，其中只有属性是在组件中的`formConfig`文件中定义，其他三个分页都是自动生成的，所有组件都是一样的。
|
||||
|
||||
默认的属性读取流程如下：
|
||||
|
||||
组件中定义`formConfig` -> 通过`tamgic-cli`构建成 `runtime` 中 `/config/index.umd.cjs` -> `m-editor`中加载然后配置到[propsConfig](/api/editor/props.html#propsconfigs) prop中 -> `m-editor`保存到`propsService`中 -> 选中组件时`editorService`会去`propsService`调用`getPropsConfig`中读取
|
||||
|
||||
`propsService.getPropsConfig`会调取`propsService.fillConfig`添加样式、事件、高级3个tab分页
|
||||
|
||||
#### 1. 定制属性配置栏中顶部的属性、样式、事件、高级 tab分页
|
||||
|
||||
可以通过干预`propsService.fillConfig`来实现自定义。例如：
|
||||
|
||||
实现去掉样式、事件、高级3个tab分页，直接显示组件内定义好的配置
|
||||
```js
|
||||
propsService.usePlugin({
|
||||
/**
|
||||
* result为生成好的默认配置
|
||||
* config为组件中定义好的配置
|
||||
*/
|
||||
afterFillConfig(result, config) {
|
||||
return config
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### 2. 定制属性配置栏中配置的来源
|
||||
|
||||
如果觉得上述属性读取流程不满足需要，可以通过干预`propsService.getPropsConfig`来实现自定义的流程
|
||||
|
||||
```js
|
||||
propsService.usePlugin({
|
||||
/**
|
||||
* result为生成好的默认配置
|
||||
* config为组件中定义好的配置
|
||||
*/
|
||||
afterGetPropsConfig(result, type) {
|
||||
// 返回配置DSL即可
|
||||
return []
|
||||
}
|
||||
});
|
||||
```
|
||||
#### 3. 自定义属性配置栏
|
||||
|
||||
默认属性配置栏是是使用`@tmagic/form`来实现的，如果需要使用其他组件来实现可以使用`props-panel`slot来将其替换掉
|
||||
|
||||
```html
|
||||
<m-editor>
|
||||
<template #props-panel>
|
||||
<your-props-panel></your-props-panel>
|
||||
</template>
|
||||
</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;
|
||||
}
|
||||
});
|
||||
```
|
||||
@ -1,231 +0,0 @@
|
||||
# 快速开始
|
||||
|
||||
tmagic-editor的编辑器我们已经封装成一个 npm 包，可以直接安装使用。编辑器是使用 vue3 开发的(仅支持vue3)，但使用编辑器的业务(runtime)可以不限框架，可以用 vue2、react 等开发业务组件。
|
||||
|
||||
::: code-group
|
||||
|
||||
```bash [npm]
|
||||
$ npm create tmagic@latest
|
||||
```
|
||||
|
||||
```bash [pnpm]
|
||||
$ pnpm create tmagic
|
||||
```
|
||||
:::
|
||||
|
||||
按照提示操作可以创建`6`中项目：
|
||||
|
||||
* runtime:运行时（DSL渲染）
|
||||
* admin-client:管理端（编辑器）
|
||||
* components:组件库(组件/插件/数据源)
|
||||
* component:组件
|
||||
* data-source:数据源
|
||||
* plugin:插件
|
||||
|
||||
至少需要一个runtime与admin-client后，就可以运行起一个最简单的项目了。
|
||||
|
||||
后续还需要新增组件、插件、数据源等，可以继续添加后面几种类型的项目。
|
||||
|
||||
新增好一个组件/插件/数据源后可以到runtime/tmagic.config.ts中配置到packages中
|
||||
|
||||
## 手动安装
|
||||
|
||||
node.js >= 18
|
||||
|
||||
可以通过[Vite](https://cn.vitejs.dev/) 或 [Vue CLI](https://cli.vuejs.org/zh/)快速创建项目。
|
||||
|
||||
> 使用Vue CLI生成的项目需要在vue.config.js中加上配置：transpileDependencies: [/@tmagic/]
|
||||
|
||||
```bash
|
||||
$ npm install @tmagic/editor -S
|
||||
```
|
||||
|
||||
由于在实际应用中项目常常会用到例如[element-plus](https://element-plus.org/)、[tdesign-vue-next](https://tdesign.tencent.com/vue-next/overview)等UI组件库。为了能让使用者能够选择不同UI库，[@tmagic/editor](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor)将其中使用到的UI组件封装到[@tmagic/design](https://github.com/Tencent/tmagic-editor/tree/master/packages/design)中，然后通过不同的adapter来指定使用具体的对应的UI库，我们提供了[@tmagic/element-plus-adapter](https://github.com/Tencent/tmagic-editor/tree/master/packages/element-plus-adapter)来支持[element-plus](https://element-plus.org/)，所以还需要安装相关的依赖。
|
||||
|
||||
```bash
|
||||
$ npm install @tmagic/element-plus-adapter element-plus -S
|
||||
```
|
||||
|
||||
editor 中还包含了[monaco-editor](https://microsoft.github.io/monaco-editor/)，所以还需安装monaco-editor，可以参考 monaco-editor 的[配置指引](https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md)。
|
||||
|
||||
```bash
|
||||
$ npm install monaco-editor -S
|
||||
```
|
||||
|
||||
## 快速上手
|
||||
|
||||
## 引入 @tmagic/editor
|
||||
|
||||
在 main.js 中写入以下内容：
|
||||
|
||||
```js
|
||||
import { createApp } from 'vue';
|
||||
import ElementPlus from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
|
||||
import editorPlugin from '@tmagic/editor';
|
||||
import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
import 'element-plus/dist/index.css';
|
||||
import '@tmagic/editor/dist/style.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(ElementPlus, {
|
||||
locale: zhCn,
|
||||
});
|
||||
app.use(router);
|
||||
app.use(editorPlugin, MagicElementPlusAdapter);
|
||||
app.mount('#app');
|
||||
```
|
||||
|
||||
以上代码便完成了 @tmagic/editor 的引入。需要注意的是，样式文件需要单独引入。
|
||||
|
||||
可以参考我们提供的[Playground](https://github.com/Tencent/tmagic-editor/blob/master/playground/src/main.ts)示例实现代码
|
||||
|
||||
## 使用 m-editor 组件
|
||||
|
||||
在 App.vue 中写入以下内容：
|
||||
|
||||
```html
|
||||
<template>
|
||||
<m-editor
|
||||
v-model="dsl"
|
||||
:menu="menu"
|
||||
:runtime-url="runtimeUrl"
|
||||
:props-configs="propsConfigs"
|
||||
:props-values="propsValues"
|
||||
:component-group-list="componentGroupList"
|
||||
>
|
||||
</m-editor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { defineComponent, ref } from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "App",
|
||||
|
||||
setup() {
|
||||
return {
|
||||
menu: ref({
|
||||
left: [
|
||||
// 顶部左侧菜单按钮
|
||||
],
|
||||
center: [
|
||||
// 顶部中间菜单按钮
|
||||
],
|
||||
right: [
|
||||
// 顶部右侧菜单按钮
|
||||
],
|
||||
}),
|
||||
|
||||
dsl: ref({
|
||||
// 初始化页面数据
|
||||
}),
|
||||
|
||||
runtimeUrl: "/runtime/vue/playground/index.html",
|
||||
|
||||
propsConfigs: [
|
||||
// 组件属性列表
|
||||
],
|
||||
propsValues: [
|
||||
// 组件默认值
|
||||
],
|
||||
|
||||
componentGroupList: ref([
|
||||
// 组件列表
|
||||
]),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.m-editor {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
关于 [@tmagic/editor](https://github.com/Tencent/tmagic-editor/tree/master/packages/editor) 组件，更多的属性配置详情请参考[编辑器 API](../api/editor/props.md)。
|
||||
|
||||
其中，**有四个需要注意的属性配置项**：`runtimeUrl` `values` `configs` `componentGroupList`。这是能让我们的编辑器正常运行的关键。
|
||||
|
||||
:::tip
|
||||
如果出现```Preprocessor dependency "sass" not found. Did you install it?```，那么需要install sass
|
||||
|
||||
```bash
|
||||
npm install sass -D
|
||||
```
|
||||
:::
|
||||
|
||||
:::tip
|
||||
如果是使用vite构建工具，如果出现 ```Uncaught ReferenceError: global is not defined```，那么需要再vite.config.js中添加如下配置：
|
||||
|
||||
```js
|
||||
{
|
||||
optimizeDeps: {
|
||||
esbuildOptions: {
|
||||
define: {
|
||||
global: 'globalThis',
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
:::
|
||||
|
||||
## runtimeUrl
|
||||
|
||||
该配置涉及到 [runtime 概念](runtime.md)，tmagic-editor编辑器中心的模拟器画布，是一个 iframe（这里的 `runtimeUrl` 配置的，就是你提供的 iframe 的 url），其中渲染了一个 runtime，用来响应编辑器中的组件增删改等操作。
|
||||
:::tip
|
||||
可以使用`npm create tmagic` 来快速创建一个runtime项目。
|
||||
:::
|
||||
|
||||
## componentGroupList
|
||||
|
||||
`componentGroupList` 是指定左侧组件库内容的配置。此处定义了在编辑器组件库中有什么组件。在添加的时候通过组件 `type` 来确定 runtime 中要渲染什么组件。可以参考 [componentGroupList 配置](../api/editor/props.html#componentgrouplist)。
|
||||
|
||||
## propsConfigs/propsValues
|
||||
|
||||
`propsConfigs` `propsValues` 和 `componentGroupList` 中声明的组件是一一对应的，通过 `type` 来识别属于哪个组件，该配置涉及的内容，就是组件的表单配置描述，在[组件开发中](./component.md)会通过 formConfig 配置来声明这份内容。
|
||||
|
||||
`configs` 既可以通过 hardcode 方式写上每个组件的表单配置，也可以通过组件打包方式得到对应内容，然后通过异步加载来载入。比如：
|
||||
|
||||
```javascript
|
||||
setup() {
|
||||
asyncLoadJs(`/runtime/vue/assets/config.js`).then(() => {
|
||||
propsConfigs.value = window.magicPresetConfigs;
|
||||
});
|
||||
asyncLoadJs(`/runtime/vue/assets/value.js`).then(() => {
|
||||
propsValues.value = window.magicPresetValues;
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
::: tip 如何快速得到一个 configs/values
|
||||
上述的 runtime 产物中，dist 目录中即包含一个 entry 文件夹，在你的项目组件初始化之后，分别异步加载里面的config/index.umd.js、value/index.umd.js。并如上面代码中，赋值给 configs/values 即可。
|
||||
:::
|
||||
|
||||
## 更多
|
||||
|
||||
通过上述步骤，可以快速得到一个初始化的简单编辑器。
|
||||
|
||||
除了上述内容外，文档的其他章节中，也会更深入的描述整个tmagic-editor的设计理念和实现细节。同时你也可以查看我们的[项目源码](https://github.com/Tencent/tmagic-editor)，从源码提供的 playground 和 runtime 示例来开发和理解tmagic-editor。
|
||||
@ -1,89 +0,0 @@
|
||||
# 升级到1.5.x
|
||||
|
||||
## ui npm包的变化
|
||||
|
||||
ui中包含的组件被移除，这些组件由单独的npm包提供。1.5.0以后ui包将变得不重要，只是为了兼容而保留，后续将变废弃。
|
||||
|
||||
建议将runtime中的tmagic.config中的packages配置的ui包改成：
|
||||
|
||||
```js
|
||||
{
|
||||
packages: [
|
||||
{ button: '@tmagic/vue-button',
|
||||
{ container: '@tmagic/vue-container' },
|
||||
{ img: '@tmagic/vue-img' },
|
||||
{ 'iterator-container': '@tmagic/vue-iterator-container' },
|
||||
{ page: '@tmagic/vue-page' },
|
||||
{ 'page-fragment': '@tmagic/vue-page-fragment' },
|
||||
{ 'page-fragment-container': '@tmagic/vue-page-fragment-container' },
|
||||
{ text: '@tmagic/vue-text' },
|
||||
{ overlay: '@tmagic/vue-overlay' },
|
||||
{ qrcode: '@tmagic/vue-qrcode' },
|
||||
],
|
||||
}
|
||||
```
|
||||
:::tip
|
||||
react的也是类似上面的修改
|
||||
:::
|
||||
|
||||
:::tip
|
||||
上述这些组件中只有container是最重要的，不可缺少的，其他都可以换成自己实现的版本。
|
||||
iterator-container/page/page-fragment/page-fragment-container这几个组件编辑中是有做特殊识别的，所以如果希望有完整的功能，也尽量保留
|
||||
:::
|
||||
|
||||
## 对编辑画布中组件的识别
|
||||
|
||||
1.5.0之前是通过识别dom中是否拥有id属性是判断该dom是不是组件的根节点，之后默认会变成识别是否拥有data-tmagic-id
|
||||
|
||||
:::tip
|
||||
此变化是通过container组件来实现的，之前vue是`@tmagic/ui`或者`tmagic/ui-vue2`中的Component组件来实现，`tmagic/ui-react`则是各个组件自己实现，之后vue是由`@tmagic/vue-container`实现，react依然由各个组件自己实现。
|
||||
:::
|
||||
|
||||
如果希望依然保留对id属性的识别，我们也提供方法
|
||||
|
||||
```ts
|
||||
import { setDslDomRelateConfig } from '@tmagic/editor';
|
||||
|
||||
setDslDomRelateConfig('getIdFromEl', (el?: HTMLElement | SVGElement | null) => el?.id);
|
||||
setDslDomRelateConfig(
|
||||
'getElById',
|
||||
(doc?: Document, id?: string | number) => doc?.querySelector(`[id="${id}"]`) as HTMLElement,
|
||||
);
|
||||
setDslDomRelateConfig('setIdToEl', (el: HTMLElement | SVGElement, id: string | number) => {
|
||||
el.id = `${id}`;
|
||||
});
|
||||
```
|
||||
|
||||
:::tip
|
||||
与此相关的`m-editor`组件的[canSelect](/api/editor/props.html#canselect)/[isContainer](/api/editor/props.html#iscontainer)这里配置
|
||||
:::
|
||||
|
||||
## 组件对迭代器容器的支持
|
||||
|
||||
迭代器容器是通过绑定一个数据源的数组字段，然后会去迭代这个数组来渲染容器中的内容，这个是同一个配置的组件将会被渲染多次，这个时候组件配置的事件或者代码块中将无法准确获取中组件，所以需要将迭代的信息提供出来。
|
||||
|
||||
已vue组件为例，需要添加iteratorIndex和iteratorContainerId两个prop
|
||||
|
||||
```ts
|
||||
{
|
||||
props: {
|
||||
// other props
|
||||
iteratorIndex: Array as PropType<number[]>,
|
||||
iteratorContainerId: Array as PropType<Id[]>,
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
然后传个useApp
|
||||
|
||||
```ts
|
||||
useApp({
|
||||
// other args
|
||||
iteratorContainerId: props.iteratorContainerId,
|
||||
iteratorIndex: props.iteratorIndex,
|
||||
})
|
||||
```
|
||||
|
||||
:::tip
|
||||
如果对迭代器容器没有需求的，可以不用
|
||||
:::
|
||||
@ -1,29 +0,0 @@
|
||||
# RUNTIME
|
||||
本章详细介绍如何深入理解tmagic-editor的打包，以及如何根据需求定制，修改tmagic-editor的页面打包发布方案。页面发布、打包相关的定制化开发，需要使用tmagic-editor的业务方，搭建好基于开源tmagic-editor的管理平台、存储服务等配套设施。
|
||||
|
||||
## runtime 是什么
|
||||
|
||||
runtime是用来解析DSL的执行环境，用于渲染 DSL 呈现页面。
|
||||
|
||||
编辑器生成出来的DSL需要通过 runtime 来渲染。
|
||||
|
||||
## 实现一个 runtime
|
||||
|
||||
:::tip
|
||||
可以使用`npm create tmagic` 来快速创建一个runtime项目。
|
||||
:::
|
||||
|
||||
创建出来的项目会包含page、playground两个目录。
|
||||
```bash
|
||||
.
|
||||
├── page
|
||||
├── playground
|
||||
```
|
||||
|
||||
page用于生产环境
|
||||
|
||||
playground用于编辑器中
|
||||
|
||||
:::tip
|
||||
想要了解DSL的解析以及runtime与编辑器的通信，可以前往[教程](/guide/tutorial/index.md)
|
||||
:::
|
||||
@ -1,288 +0,0 @@
|
||||
# 1.Hello World
|
||||
|
||||
## 环境准备
|
||||
|
||||
使用[@vue/cli](https://cli.vuejs.org/zh/guide/installation.html)初始化项目
|
||||
|
||||
```bash
|
||||
npm install -g @vue/cli
|
||||
```
|
||||
|
||||
> 由于大部分新的webpack插件都已不支持webpack5以下，建议使用@vue/cli@5.0.0及以上版本
|
||||
> 如现有项目是webpack4的，需要注意安装node_module时使用对应的版本
|
||||
> 使用@vue/cli@4的，需要在vue.config.ts 中加入 transpileDependencies: [/@tmagic/]
|
||||
|
||||
::: tip
|
||||
虽然这里使用@vue/cli作为示例教程，但是更推荐使用[vite](https://github.com/vitejs/vite)
|
||||
:::
|
||||
|
||||
::: warning
|
||||
:warning: 如用node 16安装不成功，可以尝试用node 14
|
||||
:::
|
||||
|
||||
## 创建项目
|
||||
|
||||
[关于@vue/cli的详细教程可以查看官方文档](https://cli.vuejs.org/zh/guide/installation.html)
|
||||
|
||||
```bash
|
||||
vue create hello-world
|
||||
|
||||
cd hello-world
|
||||
```
|
||||
|
||||
得到项目目录如下
|
||||
|
||||
```
|
||||
.
|
||||
└─hello-world
|
||||
└─ public
|
||||
└─ test
|
||||
└─ src
|
||||
├─ APP.vue
|
||||
├─ main.ts
|
||||
└─ components
|
||||
└─ HelloWorld.vue
|
||||
└─ vue.config.js
|
||||
...
|
||||
```
|
||||
|
||||
> src/components在本次教程中暂时没有用到，可以删掉；
|
||||
|
||||
## 添加依赖
|
||||
|
||||
```bash
|
||||
npm install --save @tmagic/editor @tmagic/element-plus-adapter element-plus
|
||||
```
|
||||
|
||||
## 注册组件
|
||||
|
||||
将以下代码覆盖到src/main.ts中
|
||||
|
||||
```ts
|
||||
import 'element-plus/dist/index.css';
|
||||
import '@tmagic/editor/dist/style.css';
|
||||
|
||||
import { createApp } from 'vue';
|
||||
import ElementPlus from 'element-plus';
|
||||
|
||||
import TMagicEditor from '@tmagic/editor';
|
||||
import TMagicElementPlusAdapter from '@tmagic/element-plus-adapter';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
createApp(App)
|
||||
.use(ElementPlus)
|
||||
.use(TMagicEditor, TMagicElementPlusAdapter)
|
||||
.mount('#app');
|
||||
```
|
||||
|
||||
## 渲染编辑器
|
||||
|
||||
将以下代码覆盖到src/App.vue中
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<m-editor
|
||||
v-model="value"
|
||||
:render="render"
|
||||
:component-group-list="componentGroupList"
|
||||
></m-editor>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const value = ref();
|
||||
|
||||
const componentGroupList = ref([]);
|
||||
|
||||
const render = () => window.document.createElement('div');
|
||||
</script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body,
|
||||
#app,
|
||||
.m-editor {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
```
|
||||
|
||||
## 运行项目
|
||||
|
||||
```bash
|
||||
npm run serve
|
||||
```
|
||||
|
||||
到这里一个空白的编辑器就运行起来了。不出意外，通过浏览器访问 **http:\/\/localhost:8081/** ，将看到
|
||||
|
||||
<img src="/tutorial/one/init.png" />
|
||||
|
||||
## 添加组件列表
|
||||
|
||||
api详情：[componentGroupList](../../api/editor/props.md#componentgrouplist)
|
||||
|
||||
```ts
|
||||
const componentGroupList = ref([
|
||||
{
|
||||
title: '组件列表',
|
||||
items: [
|
||||
{
|
||||
icon: 'https://vfiles.gtimg.cn/vupload/20220614/9cc3091655207317835.png',
|
||||
text: 'HelloWorld',
|
||||
type: 'hello-world',
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
```
|
||||
|
||||
到这里，左侧会出现一个叫HelloWorld的爱心图标，点击它会发现没有反应，打开控制台会发现有error；这是因为还没有创建页面
|
||||
|
||||
点击中间的新增页面也会发现没有反应，这是因为没有编辑器初始值，只需要给value赋上初始值就可以了
|
||||
|
||||
## 设置编辑器初始值
|
||||
|
||||
api详情：[modelValue](../../api/editor/props.md#modelvalue-v-model)
|
||||
|
||||
```ts
|
||||
const value = ref({
|
||||
type: 'app',
|
||||
// 必须加上ID，这个id可能是数据库生成的key，也可以是生成的uuid
|
||||
id: 1,
|
||||
items: [],
|
||||
});
|
||||
```
|
||||
|
||||
加上初始值后，点击新增页面就可以渲染出一个画布了，但是点击添加HelloWorld组件依然没有反应
|
||||
|
||||
这是因为这时的编辑器并能理解HelloWorld是什么，需要在[render](../../api/editor/props.html#render)函数中处理
|
||||
|
||||
## 渲染
|
||||
|
||||
api详情：[render](../../api/editor/props.md#render)
|
||||
|
||||
```ts
|
||||
const render = () => {
|
||||
const root = window.document.createElement('div');
|
||||
const page = value.value.items[0];
|
||||
|
||||
if (!page) return root;
|
||||
|
||||
root.id = `${page.value.id}`;
|
||||
|
||||
createApp(
|
||||
{
|
||||
template: '<p v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</p>',
|
||||
props: ['config'],
|
||||
},
|
||||
{
|
||||
config: page,
|
||||
},
|
||||
).mount(root);
|
||||
|
||||
return root;
|
||||
};
|
||||
```
|
||||
|
||||
这里用到了动态编译Vue模板，所以需要在vue.config.js中添加vue alias
|
||||
|
||||
```js
|
||||
configureWebpack: {
|
||||
resolve: {
|
||||
alias: {
|
||||
vue$: 'vue/dist/vue.esm-bundler.js',
|
||||
},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
> render函数中获取page是通过value.value.items[0]，这样只是表示第一个页面，如果页面有多个页面就会有问题
|
||||
> 可以通过[editorService.get('page')](../../api/editor/editorServiceMethods.md#get)获取到当前选中的页面
|
||||
|
||||
```ts
|
||||
import { editorService } from '@tmagic/editor';
|
||||
import type { MPage } from '@tmagic/schema';
|
||||
|
||||
const page = computed(() => editorService.get<MPage>('page'))
|
||||
```
|
||||
|
||||
到这已经能渲染出HelloWorld组件了，但是会发现无法选中，因为这时并不知道画布中的Dom已经发生变化，所以需要通知编辑器
|
||||
|
||||
需要调用
|
||||
|
||||
```ts
|
||||
renderer.iframe.contentWindow.magic?.onRuntimeReady({});
|
||||
renderer.iframe.contentWindow.magic?.onPageElUpdate(root);
|
||||
```
|
||||
> render函数接收一个stageCore参数 [StageCore](../../api/stage/coreMethods.md)
|
||||
|
||||
最终完整的render函数实现
|
||||
|
||||
```ts
|
||||
import type StageCore from '@tmagic/stage';
|
||||
|
||||
const render = async ({ renderer }: StageCore) => {
|
||||
const root = window.document.createElement('div');
|
||||
|
||||
if (!page.value) return root;
|
||||
|
||||
const { width = 375, height = 1700 } = page.value.style || {};
|
||||
|
||||
root.id = `${page.value.id}`;
|
||||
root.style.cssText = `
|
||||
width: ${width}px;
|
||||
height: ${height}px;
|
||||
`;
|
||||
|
||||
createApp(
|
||||
{
|
||||
template: '<div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>',
|
||||
props: ['config'],
|
||||
},
|
||||
{
|
||||
config: page.value,
|
||||
},
|
||||
).mount(root);
|
||||
|
||||
renderer.on('onload', () => {
|
||||
const style = window.document.createElement('style');
|
||||
// 隐藏滚动条，重置默认样式
|
||||
style.innerHTML = `
|
||||
body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
html,body {
|
||||
height: 100%; margin: 0;padding: 0;
|
||||
}
|
||||
|
||||
html::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
renderer.iframe?.contentDocument?.head.appendChild(style);
|
||||
|
||||
renderer.contentWindow?.magic?.onPageElUpdate(root);
|
||||
renderer.contentWindow?.magic?.onRuntimeReady({});
|
||||
});
|
||||
|
||||
return root;
|
||||
};
|
||||
```
|
||||
|
||||
以上就是一个简单的搭建编辑器的示例，安装上面的步骤完成后会发现，可以添加组件，也可选中组件，但是无法拖动，配置属性中的样式也无法生效，这是因为上述的render函数并不完整，没有处理dsl中style，下一节将详细介绍runtime的搭建，将不再使用render函数的方式而是使用[runtimeUrl](../../api/editor/props.md#runtimeurl)。
|
||||
|
||||
::: tip
|
||||
并不是render函数不好，但是从设计上将，render函数还是让渲染逻辑落到了编辑器中，@tmagic/editor的设计是希望做到渲染跟编辑器解耦
|
||||
:::
|
||||
|
||||
[源码](https://github.com/vft-magic/tmagic-tutorial)
|
||||
@ -1,15 +0,0 @@
|
||||
# 写在前面
|
||||
|
||||
本教程将一步一步引导大家实现一个完整的可视化编辑器，每个章节都是在前一章节的基础上进行，后一章节会比前一章节的功能更加完善，旨在帮助大家理解编辑器的各个组成部分的实现思路
|
||||
|
||||
[第一章 Hello World](./hello-world.md)
|
||||
|
||||
通过搭建一个最简单的编辑器，让大家对编辑器有一个最基本的认识。
|
||||
|
||||
[第二章 Runtime](./runtime.md)
|
||||
|
||||
通过将组件渲染从编辑器中解耦分离出来，实现编辑器对不同技术栈实现的组件的支持
|
||||
|
||||
[第三章 DSL解析渲染](./render.md)
|
||||
|
||||
理解DSL，并将DSL渲染成对应的组件
|
||||
@ -1,280 +0,0 @@
|
||||
# 3.[DSL](../conception.md#dsl) 解析渲染
|
||||
|
||||
tmagic 提供了 vue/react 两个个版本的解析渲染组件，可以直接使用
|
||||
|
||||
[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
|
||||
|
||||
[@tmagic/ui-react](https://www.npmjs.com/package/@tmagic/ui-react)
|
||||
|
||||
接下来是以vue为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
|
||||
|
||||
## 准备工作
|
||||
|
||||
### 创建项目
|
||||
|
||||
将[上一教程](./runtime.md)中的[editor-runtime](https://github.com/jia000/tmagic-tutorial/tree/master/course2/editor-runtime)和[hello-editor](https://github.com/jia000/tmagic-tutorial/tree/master/course2/hellow-editor)复制过来
|
||||
|
||||
## 基础概念
|
||||
|
||||
### 节点（Node）
|
||||
|
||||
每一个组件最终都是由一个节点来描述，每个节点至少拥有id,type两个属性
|
||||
|
||||
id: 节点的唯一标识，不可重复
|
||||
|
||||
type: 节点的类型，有业务自行定义
|
||||
|
||||
### 容器（Container）
|
||||
|
||||
容器也是节点的一种，容器可以包含多个节点并且是保存在items属性下
|
||||
|
||||
items: 容器下包含的节点组成的数组，items中不能有page,app
|
||||
|
||||
### 页面（Page)
|
||||
|
||||
页面是容器的一种，type固定为page，items中不能有page
|
||||
|
||||
### 根（Root)
|
||||
|
||||
根节点也是一个容器，type固定为app，items只能是page
|
||||
|
||||
## 实现
|
||||
|
||||
创建hello-ui目录
|
||||
|
||||
```
|
||||
.
|
||||
└─editor-runtime
|
||||
└─hello-editor
|
||||
└─hello-ui
|
||||
```
|
||||
|
||||
### 渲染节点
|
||||
|
||||
在hello-ui下创建 Component.vue 文件
|
||||
|
||||
由于节点的type是由业务自行定义的，所以需要使用动态组件渲染，在vue下可以使用[component](https://cn.vuejs.org/api/built-in-special-elements.html#component)组件来实现
|
||||
|
||||
[component](https://cn.vuejs.org/api/built-in-special-elements.html#component) 是通过is参数来决定哪个组件被渲染，所以将type与组件做绑定
|
||||
|
||||
例如有组件 HelloWorld，可以将组件全局注册
|
||||
|
||||
```js
|
||||
app.component('hello-world', HelloWorld);
|
||||
```
|
||||
|
||||
然后将'hello-world'作为type，那么is="hello-world"就会渲染 HelloWorld 组件
|
||||
|
||||
为了让组件渲染出来的dom能被编辑器识别到，还需要将节点的id作为dom的id
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<component v-if="config" :is="type" :tmagic-data-id="`${id}`" :style="style" :config="config"></component>
|
||||
</template>
|
||||
|
||||
<script lang=ts setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
import type { MNode } from '@tmagic/schema';
|
||||
|
||||
// 将节点作品参数传入组件中
|
||||
const props = defineProps<{
|
||||
config: MNode;
|
||||
}>();
|
||||
|
||||
const type = computed(() => {
|
||||
if (!props.config.type || ['page', 'container'].includes(props.config.type)) return 'div';
|
||||
return props.config.type;
|
||||
});
|
||||
|
||||
const id = computed(() => props.config.id);
|
||||
</script>
|
||||
```
|
||||
|
||||
接下来就需要解析节点的样式，在tmagic/editor中默认会将样式配置保存到节点的style属性中，如果自行定义到了其他属性，则已实际为准
|
||||
|
||||
解析style需要注意几个地方
|
||||
|
||||
1. 数字
|
||||
|
||||
css中的数值有些是需要单位的，例如px，有些是不需要的，例如opacity
|
||||
|
||||
在tmagic/editor中，默认都是不带单位的，所以需要将需要单位的地方补齐单位
|
||||
|
||||
这里做补齐px处理，如果需要做屏幕大小适应， 可以使用rem或者vw，这个可以根据自身需求处理。
|
||||
|
||||
2. url
|
||||
|
||||
css中的[url](https://developer.mozilla.org/zh-CN/docs/Web/CSS/url)需要是用url()，所以当值为url时，需要转为url(xxx)
|
||||
|
||||
3. transform
|
||||
|
||||
[transform](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform)属性可以指定为关键字值none 或一个或多个transform-function值。
|
||||
|
||||
```ts
|
||||
const fillBackgroundImage = (value: string) => {
|
||||
if (value && !/^url/.test(value) && !/^linear-gradient/.test(value)) {
|
||||
return `url(${value})`;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
|
||||
const style = computed(() => {
|
||||
if (!props.config.style) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const results: Record<string, any> = {};
|
||||
|
||||
const whiteList = ['zIndex', 'opacity', 'fontWeight'];
|
||||
Object.entries(props.config.style).forEach(([key, value]) => {
|
||||
if (key === 'backgroundImage') {
|
||||
value && (results[key] = fillBackgroundImage(value));
|
||||
} else if (key === 'transform' && typeof value !== 'string') {
|
||||
results[key] = Object.entries(value as Record<string, string>)
|
||||
.map(([transformKey, transformValue]) => {
|
||||
let defaultValue = 0;
|
||||
if (transformKey === 'scale') {
|
||||
defaultValue = 1;
|
||||
}
|
||||
return `${transformKey}(${transformValue || defaultValue})`;
|
||||
})
|
||||
.join(' ');
|
||||
} else if (!whiteList.includes(key) && value && /^[-]?[0-9]*[.]?[0-9]*$/.test(value)) {
|
||||
results[key] = `${value}px`;
|
||||
} else {
|
||||
results[key] = value;
|
||||
}
|
||||
});
|
||||
|
||||
return results;
|
||||
});
|
||||
```
|
||||
|
||||
### 渲染容器
|
||||
|
||||
容器与普通节点的区别，就是需要多一个items的解析
|
||||
|
||||
新增Container.vue文件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Component :config="config">
|
||||
<Component v-for="item in config.items" :key="item.id" :config="item"></Component>
|
||||
</Component>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MContainer } from '@tmagic/schema';
|
||||
|
||||
import Component from './Component.vue';
|
||||
|
||||
defineProps<{
|
||||
config: MContainer;
|
||||
}>();
|
||||
</script>
|
||||
```
|
||||
|
||||
### 渲染页面
|
||||
|
||||
页面就是容器，之所以单独存在，是页面会自己的方法，例如reload等
|
||||
|
||||
Page.vue文件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Container :config="config"></Container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MPage } from '@tmagic/schema';
|
||||
|
||||
import Container from './Container.vue';
|
||||
|
||||
defineProps<{
|
||||
config: MPage;
|
||||
}>();
|
||||
|
||||
defineExpose({
|
||||
reload() {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
## 在runtime中使用 hello-ui
|
||||
|
||||
删除editor-runtime/src/ui-page.vue
|
||||
|
||||
将App.vue中的ui-page改成hello-ui中的Page
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<Page v-if="page" :config="page" ref="pageComp"></Page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// eslint-disable-next-line
|
||||
import { Page } from 'hello-ui';
|
||||
<script>
|
||||
```
|
||||
|
||||
在editor-runtime/vue.config.js中加上配置
|
||||
|
||||
```ts
|
||||
configureWebpack: {
|
||||
resolve: {
|
||||
alias: {
|
||||
'hello-ui': path.resolve(__dirname, '../hello-ui'),
|
||||
vue$: path.resolve(__dirname, './node_modules/vue'),
|
||||
},
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
## 添加HelloWorld组件
|
||||
|
||||
在hello-ui下新增HelloWorld.vue
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>hollo-world</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { MNode } from '@tmagic/schema';
|
||||
|
||||
defineProps<{
|
||||
config: MNode;
|
||||
}>();
|
||||
</script>
|
||||
```
|
||||
|
||||
在editor-runtime main.ts中注册HelloWorld
|
||||
|
||||
```ts
|
||||
import { createApp } from 'vue';
|
||||
|
||||
import type { Magic } from '@tmagic/stage';
|
||||
|
||||
// eslint-disable-next-line
|
||||
import { HelloWorld } from 'hello-ui';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
magic?: Magic;
|
||||
}
|
||||
}
|
||||
|
||||
const app = createApp(App);
|
||||
|
||||
app.component('hello-world', HelloWorld);
|
||||
|
||||
app.mount('#app');
|
||||
|
||||
```
|
||||
|
||||
[源码](https://github.com/vft-magic/tmagic-tutorial/tree/master/course3)
|
||||
@ -1,235 +0,0 @@
|
||||
# 2.Runtime
|
||||
|
||||
## 创建项目
|
||||
|
||||
[关于@vue/cli的详细教程可以查看官方文档](https://cli.vuejs.org/zh/guide/installation.html)
|
||||
|
||||
### 创建editor项目
|
||||
|
||||
将[上一教程](./hello-world.md)中的[hello-world](https://github.com/jia000/tmagic-tutorial/tree/master/course1/hello-world)复制过来，改名hello-editor
|
||||
|
||||
|
||||
### 创建runtime项目
|
||||
|
||||
```bash
|
||||
vue create editor-runtime
|
||||
|
||||
cd editor-runtime
|
||||
```
|
||||
|
||||
删除src/components/HelloWorld.vue
|
||||
|
||||
按钮需要用的ts types依赖
|
||||
|
||||
```bash
|
||||
npm install --save @tmagic/core @tmagic/stage
|
||||
```
|
||||
|
||||
## 实现runtime
|
||||
|
||||
将hello-editor中的render函数实现移植到runtime项目中
|
||||
|
||||
新建ui-page.vue文件
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div v-if="config" :data-tmagic-id="config.id" :style="style">
|
||||
<div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps<{
|
||||
config: any;
|
||||
}>();
|
||||
|
||||
const style = computed(() => {
|
||||
const { width = 375, height = 1700 } = props.config.style || {};
|
||||
return {
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
};
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
将以下代码覆盖到src/App.vue中
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<uiPage :config="page"></uiPage>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
import uiPage from './ui-page.vue';
|
||||
|
||||
const page = ref<any>();
|
||||
</script>
|
||||
```
|
||||
|
||||
## 启动runtime
|
||||
|
||||
```bash
|
||||
npm run serve -- --port=8078
|
||||
```
|
||||
|
||||
## 修改editor
|
||||
|
||||
删除render props，添加runtimeUrl
|
||||
|
||||
修改样式
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<m-editor
|
||||
v-model="value"
|
||||
:runtime-url="runtimeUrl"
|
||||
:component-group-list="componentGroupList"
|
||||
></m-editor>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// imports
|
||||
|
||||
const value = ref({
|
||||
type: 'app',
|
||||
// 必须加上ID，这个id可能是数据库生成的key，也可以是生成的uuid
|
||||
id: 1,
|
||||
items: [],
|
||||
});
|
||||
|
||||
const componentGroupList = ref([
|
||||
// ...
|
||||
]);
|
||||
|
||||
const runtimeUrl = 'http://localhost:8078/';
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
html,body,#app {
|
||||
height: 100%; margin: 0;padding: 0;
|
||||
}
|
||||
|
||||
#app::-webkit-scrollbar {
|
||||
width: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## 启动editor
|
||||
|
||||
```bash
|
||||
cd hello-editor
|
||||
|
||||
npm run serve -- --port=8080
|
||||
```
|
||||
|
||||
## 跨域问题
|
||||
|
||||
在editor-runtime项目下的vue.config.js中添加如下配置
|
||||
|
||||
```javascript
|
||||
devServer: {
|
||||
headers: {
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
},
|
||||
},
|
||||
```
|
||||
|
||||
## runtime与editor通信
|
||||
|
||||
到这里项目就可以正常访问了，但是会发现添加组件没有反应。
|
||||
|
||||
这是因为在runtime中无法直接获取到editor中的dsl，所以需要通过editor注入到window的magic api来交互
|
||||
|
||||
> 如出现在runtime中出现magic为undefined， 可以尝试在App.vue中通过监听message，来准备获取magic注入时机，然后调用magic.onRuntimeReady，示例代码如下
|
||||
```js
|
||||
window.addEventListener('message', ({ data }) => {
|
||||
if (!data.tmagicRuntimeReady) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.magic?.onRuntimeReady({
|
||||
// ...
|
||||
});
|
||||
});
|
||||
```
|
||||
> 这里可能会出现editor抛出message的时候，runtime还没有执行到监听message的情况
|
||||
> 编辑器只在iframe onload事件中抛出message
|
||||
> 如果出现runtime中接收不到message的情况，可以尝试在onMounted的时候调用magic.onRuntimeReady
|
||||
|
||||
|
||||
```ts
|
||||
import type { Magic } from '@tmagic/stage';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
magic?: Magic;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```ts
|
||||
import type { Id, MApp, MNode } from '@tmagic/core';
|
||||
import type { RemoveData, UpdateData } from '@tmagic/stage';
|
||||
|
||||
const root = ref<MApp>();
|
||||
|
||||
window.magic?.onRuntimeReady({
|
||||
/** 当编辑器的dsl对象变化时会调用 */
|
||||
updateRootConfig(config: MApp) {
|
||||
root.value = config;
|
||||
},
|
||||
|
||||
/** 当编辑器的切换页面时会调用 */
|
||||
updatePageId(id: Id) {
|
||||
page.value = root.value?.items?.find((item) => item.id === id);
|
||||
},
|
||||
|
||||
/** 新增组件时调用 */
|
||||
add({ config }: UpdateData) {
|
||||
const parent = config.type === 'page' ? root.value : page.value;
|
||||
parent.items?.push(config);
|
||||
},
|
||||
|
||||
/** 更新组件时调用 */
|
||||
update({ config }: UpdateData) {
|
||||
const index = page.value.items?.findIndex((child: MNode) => child.id === config.id);
|
||||
page.value.items.splice(index, 1, reactive(config));
|
||||
},
|
||||
|
||||
/** 删除组件时调用 */
|
||||
remove({ id }: RemoveData) {
|
||||
const index = page.value.items?.findIndex((child: MNode) => child.id === id);
|
||||
page.value.items.splice(index, 1);
|
||||
},
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## 同步页面dom给编辑器
|
||||
|
||||
由于组件渲染在runtime中，对于编辑器来说是个黑盒，并不知道哪个dom节点才是页面（对于dsl的解析渲染可能是千奇百怪的），所以需要将页面的dom节点同步给编辑器
|
||||
|
||||
```ts
|
||||
watch(page, async () => {
|
||||
// page配置变化后，需要等dom更新
|
||||
await nextTick();
|
||||
window?.magic.onPageElUpdate(pageComp.value?.$el);
|
||||
});
|
||||
```
|
||||
|
||||
以上就是一个简单runtime实现，以及与编辑的交互，这是一个不完善的实现(会发现组件再画布中无法自由拖动，是因为没有完整的解析style)，但是其中已经几乎覆盖所有需要关心的内容
|
||||
|
||||
当前教程中实现了一个简单的page，tmagic提供了一个比较完善的实现，将在下一节介绍
|
||||
|
||||
[源码](https://github.com/vft-magic/tmagic-tutorial/tree/master/course2)
|
||||
2097
docs/package-lock.json
generated
Normal file
2097
docs/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
18
docs/package.json
Normal file
18
docs/package.json
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "docs",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vuepress dev src",
|
||||
"build": "vuepress build src -d dist"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons": "0.0.11",
|
||||
"element-plus": "^2.2.0",
|
||||
"highlight.js": "^11.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vuepress/cli": "^2.0.0-beta.26",
|
||||
"vuepress": "^2.0.0-beta.26"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 49 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 152 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 251 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
@ -1,321 +0,0 @@
|
||||
# App
|
||||
|
||||
`App` 是 `@tmagic/core` 的核心类，继承自 `EventEmitter`，用于管理整个应用的状态和配置。
|
||||
|
||||
## 构造函数
|
||||
|
||||
```typescript
|
||||
new App(options: AppOptionsConfig)
|
||||
```
|
||||
|
||||
### AppOptionsConfig
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `ua` | `string` | User Agent 字符串 |
|
||||
| `env` | `Env` | 环境信息实例 |
|
||||
| `config` | `MApp` | DSL 配置 |
|
||||
| `platform` | `'editor' \| 'mobile' \| 'tv' \| 'pc'` | 平台类型 |
|
||||
| `jsEngine` | `JsEngine` | JS 引擎类型 |
|
||||
| `designWidth` | `number` | 设计稿宽度 |
|
||||
| `curPage` | `Id` | 当前页面 ID |
|
||||
| `useMock` | `boolean` | 是否使用 Mock 数据 |
|
||||
| `disabledFlexible` | `boolean` | 是否禁用 flexible |
|
||||
| `pageFragmentContainerType` | `string \| string[]` | 页面片段容器类型 |
|
||||
| `iteratorContainerType` | `string \| string[]` | 迭代器容器类型 |
|
||||
| `transformStyle` | `(style: Record<string, any>) => Record<string, any>` | 样式转换函数 |
|
||||
| `request` | `RequestFunction` | 请求函数 |
|
||||
| `dataSourceManagerInitialData` | `DataSourceManagerData` | 数据源管理器初始数据 |
|
||||
| `nodeStoreInitialData` | `() => any` | 节点存储初始数据工厂函数 |
|
||||
| `errorHandler` | `ErrorHandler` | 错误处理器 |
|
||||
| `beforeEventHandler` | `BeforeEventHandler` | 事件处理前钩子 |
|
||||
| `afterEventHandler` | `AfterEventHandler` | 事件处理后钩子 |
|
||||
|
||||
## 属性
|
||||
|
||||
| 属性 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `env` | `Env` | 环境信息实例 |
|
||||
| `dsl` | `MApp` | DSL 配置 |
|
||||
| `codeDsl` | `CodeBlockDSL` | 代码块配置 |
|
||||
| `dataSourceManager` | `DataSourceManager \| undefined` | 数据源管理器 |
|
||||
| `page` | `Page \| undefined` | 当前页面 |
|
||||
| `pageFragments` | `Map<Id, Page>` | 页面片段集合 |
|
||||
| `platform` | `string` | 平台类型 |
|
||||
| `jsEngine` | `JsEngine` | JS 引擎类型 |
|
||||
| `components` | `Map<string, any>` | 已注册的组件 |
|
||||
| `eventHelper` | `EventHelper` | 事件助手实例 |
|
||||
|
||||
## 静态方法
|
||||
|
||||
### registerNode
|
||||
|
||||
- **参数：**
|
||||
- `{string} type` 节点类型
|
||||
- `{typeof Node} NodeClass` 节点类
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
注册自定义节点类型，用于扩展节点功能。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
import App from '@tmagic/core';
|
||||
|
||||
class CustomNode extends Node {
|
||||
// 自定义实现
|
||||
}
|
||||
|
||||
App.registerNode('custom', CustomNode);
|
||||
```
|
||||
|
||||
## 实例方法
|
||||
|
||||
### setEnv
|
||||
|
||||
- **参数：**
|
||||
- `{string} ua` User Agent 字符串
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置环境信息，会根据 UA 字符串更新 `env` 属性。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
import App from '@tmagic/core';
|
||||
|
||||
const app = new App({});
|
||||
app.setEnv(navigator.userAgent);
|
||||
```
|
||||
|
||||
### setDesignWidth
|
||||
|
||||
- **参数：**
|
||||
- `{number} width` 设计稿宽度
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置设计稿宽度，用于响应式布局计算。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
app.setDesignWidth(375);
|
||||
```
|
||||
|
||||
### setConfig
|
||||
|
||||
- **参数：**
|
||||
- `{MApp} config` DSL 配置
|
||||
- `{Id} curPage` 当前页面 ID（可选）
|
||||
- `{DataSourceManagerData} initialData` 初始数据（可选）
|
||||
|
||||
- **返回：**
|
||||
- `void`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置 DSL 配置，会初始化数据源管理器和当前页面。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
app.setConfig({
|
||||
id: 'app_1',
|
||||
type: 'app',
|
||||
items: [
|
||||
{
|
||||
id: 'page_1',
|
||||
type: 'page',
|
||||
items: []
|
||||
}
|
||||
]
|
||||
});
|
||||
```
|
||||
|
||||
### setPage
|
||||
|
||||
- **参数：**
|
||||
- `{Id} id` 页面 ID
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
切换当前页面。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
app.setPage('page_2');
|
||||
```
|
||||
|
||||
### deletePage
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
删除当前页面。
|
||||
|
||||
### getPage
|
||||
|
||||
- **参数：**
|
||||
- `{Id} id` 页面 ID（可选）
|
||||
|
||||
- **返回：**
|
||||
- `{Page | undefined}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定 ID 的页面，不传 ID 则返回当前页面。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
const page = app.getPage('page_1');
|
||||
```
|
||||
|
||||
### getNode
|
||||
|
||||
- **参数：**
|
||||
- `{Id} id` 节点 ID
|
||||
- `{GetNodeOptions} options` 获取选项（可选）
|
||||
|
||||
- **返回：**
|
||||
- `{Node | undefined}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取指定 ID 的节点。
|
||||
|
||||
- **GetNodeOptions：**
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `iteratorContainerId` | `Id[]` | 迭代器容器 ID 数组 |
|
||||
| `iteratorIndex` | `number[]` | 迭代器索引数组 |
|
||||
| `pageFragmentContainerId` | `Id` | 页面片段容器 ID |
|
||||
| `strict` | `boolean` | 是否严格模式 |
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
const node = app.getNode('button_1');
|
||||
```
|
||||
|
||||
### registerComponent
|
||||
|
||||
- **参数：**
|
||||
- `{string} type` 组件类型
|
||||
- `{any} Component` 组件
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
注册组件。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
app.registerComponent('my-button', MyButton);
|
||||
```
|
||||
|
||||
### unregisterComponent
|
||||
|
||||
- **参数：**
|
||||
- `{string} type` 组件类型
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
取消注册组件。
|
||||
|
||||
### resolveComponent
|
||||
|
||||
- **参数：**
|
||||
- `{string} type` 组件类型
|
||||
|
||||
- **返回：**
|
||||
- `{any}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
解析组件，返回已注册的组件。
|
||||
|
||||
### runCode
|
||||
|
||||
- **参数：**
|
||||
- `{Id} codeId` 代码块 ID
|
||||
- `{object} params` 参数
|
||||
- `{any[]} args` 额外参数
|
||||
- `{FlowState} flowState` 流程状态（可选）
|
||||
- `{Node} node` 节点（可选）
|
||||
|
||||
- **返回：**
|
||||
- `{any}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
执行代码块。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
const result = await app.runCode('code_1', { key: 'value' });
|
||||
```
|
||||
|
||||
### runDataSourceMethod
|
||||
|
||||
- **参数：**
|
||||
- `{Id} dsId` 数据源 ID
|
||||
- `{string} methodName` 方法名
|
||||
- `{object} params` 参数
|
||||
- `{any[]} args` 额外参数
|
||||
- `{FlowState} flowState` 流程状态（可选）
|
||||
- `{Node} node` 节点（可选）
|
||||
|
||||
- **返回：**
|
||||
- `{any}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
执行数据源方法。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
const result = await app.runDataSourceMethod('ds_1', 'fetchData', { id: 123 });
|
||||
```
|
||||
|
||||
### destroy
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
销毁应用实例，清理所有资源。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
app.destroy();
|
||||
```
|
||||
@ -1,191 +0,0 @@
|
||||
# DevtoolApi
|
||||
|
||||
`DevtoolApi` 是 `@tmagic/core` 提供给开发工具使用的 API 接口类。
|
||||
|
||||
## 构造函数
|
||||
|
||||
```typescript
|
||||
new DevtoolApi(options: DevtoolApiOptions)
|
||||
```
|
||||
|
||||
### DevtoolApiOptions
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `app` | `App` | 应用实例 |
|
||||
|
||||
## 实例方法
|
||||
|
||||
### openPop
|
||||
|
||||
- **参数：**
|
||||
- `{Id} popId` 弹窗组件 ID
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
打开指定的弹窗组件。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
devtoolApi.openPop('dialog_1');
|
||||
```
|
||||
|
||||
### setDataSourceData
|
||||
|
||||
- **参数：**
|
||||
- `{Id} dsId` 数据源 ID
|
||||
- `{any} data` 数据
|
||||
- `{string} path` 数据路径（可选）
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
设置数据源的数据。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
// 设置整个数据源数据
|
||||
devtoolApi.setDataSourceData('ds_1', { name: 'test' });
|
||||
|
||||
// 设置数据源的某个字段
|
||||
devtoolApi.setDataSourceData('ds_1', 'newValue', 'user.name');
|
||||
```
|
||||
|
||||
### requestDataSource
|
||||
|
||||
- **参数：**
|
||||
- `{Id} dsId` 数据源 ID
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
触发 HTTP 数据源的请求。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
await devtoolApi.requestDataSource('http_ds_1');
|
||||
```
|
||||
|
||||
### getDisplayCondRealValue
|
||||
|
||||
- **参数：**
|
||||
- `{Id} nodeId` 节点 ID
|
||||
- `{CondItem} condItem` 条件项
|
||||
|
||||
- **返回：**
|
||||
- `{any}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
获取显示条件的实际计算值。
|
||||
|
||||
### callHook
|
||||
|
||||
- **参数：**
|
||||
- `{Id} nodeId` 节点 ID
|
||||
- `{string} hookName` 钩子名称
|
||||
- `{any} hookData` 钩子数据
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<any>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
调用节点的钩子函数。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
await devtoolApi.callHook('button_1', 'mounted', { data: 'test' });
|
||||
```
|
||||
|
||||
### trigger
|
||||
|
||||
- **参数：**
|
||||
- `{Id} nodeId` 节点 ID
|
||||
- `{EventConfig[]} events` 事件配置数组
|
||||
|
||||
- **返回：**
|
||||
- `{Promise<void>}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
触发节点的事件。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
await devtoolApi.trigger('button_1', [
|
||||
{
|
||||
name: 'click',
|
||||
actions: [{ actionType: 'code', codeId: 'code_1' }]
|
||||
}
|
||||
]);
|
||||
```
|
||||
|
||||
### isValueIncludeDataSource
|
||||
|
||||
- **参数：**
|
||||
- `{any} value` 要检查的值
|
||||
|
||||
- **返回：**
|
||||
- `{boolean}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
检查值是否包含数据源引用。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
const hasDs = devtoolApi.isValueIncludeDataSource('${ds_1.field}');
|
||||
console.log(hasDs); // true
|
||||
```
|
||||
|
||||
### compileDataSourceValue
|
||||
|
||||
- **参数：**
|
||||
- `{any} value` 包含数据源引用的值
|
||||
|
||||
- **返回：**
|
||||
- `{any}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
编译数据源值，将数据源引用替换为实际值。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
const compiled = devtoolApi.compileDataSourceValue('用户名：${ds_1.user.name}');
|
||||
```
|
||||
|
||||
### updateCode
|
||||
|
||||
- **参数：**
|
||||
- `{Id} codeId` 代码块 ID
|
||||
- `{any} value` 新值
|
||||
- `{string} path` 路径（可选）
|
||||
|
||||
- **返回：**
|
||||
- `{void}`
|
||||
|
||||
- **详情：**
|
||||
|
||||
更新代码块的内容。
|
||||
|
||||
- **示例：**
|
||||
|
||||
```typescript
|
||||
devtoolApi.updateCode('code_1', 'return data.value * 2;', 'content');
|
||||
```
|
||||
@ -1,69 +0,0 @@
|
||||
# Env
|
||||
|
||||
`Env` 是 `@tmagic/core` 的环境检测类，用于检测当前运行环境的设备和系统信息。
|
||||
|
||||
## 构造函数
|
||||
|
||||
```typescript
|
||||
new Env(ua?: string)
|
||||
```
|
||||
|
||||
### 参数
|
||||
|
||||
| 参数 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `ua` | `string` | User Agent 字符串（可选，默认使用 `navigator.userAgent`） |
|
||||
|
||||
## 属性
|
||||
|
||||
所有属性均为只读布尔值：
|
||||
|
||||
| 属性 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| `isIos` | `boolean` | 是否为 iOS 系统 |
|
||||
| `isIphone` | `boolean` | 是否为 iPhone 设备 |
|
||||
| `isIpad` | `boolean` | 是否为 iPad 设备 |
|
||||
| `isAndroid` | `boolean` | 是否为 Android 系统 |
|
||||
| `isAndroidPad` | `boolean` | 是否为 Android 平板 |
|
||||
| `isMac` | `boolean` | 是否为 Mac 系统 |
|
||||
| `isWin` | `boolean` | 是否为 Windows 系统 |
|
||||
| `isMqq` | `boolean` | 是否在手机 QQ 中 |
|
||||
| `isWechat` | `boolean` | 是否在微信中 |
|
||||
| `isWeb` | `boolean` | 是否为 Web 环境 |
|
||||
| `isOpenHarmony` | `boolean` | 是否为鸿蒙系统 |
|
||||
|
||||
## 使用示例
|
||||
|
||||
```typescript
|
||||
import { Env } from '@tmagic/core';
|
||||
|
||||
// 使用当前浏览器的 UA
|
||||
const env = new Env();
|
||||
|
||||
if (env.isIos) {
|
||||
console.log('当前是 iOS 设备');
|
||||
}
|
||||
|
||||
if (env.isWechat) {
|
||||
console.log('在微信中打开');
|
||||
}
|
||||
|
||||
// 使用自定义 UA
|
||||
const customEnv = new Env('Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)');
|
||||
console.log(customEnv.isIphone); // true
|
||||
```
|
||||
|
||||
## 在 App 中使用
|
||||
|
||||
```typescript
|
||||
import App from '@tmagic/core';
|
||||
|
||||
const app = new App({
|
||||
ua: navigator.userAgent
|
||||
});
|
||||
|
||||
// 通过 app.env 访问环境信息
|
||||
if (app.env.isAndroid) {
|
||||
// Android 特定逻辑
|
||||
}
|
||||
```
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user