mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-03-11 02:15:52 +00:00
Compare commits
1 Commits
master
...
v1.0.0-bet
| Author | SHA1 | Date | |
|---|---|---|---|
|
d0febcbff7 |
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
@ -0,0 +1,3 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
8
.eslintignore
Normal file
8
.eslintignore
Normal file
@ -0,0 +1,8 @@
|
||||
dist
|
||||
coverage
|
||||
node_modules
|
||||
dest
|
||||
|
||||
comp-entry.ts
|
||||
config-entry.ts
|
||||
value-entry.ts
|
||||
63
.eslintrc.js
Normal file
63
.eslintrc.js
Normal file
@ -0,0 +1,63 @@
|
||||
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',
|
||||
'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
|
||||
|
||||
3315
CHANGELOG.md
3315
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.
|
||||
|
||||
|
||||
37
README.md
37
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。
|
||||
|
||||
@ -63,33 +57,22 @@ http://localhost:8098/tmagic-editor/playground/
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-32_509802977_1635842258505918" alt="魔方demo图">
|
||||
|
||||
### 页面渲染
|
||||
runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出的 DSL，即可得到魔方编辑器希望拥有的最终产物，一个活动页面。我们提供了 vue2/vue3/react 几个版本的 runtime。
|
||||
runtime 是魔方提供的页面渲染环境。通过加载在编辑器中产出的 uiconfig，即可得到魔方编辑器希望拥有的最终产物，一个活动页面。我们提供了 vue2/vue3/react 几个版本的 runtime。
|
||||
|
||||
通过魔方编辑器和 runtime 渲染，以及通过自定义的复杂组件开发，可以在魔方项目上，搭建出复杂而精美的页面。
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_7cf5e6-5_466783002_1637935497991411" width="375">
|
||||
|
||||
### 表单渲染
|
||||
魔方的表单配置项，使用了我们开发的基于 element-ui 的 @tmagic/form，@tmagic/form 也可以在其他地方单独使用。支持渲染 JS Schema 提供的表单描述。
|
||||
魔方的表单配置项，使用了我们开发的基于 element-ui 的 @tmagic/form，magic-form 也可以在其他地方单独使用。支持渲染 JS Schema 提供的表单描述。
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_28dbde-2_1333081854_1637935825410557" >
|
||||
|
||||
### 使用
|
||||
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>
|
||||
[腾讯开源激励计划](https://opensource.tencent.com/contribution) 鼓励开发者的参与和贡献，期待你的加入。
|
||||
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,36 +0,0 @@
|
||||
|
||||
# Display 只读文本
|
||||
|
||||
用于显示，不可编辑
|
||||
|
||||
## TS 定义
|
||||
|
||||
```typescript
|
||||
interface Display extends FormItem {
|
||||
type: 'display';
|
||||
}
|
||||
```
|
||||
|
||||
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'display',
|
||||
name: 'display',
|
||||
text: '只读文本',
|
||||
defaultValue: 'display'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
|
||||
## Input Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
@ -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,32 +0,0 @@
|
||||
# Hidden 隐藏域
|
||||
|
||||
改值体现于最终提交的表单中，用于例如编辑记录的id这种场景中
|
||||
|
||||
## TS 定义
|
||||
|
||||
```typescript
|
||||
interface Hidden extends FormItem {
|
||||
type: 'hidden';
|
||||
}
|
||||
```
|
||||
|
||||
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'hidden',
|
||||
name: 'hidden'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
|
||||
## Input Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
@ -1,64 +0,0 @@
|
||||
# Link 链接
|
||||
|
||||
用于显示，不可编辑
|
||||
|
||||
## TS 定义
|
||||
|
||||
```typescript
|
||||
interface Link extends FormItem {
|
||||
type: 'link';
|
||||
href?: string | typeof LinkHrefFunction;
|
||||
css?: {
|
||||
[key: string]: string | number;
|
||||
};
|
||||
disabledCss?: {
|
||||
[key: string]: string | number;
|
||||
};
|
||||
formTitle?: string;
|
||||
formWidth?: number | string;
|
||||
displayText?: string | typeof LinkDisplayTextFunction;
|
||||
form: FormConfig | typeof LinkFormFunction;
|
||||
}
|
||||
```
|
||||
|
||||
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'link',
|
||||
name: 'link',
|
||||
text: '链接',
|
||||
href: 'https://tencent.github.io/tmagic-editor/playground/index.html#/'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 打开表单
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'link',
|
||||
name: 'link',
|
||||
text: '链接',
|
||||
form: [{
|
||||
name: 'text',
|
||||
text: 'input'
|
||||
}]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
|
||||
## Input Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
@ -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,63 +0,0 @@
|
||||
# InputNumber 计数器
|
||||
|
||||
仅允许输入标准的数字值，可定义范围
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'number',
|
||||
name: 'number',
|
||||
text: '计数器'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
type为'number'
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'number',
|
||||
name: 'number',
|
||||
text: '计数器',
|
||||
disabled: () => true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
disabled 属性接受一个 Boolean，设置为 true 即可禁用整个组件，也可以接受一个返回 Boolean 的函数，如果你只需要控制数值在某一范围内，可以设置 min 属性和 max 属性，不设置 min 和 max 时，最小值为 0。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 步数
|
||||
|
||||
允许定义递增递减的步数控制
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'number',
|
||||
name: 'number',
|
||||
text: '计数器',
|
||||
step: 10
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置 step 属性可以控制步长，接受一个 Number 。
|
||||
</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 |
|
||||
| min | 设置计数器允许的最小值 | number | — | -Infinity |
|
||||
| max | 设置计数器允许的最大值 | number | — | Infinity |
|
||||
| step | 计数器步长 | number | — | 1 |
|
||||
| tooltip | 输入框提示信息 | string | — | — |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,67 +0,0 @@
|
||||
# Radio 单选框
|
||||
|
||||
在一组备选项中进行单选
|
||||
|
||||
## TS 定义
|
||||
|
||||
```typescript
|
||||
interface RadioGroup extends FormItem {
|
||||
type: 'radio-group';
|
||||
options: {
|
||||
value: any;
|
||||
text: string;
|
||||
}[];
|
||||
}
|
||||
```
|
||||
|
||||
点击查看[FormItem](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts)的定义
|
||||
|
||||
## 基础用法
|
||||
|
||||
由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'radio-group',
|
||||
name: 'radio',
|
||||
text: '选项',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
要使用 Radio 组件，只需要配置type: 'radio-group'。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
单选框不可用的状态。
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'radio-group',
|
||||
name: 'radio',
|
||||
text: '选项',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
],
|
||||
disabled: () => true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
只要在配置中设置 disabled 属性即可，它接受一个 Boolean ， true 为禁用，也可以接受一个返回 Boolean 的函数。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## RadioGroup Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| options | 选项 | Array | — | - |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,209 +0,0 @@
|
||||
# Select 选择器
|
||||
|
||||
当选项过多时，使用下拉菜单展示并选择内容。
|
||||
|
||||
## 基础用法
|
||||
|
||||
适用广泛的基础单选
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
type为'select'
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 有禁用选项
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2, disabled: true }
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在 opitons 选项配置中，设定 disabled 值为 true，即可禁用该选项
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
选择器不可用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
disabled: true,
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
为 el-select 设置 disabled 属性，则整个选择器不可用
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 基础多选
|
||||
|
||||
适用性较广的基础多选，用 Tag 展示已选项
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
multiple: true,
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 },
|
||||
{ text: '选项3', value: 3 }
|
||||
]
|
||||
}]"></demo-block>
|
||||
|
||||
## 分组
|
||||
|
||||
备选项进行分组展示
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
group: true,
|
||||
options: [
|
||||
{
|
||||
label: 'group1',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 },
|
||||
{ text: '选项3', value: 3 }
|
||||
],
|
||||
disabled: true
|
||||
}, {
|
||||
label: 'group2',
|
||||
options: [
|
||||
{ text: '选项4', value: 4 },
|
||||
{ text: '选项5', value: 5 },
|
||||
{ text: '选项6', value: 6 }
|
||||
]
|
||||
}
|
||||
]
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置group为true
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 创建条目
|
||||
|
||||
可以创建并选中选项中不存在的条目
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
allowCreate: true,
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
]
|
||||
}]"></demo-block>
|
||||
|
||||
## 远程选项
|
||||
|
||||
通过接口请求获取选项列表
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'select',
|
||||
name: 'select',
|
||||
text: '选项',
|
||||
placeholder: '请选择',
|
||||
remote: true,
|
||||
option: {
|
||||
url: 'select/remote',
|
||||
root: 'data',
|
||||
method: 'post',
|
||||
mode: 'cors',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: { query: '' },
|
||||
json: true,
|
||||
text: option => `${option.name}`,
|
||||
value: option => `${option.id}`,
|
||||
}
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
配置remote为true，然后配置option，而不是options
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
同时在 `src/main.ts` 中需要自定义实现请求
|
||||
```typescript
|
||||
app.use(MagicForm, {
|
||||
request: async (options: any) => {
|
||||
// 自定义请求实现
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
:::tip
|
||||
如果 Select 的绑定值为对象类型，请务必指定 valueKey 作为它的唯一性标识。
|
||||
:::
|
||||
|
||||
## Select Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| multiple | 是否多选 | boolean | — | false |
|
||||
| valueKey | 作为 value 唯一标识的键名，绑定值为对象类型时必填 | string | — | value |
|
||||
| allowCreate | 是否允许用户创建新条目 | boolean | — | false |
|
||||
| remote | 是否为远程搜索 | boolean | — | false |
|
||||
| group | 是否选择分组 | boolean | — | false |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
| options | 选项 | Array | — | - |
|
||||
| option | 选项 | Object | — | - |
|
||||
|
||||
## options item
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| text | | 选项的标签 | string/number/object | — | — |
|
||||
| value | 选项的值 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean | — | false |
|
||||
| label | string | — | — | — |
|
||||
| options | Array | — | — | — |
|
||||
|
||||
## option
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| url | string | — | — | — |
|
||||
| root | string | — | — | — |
|
||||
| text | string / Function | — | — | — |
|
||||
| value | string / Function | — | — | — |
|
||||
@ -1,52 +0,0 @@
|
||||
# Switch 开关
|
||||
|
||||
表示两种相互对立的状态间的切换，多用于触发「开/关」。
|
||||
|
||||
## 基本用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'switch',
|
||||
name: 'switch',
|
||||
text: '开关'
|
||||
}]"></demo-block>
|
||||
|
||||
## 扩展的 value 类型
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'switch',
|
||||
name: 'switch',
|
||||
text: '开关',
|
||||
activeValue: 'on',
|
||||
inactiveValue: 'off'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置 activeValue 和 inactiveValue 属性，接受 Boolean , String 或 Number 类型的值。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'switch',
|
||||
name: 'switch',
|
||||
text: '开关',
|
||||
disabled: true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置 disabled 属性，接受一个 Boolean，设置 true 即可禁用。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [Function](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| active-value | switch 打开时的值 | boolean / string / number | — | true |
|
||||
| inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
|
||||
@ -1,129 +0,0 @@
|
||||
# Input 输入框
|
||||
|
||||
通过鼠标或键盘输入字符
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
name: 'text',
|
||||
text: '输入框'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
Input输入框的type为'text', 是type的默认值，所以可以不配置
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
name: 'text',
|
||||
text: '输入框',
|
||||
disabled: () => true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
通过 disabled 属性指定是否禁用 input 组件
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 复合型输入框
|
||||
|
||||
后置内容
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
name: 'text',
|
||||
text: '重量',
|
||||
append: '公斤'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
可以通过配置append来增加一个后置内容。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
name: 'text',
|
||||
text: '输入框',
|
||||
append: {
|
||||
type: 'button',
|
||||
text: '操作',
|
||||
handler: (vm) => {
|
||||
vm.$message(vm.mForm.values.text);
|
||||
}
|
||||
}
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
可以通过配置append来增加一个后置按钮。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 过滤内容
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
name: 'text',
|
||||
text: '输入框',
|
||||
filter: 'number'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置filter为'number'，可以将值转换成数值，也可以配置一个函数来自由转换。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 去掉首尾空格
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
name: 'text',
|
||||
text: '输入框',
|
||||
trim: true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
设置trim为true'，可以去掉首尾空格。
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 显示详情
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
name: 'text',
|
||||
text: '输入框',
|
||||
tooltip: true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## Input Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| clearable | 是否可清空 | boolean | — | true |
|
||||
| tooltip | 输入时显示内容 | string | — | — |
|
||||
| trim | 是否去掉首尾空格 | boolean | — | false |
|
||||
| filter | 过滤值 | string / Function | number | - |
|
||||
| prepend | 前置内容 | string | — | - |
|
||||
| append | 后置内容 | string / Object | — | - |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
|
||||
## append Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| type | 内容类型 | string | button | — |
|
||||
| text | 文本内容 | string | — | — |
|
||||
| handler | 点击操作 | Function | — | - |
|
||||
@ -1,42 +0,0 @@
|
||||
# Textarea 文本域
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'textarea',
|
||||
name: 'textarea',
|
||||
text: '文本域'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'textarea',
|
||||
name: 'textarea',
|
||||
text: '文本域',
|
||||
disabled: () => true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
通过 disabled 属性指定是否禁用 input 组件
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## Input Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------- |---------- |------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| trim | 是否去掉首尾空格 | boolean | — | false |
|
||||
| filter | 过滤值 | string / Function | number | - |
|
||||
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||
@ -1,41 +0,0 @@
|
||||
# TimePicker 时间选择器
|
||||
|
||||
用于选择或输入日期
|
||||
|
||||
## 基础用法
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'time',
|
||||
name: 'time',
|
||||
text: '时间选择器'
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
## 禁用状态
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
type: 'time',
|
||||
name: 'time',
|
||||
text: '时间选择器',
|
||||
disabled: () => true
|
||||
}]">
|
||||
<template #source>
|
||||
<p>
|
||||
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||
</p>
|
||||
</template>
|
||||
</demo-block>
|
||||
|
||||
|
||||
## Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||
| name | 绑定值 | string | — | — |
|
||||
| placeholder | 输入框占位文本 | string | — | — |
|
||||
| text | 表单标签 | string | — | — |
|
||||
| disabled | 是否禁用 | boolean / [Function](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||
@ -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,37 +0,0 @@
|
||||
# 联动
|
||||
|
||||
## 显隐
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
name: 'switch',
|
||||
text: '显示text',
|
||||
type: 'switch'
|
||||
}, {
|
||||
name: 'text2',
|
||||
text: '配置2',
|
||||
display: (state, { model }) => model.switch
|
||||
}]"></demo-block>
|
||||
|
||||
## 输入关联
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
name: 'firstName',
|
||||
text: '名',
|
||||
onChange: (state, v, { model }) => {
|
||||
model.fullName = `${model.lastName}${model.firstName}`
|
||||
},
|
||||
defaultValue: '三'
|
||||
}, {
|
||||
name: 'lastName',
|
||||
text: '姓',
|
||||
onChange: (state, v, { model }) => {
|
||||
model.fullName = `${model.lastName}${model.firstName}`
|
||||
},
|
||||
defaultValue: '张'
|
||||
}, {
|
||||
name: 'fullName',
|
||||
text: '姓名',
|
||||
type: 'display',
|
||||
defaultValue: '张三'
|
||||
}]"></demo-block>
|
||||
|
||||
@ -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,152 +0,0 @@
|
||||
# 联动原理
|
||||
tmagic-editor的联动，指这两种情况：
|
||||
- 在编辑器中，组件的表单配置项之间需要联动。
|
||||
- 页面中的组件之间，需要联动触发行为。
|
||||
|
||||
## 表单联动
|
||||
表单的详细内容，可以参考[@tmagic/form](./tmagic-form)。我们通过 [JS Schema](./js-schema) 描述的表单配置，实现联动的方式，就是写一个简单 js 函数。
|
||||
|
||||
比如下面的例子，我们希望改变选项时，同时改变文本框的内容。
|
||||
|
||||
<demo-block type="form" :config="`[{
|
||||
text: '文本',
|
||||
name: 'text'
|
||||
}, {
|
||||
type: 'select',
|
||||
text: '下拉选项',
|
||||
name: 'select',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
],
|
||||
onChange: (vm, value, { model }) => {
|
||||
model.text = value;
|
||||
}
|
||||
}]`">
|
||||
</demo-block>
|
||||
|
||||
在经过表单渲染器时，所有指出函数 API 都会传入当前渲染的**表单组件实例(vm)**，**当前项目(value)**，**当前表单model**，**表单值formValue**，model 即 vue 的[表单输入绑定](https://v3.cn.vuejs.org/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95)，可以通过修改他来实现值联动。
|
||||
|
||||
当然我们也可以通过上述的参数传入，以及其他函数 API 实现更多灵活的表单联动，具体参考[表单 API](../../form-config/relate)。
|
||||
|
||||
## 组件联动
|
||||
tmagic-editor在 @tmagic/core 中，实现了组件的事件绑定/分发机制。在组件渲染时，每个组件在 @tmagic/ui 中经过基础组件渲染时，会被基础组件注入公共方法的实现。如下对按钮配置了**点击使文本隐藏**的联动事件，那么在对应按钮被点击时，将会触发对应绑定文本的隐藏。
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-10_2117738923_1637238863127559">
|
||||
|
||||
### 添加组件自定义事件
|
||||
如何开发一个完整组件可以参考[组件开发](../component)，这一节我们主要讲述如何配置定义事件。
|
||||
|
||||
在组件开发过程中，我们可以通过声明组件中的 event 文件，在文件中描述当前组件可以配置的事件名，和可以被触发的动作。
|
||||
```javascript
|
||||
// event.js
|
||||
export default {
|
||||
events: [
|
||||
{
|
||||
label: '完成某事件',
|
||||
value: 'yourComponent:finishSomething',
|
||||
},
|
||||
],
|
||||
methods: [
|
||||
{
|
||||
label: '弹出 Toast',
|
||||
value: 'toast',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
```
|
||||
其中，events 的 value 是个事件名，是 `string` 类型，为了避免和其他组件事件名重复，应该添加上一些前缀。
|
||||
|
||||
而 methods 中的 value 则是一个挂载在组件上的可执行函数。我们会在事件触发时，分发到对应组件上，并执行对应组件实例上的方法。
|
||||
|
||||
配置了上述内容的组件，在编辑器中选中当前组件，要触发其他组件的联动事件时，会有如下选项
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-32_1191352525_1637240258489761">
|
||||
|
||||
在被其他组件选中为联动组件，要触发联动事件，会有如下选项
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_fd3c9c-3_214972289_1637240375129207">
|
||||
|
||||
### 组件中的代码实现
|
||||
如上面提到的，我们定制了**完成某件事**这个事件，以及要提供一个**弹出 Toast**的方法。在组件中必要的实现内容如下。
|
||||
|
||||
#### vue 版本实现
|
||||
我们主要讲解 vue3 的 setup 实现。vue2 可以根据 vue3 同理转换成 options api 实现即可。
|
||||
|
||||
```vue
|
||||
<!-- Test.vue -->
|
||||
<template>
|
||||
<div @click="onClick">
|
||||
<!-- your component code -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { type ComponentProps, registerNodeHooks, useApp } from '@tmagic/vue-runtime-help';
|
||||
|
||||
const props = defineProps<ComponentProps>()
|
||||
|
||||
const { app, node } = useApp(props);
|
||||
|
||||
const onClick = () => {
|
||||
// app.emit 第一个参数为事件名，其余参数为你要传给接受事件组件的参数
|
||||
app.emit("yourComponent:finishSomething", node, /*可以传参给接收方*/);
|
||||
};
|
||||
|
||||
// 此处实现事件动作
|
||||
const toast = () => {
|
||||
toast('测试 vue3')
|
||||
};
|
||||
|
||||
// 实际触发时是调用node上的方法，所以需要将改方法暴露到node上
|
||||
registerNodeHooks(node, {
|
||||
toast,
|
||||
});
|
||||
|
||||
defineExpose({
|
||||
toast,
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
#### react 版本实现
|
||||
在 react 的实现中，由于tmagic-editor提供的 @tmagic/ui-react 版本是用 hook 实现的。所以组件开发我们也相应的需要使用 hook 方式。
|
||||
|
||||
```jsx
|
||||
import React from 'react';
|
||||
|
||||
import { useApp } from '@tmagic/ui-react';
|
||||
|
||||
function Test({ config }) {
|
||||
// react 和 vue 实现不同，我们通过 useApp 这个 hook 来提供 app 等核心内容
|
||||
const { app } = useApp({
|
||||
config,
|
||||
// 此处实现事件动作
|
||||
// 通过向 useApp 这个 hook 提供 methods 方法
|
||||
// tmagic-editor会将该事件注册到事件机制中，在对应事件响应被触发时调用对应方法
|
||||
methods: {
|
||||
toast: (/*接收触发事件组件传进来的参数*/) => {
|
||||
toast('测试 react');
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const onClickFunc = () => {
|
||||
// app.emit 第一个参数为事件名，其余参数为你要传给接受事件组件的参数
|
||||
app?.emit("yourComponent:finishSomething", /*可以传参给接收方*/);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
id={config.id}
|
||||
style={app.transformStyle(config.style || {})}
|
||||
onClick={onClick}
|
||||
>
|
||||
// your component code
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Test;
|
||||
```
|
||||
@ -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,49 +0,0 @@
|
||||
# 布局原理
|
||||
tmagic-editor的布局实现方式，**关键在于将布局配置指定在容器上，对容器内的所有子组件生效**，这是tmagic-editor页面可以支持各种布局方式混合使用的核心方法。
|
||||
|
||||
## 容器
|
||||
前面概念介绍中有提到，tmagic-editor的容器是组件的基础。组件必属于某个容器，容器下可以放组件，也可以放容器。页面本身就是一个容器，是所有容器和组件的根，整个页面的容器和组件组成一个树状结构。在 DSL 配置中，表现为:
|
||||
|
||||
```javascript
|
||||
[{
|
||||
id: 123456,
|
||||
type: 'page',
|
||||
items: [{
|
||||
id: 222222,
|
||||
type: 'comp-A',
|
||||
}, {
|
||||
id: 333333,
|
||||
type: 'comp-B',
|
||||
}]
|
||||
}]
|
||||
```
|
||||
|
||||
## 顺序/绝对定位
|
||||
组件是绝对或者顺序定位，体现在组件的**直属父级容器**上，比如我们将 page 设置为绝对定位，则它的子组件，全都为绝对定位。在 DSL 配置中，表现为：
|
||||
|
||||
```javascript
|
||||
[{
|
||||
id: 123456,
|
||||
type: 'page',
|
||||
layout: "absolute",
|
||||
items: [{
|
||||
id: 222222,
|
||||
type: 'comp-A',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
},
|
||||
}, {
|
||||
id: 333333,
|
||||
type: 'comp-B',
|
||||
style: {
|
||||
position: 'absolute',
|
||||
},
|
||||
}]
|
||||
}]
|
||||
```
|
||||
所以，我们对绝对/顺序排布的配置描述 layout，是存在于容器上的。
|
||||
|
||||
## 混合布局
|
||||
因为tmagic-editor的布局配置，是指定在容器上的，所以tmagic-editor的设计方式，就可以支持在页面中实现各种混合布局的嵌套。
|
||||
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-37_1417201939_1636341538475155?imageView2/q/70">
|
||||
@ -1,64 +0,0 @@
|
||||
# 页面渲染
|
||||
tmagic-editor的页面渲染，是通过在载入编辑器中保存的 DSL 配置，通过 ui 渲染器渲染页面。在容器布局原理里我们提到过，容器和组件在配置中呈树状结构，所以渲染页面的时候，渲染器会递归配置内容，从而渲染出页面所有组件。
|
||||
|
||||
<img src="https://vfiles.gtimg.cn/vupload/20211009/f4d3031633778551251.png">
|
||||
|
||||
## 容器渲染
|
||||
页面的渲染器，其实就是两个基础组件，基础容器组件和基础组件。页面在读到 DSL 配置之后，根组件必定是一个容器，此时渲染基础容器组件，而容器组件的职责很简单，就是将其子组件渲染出来。具体形式为：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div>
|
||||
<magic-ui-component
|
||||
v-for="item in config.items"
|
||||
:key="item.id"
|
||||
:config="item"
|
||||
></magic-ui-component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'magic-ui-container',
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
## 组件渲染
|
||||
所有tmagic-editor组件，都通过一个tmagic-editor基础组件来渲染。这个基础组件会识别当前渲染组件的类型。如果当前渲染组件是普通组件（包括ui中提供的基础组件和业务开发的业务组件），则直接渲染；如果当前渲染组件是容器，则回到[容器渲染](#容器渲染)逻辑中。
|
||||
|
||||
基础组件的具体形式为：
|
||||
```vue
|
||||
<template>
|
||||
<component
|
||||
:is="tagName"
|
||||
:config="config"
|
||||
></component>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'magic-ui-component',
|
||||
|
||||
props: {
|
||||
config: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
setup(props) {
|
||||
return {
|
||||
tagName: computed(() => `magic-ui-${props.config.type}`),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
## 渲染器示例
|
||||
在tmagic-editor的示例项目中，我们提供了三个版本的 @tmagic/ui。可以参考对应前端框架的渲染器实现。
|
||||
- [vue 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/vue-components/container/src/Container.vue)
|
||||
- [react 渲染器](https://github.com/Tencent/tmagic-editor/blob/master/react-components/container/src/Container.tsx)
|
||||
@ -1,153 +0,0 @@
|
||||
# @tmagic/form
|
||||
|
||||
tmagic-editor的表单配置，核心就是使用了 @tmagic/form 来作为渲染器。@tmagic/form 是一个 npm 包，可以安装它，在你想使用的地方单独使用。
|
||||
|
||||
@tmagic/form 接受一个表单配置，详细配置可参考[表单 api](../../api/form/form-props.md)。
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
# 最新稳定版
|
||||
$ npm install @tmagic/form
|
||||
```
|
||||
|
||||
```bash
|
||||
$ npm install @tmagic/element-plus-adapter @tmagic/design element-plus -S
|
||||
```
|
||||
|
||||
## 快速上手
|
||||
|
||||
本节将介绍如何在项目中使用 @tmagic/form
|
||||
|
||||
### 引入 @tmagic/form
|
||||
|
||||
MagicForm 使用了 element-ui 库
|
||||
|
||||
在 main.js 中写入以下内容：
|
||||
|
||||
```javascript
|
||||
import { createApp } from 'vue';
|
||||
import ElementPlus from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
|
||||
import TMagicDesign from '@tmagic/design';
|
||||
import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';
|
||||
import MagicForm from '@tmagic/form';
|
||||
|
||||
import App from './App.vue';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(ElementPlus, {
|
||||
locale: zhCn,
|
||||
});
|
||||
app.use(TMagicDesign, MagicElementPlusAdapter);
|
||||
app.use(MagicForm);
|
||||
app.mount("#app");
|
||||
```
|
||||
|
||||
|
||||
以上代码便完成了 @tmagic/form 的引入。需要注意的是，ElementUI 的样式文件需要单独引入。
|
||||
|
||||
在 App.Vue 中写入以下内容：
|
||||
|
||||
```html
|
||||
<m-form :config="config" :init-values="initValue"></m-form>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
config: [
|
||||
{
|
||||
text: "文本",
|
||||
name: "text",
|
||||
},
|
||||
{
|
||||
type: "number",
|
||||
text: "计数器",
|
||||
name: "number",
|
||||
},
|
||||
{
|
||||
type: "row",
|
||||
items: [
|
||||
{
|
||||
type: "date",
|
||||
text: "日期",
|
||||
name: "date",
|
||||
},
|
||||
{
|
||||
type: "checkbox",
|
||||
text: "多选框",
|
||||
name: "checkbox",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: "fieldset",
|
||||
name: "fieldset",
|
||||
legend: "分组",
|
||||
items: [
|
||||
{
|
||||
type: "select",
|
||||
text: "下拉选项",
|
||||
name: "select",
|
||||
options: [
|
||||
{ text: "选项1", value: 1 },
|
||||
{ text: "选项2", value: 2 },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
initValue: {
|
||||
text: "文本",
|
||||
number: 10,
|
||||
fieldset: {
|
||||
select: 1,
|
||||
},
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
```
|
||||
|
||||
### 开始使用
|
||||
|
||||
至此，一个基于 Vue 和 @tmagic/form 的开发环境已经搭建完毕，现在就可以编写代码了。
|
||||
|
||||
### 示例
|
||||
|
||||
<demo-block type="form" :config="[{
|
||||
text: '文本',
|
||||
name: 'text'
|
||||
}, {
|
||||
type: 'number',
|
||||
text: '计数器',
|
||||
name: 'number'
|
||||
}, {
|
||||
type: 'row',
|
||||
items: [{
|
||||
type: 'date',
|
||||
text: '日期',
|
||||
name: 'date'
|
||||
}, {
|
||||
type: 'checkbox',
|
||||
text: '多选框',
|
||||
name: 'checkbox'
|
||||
}]
|
||||
}, {
|
||||
type: 'fieldset',
|
||||
name: 'fieldset',
|
||||
legend: '分组',
|
||||
items: [{
|
||||
type: 'select',
|
||||
text: '下拉选项',
|
||||
name: 'select',
|
||||
options: [
|
||||
{ text: '选项1', value: 1 },
|
||||
{ text: '选项2', value: 2 }
|
||||
]
|
||||
}]
|
||||
}]">
|
||||
</demo-block>
|
||||
@ -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,73 +0,0 @@
|
||||
# 基础概念
|
||||
我们通过讲述tmagic-editor的一些基础概念。帮助开发者可以了解tmagic-editor是如何运行以及如何在基础项目之上开发、使用它。
|
||||
|
||||
[](/flow.png){target="_blank"}
|
||||
|
||||
## 编辑器
|
||||
编辑器基础布局上分为：左面板、工作区、右面板、工具栏，如下图。
|
||||
- **左面板**，包含了组件库的展示，以及工作区中已添加组件的组件树展示。
|
||||
- **工作区**，一个页面模拟器，用于实时展示用户添加到当前页面中的组件在真实页面中的展示情况。
|
||||
- **右面板**，展示组件提供出来的表单选项，让用户可以通过配置项来改变组件的行为和样式。
|
||||
- **工具栏**，放置一些如缩放、撤销等工具按键。
|
||||
<img src="https://vfiles.gtimg.cn/vupload/20211009/083dfa1633771059332.png">
|
||||
|
||||
### 组件
|
||||
组件是tmagic-editor可配置页面元素的最小单位。我们都会从左面板的组件区中选中组件，加入到工作区的模拟器中，然后在右面板中对组件进行配置。一个组件的基本内容，会包含如下：
|
||||
- 组件样式、逻辑代码（即开发者写的 vue, react 等代码）。
|
||||
- 表单配置描述，tmagic-editor的定义是导出一个表单对象，这份配置仅在编辑器中使用。
|
||||
- 拓展描述，这部分内容目前还未有严格定义，但是我们保留这个扩展能力。
|
||||
- 组件 `type`, 是组件的类型，这是用来告诉编辑器，我们要渲染的是什么组件。每个组件在开发时就应该确定这样一个唯一、不和其他组件冲突的组件 `type`。
|
||||
|
||||
```js
|
||||
[
|
||||
{
|
||||
text: '文本',
|
||||
type: 'text', ⬅️
|
||||
},
|
||||
{
|
||||
text: '按钮',
|
||||
type: 'button', ⬅️
|
||||
},
|
||||
{
|
||||
text: '测试',
|
||||
type: 'test', ⬅️
|
||||
},
|
||||
]
|
||||
```
|
||||
|
||||
### 插件
|
||||
插件和组件类似，但是插件的功能是作为页面逻辑行为的一种补充方式。一般不显式的在模拟器中被渲染出具体内容（除非插件中会生成组件并插入页面），通常我们会用插件实现类似登录，页面环境判断，请求拦截器等等功能。
|
||||
|
||||
插件一般包含如下内容：
|
||||
- 插件逻辑代码。
|
||||
- 插件 `type`，是插件的类型，和组件 `type` 作用相同。在开发时就应该确定这样一个唯一、不和其他组件冲突的组件 `type`。
|
||||
|
||||
|
||||
### 容器
|
||||
容器是tmagic-editor编辑器中的一个基础单位，页面本身就是一个容器，在基础组件中称为**组**，tmagic-editor通过容器概念，实现了丰富的布局方式，因为我们的布局行为是设置在容器上的，容器内的组件是绝对定位、或是顺序排布，是根据容器的配置行为改变的。tmagic-editor的容器理论上可以无限嵌套。
|
||||
|
||||
### 表单配置
|
||||
表单配置是编辑器右面板展示的内容，配置项目都是由组件里的表单描述来决定的，用户可以在表单配置区域里通过配置项来改变组件的行为和样式。
|
||||
|
||||
注意，由于每个组件都需要有一些共同的表单配置项目，所以tmagic-editor通过在表单渲染器，统一为所有组件加上了通用的表单配置项目。包括基础组件样式配置、钩子事件配置等。
|
||||
|
||||
### DSL
|
||||
DSL 是编辑器搭建页面的最终产物（描述文件），其中包含了所有组件信息（组件布局，组件配置等）和插件内容，以及其他可拓展的信息都存放在 DSL 中。tmagic-editor项目页的展示即是tmagic-editor页面在加载 DSL 之后，根据 DSL 的描述进行渲染的。在tmagic-editor中，我们使用 [JS schema](advanced/js-schema.html) 来保存这份配置文件。
|
||||
|
||||
## 页面
|
||||
页面是tmagic-editor作为一个可视化编辑器经过配置后，最终得到的呈现结果。搭建后的页面会被发布上线，供用户访问。
|
||||
|
||||
### runtime
|
||||
我们把页面统一称为 runtime，更具体的 runtime 概念可以查看[页面发布](./publish.html#runtime)。**runtime 是承载tmagic-editor项目页面的运行环境**。编辑器的工作区是 runtime 的一个具体实例，另一个就是我们发布上线后，用户访问的真实项目页面。
|
||||
|
||||
## 联动
|
||||
页面搭建过程中，会涉及到两种联动形式
|
||||
- 在编辑器中，组件的表单配置项之间需要联动。
|
||||
- 页面中的组件之间，需要联动触发行为。
|
||||
|
||||
### 表单联动
|
||||
配置项 A 改变值，希望能触发配置项 B 相应的变成另外一个值，就是表单联动的一个示例。tmagic-editor实现表单联动的方式，就是通过渲染的时候，将表单对象注入，在组件的表单配置描述中，可以通过函数声明来获取并且进行逻辑编写，实现表单联动。
|
||||
|
||||
### 组件联动
|
||||
组件 A 在完成点击事件后，希望组件 B 可以展示一个弹窗，就是组件联动的一个示例。tmagic-editor通过事件绑定方式，可以为组件 A 和 B 配置事件关联，实现上述的组件联动。
|
||||
<img src="https://vip.image.video.qpic.cn/vupload/20231027/3e02d31698914788006.png" alt="组件联动">
|
||||
@ -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,165 +0,0 @@
|
||||
# 介绍
|
||||
本章主要介绍tmagic-editor页面打包、发布相关的基础概念，打包原理，打包方案实现。使用了tmagic-editor开源代码的业务方可以自由定制页面的打包构建方案。
|
||||
|
||||
## 编辑器产物 DSL
|
||||
编辑器中最终保存得到的配置结果，同时也是tmagic-editor页面最终渲染的描述文件，就是一份 JS schema 形式的 DSL。其具体形式就是在 [JS Schema](./advanced/js-schema.html#DSL) 我们示例中提到的内容。
|
||||
|
||||
在tmagic-editor编辑器中，所有的操作和配置信息，最终都保存成这一份 DSL。这份配置在tmagic-editor runtime 中被加载和渲染，最终呈现出tmagic-editor项目页。
|
||||
|
||||
## runtime
|
||||
runtime 的概念，是理解tmagic-editor项目页运行的重要概念，runtime 是承载tmagic-editor项目页面的运行环境。可视化页面需要在tmagic-editor编辑器中搭建、渲染，通过模拟器所见即所得。搭建完成后，保存配置并发布，然后渲染到真实页面。其中涉及到两个不同的 runtime：
|
||||
- 编辑器中的模拟器
|
||||
- 终端打开真实页面
|
||||
|
||||
所以更深入描述，runtime 是tmagic-editor页面的渲染环境，提供不同场景下的能力封装。如果理解了tmagic-editor的设计，阅读了tmagic-editor的源码，可以发现，runtime 只是对tmagic-editor的渲染器做了一层包装，在不同 runtime 中，tmagic-editor的渲染逻辑和组件代码都是相同的。
|
||||
|
||||
并且，由于tmagic-editor在编辑器中的模拟器是通过 iframe 渲染的，和tmagic-editor平台本身可以做到框架解耦，所以 runtime 也可以用不同框架开发。目前tmagic-editor提供了 vue 和 react 的 runtime 示例。
|
||||
|
||||
各个 runtime 的作用除了作为不同场景下的渲染环境，同时也是不同环境的打包构建载体。tmagic-editor示例代码中的打包就是基于 runtime 进行的。
|
||||
|
||||
### 业务相关
|
||||
由于 runtime 是页面渲染的承载环境，其中会加载 @tmagic/ui 以及各个业务组件，业务发布项目页也是基于 runtime，所以在 runtime 中实现业务方的自定义逻辑是最合适的。runtime 可以提供一些全局 API，供业务组件调用。我们可以把下面的模拟器中的 runtime 视为一个业务方runtime。
|
||||
|
||||
tmagic-editor提供了三个版本的 runtime 示例，可以参考：
|
||||
- [vue runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/vue)
|
||||
- [react runtime](https://github.com/Tencent/tmagic-editor/blob/master/runtime/react)
|
||||
|
||||
### 真实页面渲染（Page）
|
||||
这一部分，对应的是 runtime 中的 page。即把tmagic-editor保存后的配置进行加载、解析、渲染，然后呈现页面的过程。
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-37_1139402464_1633761800125955" width="100%" alt="tmagic-editor runtime page 示意图">
|
||||
|
||||
### 模拟器中的页面渲染（Playground）
|
||||
这一部分，对应的是 runtime 中的 playground。其实仔细查看源码，playground 和 page runtime 的差异，在于 playground 中需要响应编辑器中用户的操作：
|
||||
- 组件的增删改
|
||||
- 表单配置修改
|
||||
|
||||
响应用户配置修改的操作代码并不需要在用户打开的页面被使用到，这是两个 runtime 的主要差异。
|
||||
<img src="https://image.video.qpic.cn/oa_88b7d-32_528694230_1633762153731370" width="100%" alt="tmagic-editor runtime playground 示意图">
|
||||
|
||||
## @tmagic/cli
|
||||
|
||||
在[组件开发](./component.md)中可以知道，一个组件是由组件(component)、表单配置(formConfig)、初始值(initValue)三个部分组成，其中表单配置跟初始值是提供给@tmagic/editor使用的，组件则是提供给runtime使用的。所以提供了@tmagic/cli来生成这几个部分的入口文件，处理以上提到的三个部分，还有组件的事件配置列表(@tmagic/editor中使用)，插件列表(runtime中使用)，总共5个入口文件。
|
||||
|
||||
### 使用方法
|
||||
|
||||
1、在runtime中安装@tmagic/cli
|
||||
```bash
|
||||
npm install @tmagic/cli -D
|
||||
```
|
||||
|
||||
2、在package.json 中的scripts中加入 tmagic entry
|
||||
```json
|
||||
{
|
||||
"scripts": {
|
||||
"entry": "tmagic entry"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
3、在runtime目录下添加tmagic.config.ts
|
||||
|
||||
```ts
|
||||
import path from 'path';
|
||||
|
||||
import { defineConfig } from '@tmagic/cli';
|
||||
|
||||
export default defineConfig({
|
||||
/** 组件目录或者npm包名 */
|
||||
packages: [path.join(__dirname, '../../packages/ui')],
|
||||
/** 组件文件后缀名，例如vue文件为.vue，tsx文件为.tsx，普通js文件则为.js */
|
||||
componentFileAffix: '.vue',
|
||||
/** npm 配置，用于当packages配置有npm包名时，可以自动安装npm包 */
|
||||
npmConfig: {
|
||||
/** pnpm | npm | yarn */
|
||||
client: 'npm',
|
||||
/** npm镜像代理 */
|
||||
registry: 'https://registry.npmjs.org/'
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
4、结果
|
||||
|
||||
执行
|
||||
|
||||
```bash
|
||||
npm run entry
|
||||
```
|
||||
|
||||
会在根目录下生成.tmagic文件夹
|
||||
|
||||
```
|
||||
└─.tmagic
|
||||
└─ comp-entry.ts // 组件
|
||||
└─ config-entry.ts // 组件属性表单配置
|
||||
└─ event-entry.ts // 组件事件列表
|
||||
└─ plugin-entry.ts // 插件
|
||||
└─ value-entry.ts // 组件初始值
|
||||
```
|
||||
|
||||
在 runtime 中，我们通过 vite.config.ts 定义了打包入口文件，在 package.json 中声明了打包命令。你可以进入对应的 runtime 目录中尝试执行
|
||||
|
||||
我们就可以得到打包产物 dist 目录。其中有我们在线上项目页面使用的 page.html 和编辑器模拟器使用的 playground.html 两个 runtime 页面框架。
|
||||
|
||||
## 页面发布
|
||||
tmagic-editor的页面发布，目前使用的是静态资源发布。而所有配置出的项目页唯一的区别，就是配置信息。我们发布页面时，将页面的配置信息插入到 page.html 中，然后将修改后的 page.html 发布至 CDN，得到项目页面。
|
||||
|
||||
原始的 page.html 页面框架
|
||||
```html
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Magic App</title>
|
||||
<script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
|
||||
<script type="module" crossorigin src="assets/page.js"></script>
|
||||
<link rel="modulepreload" href="assets/App.10f9c9e1.js">
|
||||
<link rel="modulepreload" href="assets/vendor.1dc07625.js">
|
||||
<link rel="modulepreload" href="assets/index.3456a0b9.js">
|
||||
<link rel="modulepreload" href="assets/components.js">
|
||||
<link rel="stylesheet" href="assets/App.91ddd4a6.css">
|
||||
<link rel="stylesheet" href="assets/page.6c73043b.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
插入项目信息后的 page.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Publish Page</title>
|
||||
<!-- 这里插入了项目相关的 DSL.js -->
|
||||
<script type="module" src="./DSL.js"></script>
|
||||
<script src="https://unpkg.com/vue@next/dist/vue.runtime.global.js"></script>
|
||||
<script type="module" crossorigin src="assets/page.js"></script>
|
||||
<link rel="modulepreload" href="assets/App.10f9c9e1.js">
|
||||
<link rel="modulepreload" href="assets/vendor.1dc07625.js">
|
||||
<link rel="modulepreload" href="assets/index.3456a0b9.js">
|
||||
<link rel="modulepreload" href="assets/components.js">
|
||||
<link rel="stylesheet" href="assets/App.91ddd4a6.css">
|
||||
<link rel="stylesheet" href="assets/page.6c73043b.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
其中DSL.js文件为：
|
||||
|
||||
```
|
||||
window.magicDSL = [
|
||||
// DSL
|
||||
]
|
||||
```
|
||||
@ -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渲染成对应的组件
|
||||
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