mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-04-06 03:57:56 +08:00
docs: 表单配置文档整理
This commit is contained in:
roymondchen
jia000
parent
6462dcebdf
commit
cf3dfde648
49
docs/package-lock.json
generated
49
docs/package-lock.json
generated
@ -15,6 +15,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.1.tgz",
|
||||||
"integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
|
"integrity": "sha512-ej5oVy6lykXsvieQtqZxCOaLT+xD4+QNarq78cIYISHmZXshCvROLudpQN3lfL8G0NL7plMSSK+zlyvCaIJ4Iw=="
|
||||||
},
|
},
|
||||||
|
"@element-plus/icons": {
|
||||||
|
"version": "0.0.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@element-plus/icons/-/icons-0.0.11.tgz",
|
||||||
|
"integrity": "sha512-iKQXSxXu131Ai+I9Ymtcof9WId7kaXvB1+WRfAfpQCW7UiAMYgdNDqb/u0hgTo2Yq3MwC4MWJnNuTBEpG8r7+A=="
|
||||||
|
},
|
||||||
"@element-plus/icons-vue": {
|
"@element-plus/icons-vue": {
|
||||||
"version": "1.1.4",
|
"version": "1.1.4",
|
||||||
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
|
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
|
||||||
@ -59,11 +64,6 @@
|
|||||||
"fastq": "^1.6.0"
|
"fastq": "^1.6.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@popperjs/core": {
|
|
||||||
"version": "npm:@sxzz/popperjs-es@2.11.7",
|
|
||||||
"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
|
|
||||||
"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
|
|
||||||
},
|
|
||||||
"@types/debug": {
|
"@types/debug": {
|
||||||
"version": "4.1.7",
|
"version": "4.1.7",
|
||||||
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
|
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
|
||||||
@ -526,9 +526,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@vueuse/metadata": {
|
"@vueuse/metadata": {
|
||||||
"version": "8.3.1",
|
"version": "8.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.5.0.tgz",
|
||||||
"integrity": "sha512-1aZaFL44HzXXkfN6Q7KMDOXBFKTHDClHlOJBxtN8rTBXIIScoGOrJCpxWiQ4kuVg95MzG/pHrd3P4wd8poL9XQ=="
|
"integrity": "sha512-WxsD+Cd+bn+HcjpY6Dl9FJ8ywTRTT9pTwk3bCQpzEhXVYAyNczKDSahk50fCfIJKeWHhyI4B2+/ZEOxQAkUr0g=="
|
||||||
},
|
},
|
||||||
"@vueuse/shared": {
|
"@vueuse/shared": {
|
||||||
"version": "7.6.2",
|
"version": "7.6.2",
|
||||||
@ -767,9 +767,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"dayjs": {
|
"dayjs": {
|
||||||
"version": "1.11.1",
|
"version": "1.11.2",
|
||||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.1.tgz",
|
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
|
||||||
"integrity": "sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA=="
|
"integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
|
||||||
},
|
},
|
||||||
"debug": {
|
"debug": {
|
||||||
"version": "4.3.3",
|
"version": "4.3.3",
|
||||||
@ -805,9 +805,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"element-plus": {
|
"element-plus": {
|
||||||
"version": "2.1.11",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.11.tgz",
|
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.0.tgz",
|
||||||
"integrity": "sha512-s4X0I8s787tv+9UdekBC1g7v42Fj4bucPAmu03EjbgrGrV7BJvkoBGuK52lNfu4yC76bl6Uyjesd5Fu8CMakSw==",
|
"integrity": "sha512-zxmAFEAa1T/n09rR+NozXcWl5CjaFtqoaxhFSafag0dgc90tgEHitDXfegdFAl4ahugdNTqu9aLzngx3VhDAtA==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@ctrl/tinycolor": "^3.4.1",
|
"@ctrl/tinycolor": "^3.4.1",
|
||||||
"@element-plus/icons-vue": "^1.1.4",
|
"@element-plus/icons-vue": "^1.1.4",
|
||||||
@ -826,20 +826,25 @@
|
|||||||
"normalize-wheel-es": "^1.1.2"
|
"normalize-wheel-es": "^1.1.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@popperjs/core": {
|
||||||
|
"version": "npm:@sxzz/popperjs-es@2.11.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz",
|
||||||
|
"integrity": "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
|
||||||
|
},
|
||||||
"@vueuse/core": {
|
"@vueuse/core": {
|
||||||
"version": "8.3.1",
|
"version": "8.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.5.0.tgz",
|
||||||
"integrity": "sha512-WiXUgVyPG9elGx3G8UV8g+zqbEJ2hYacrPICogAxDdW6hnxxcUFdF7FtvDroJ/DxWmo2pg8XNNz07ybfnZyJbw==",
|
"integrity": "sha512-VEJ6sGNsPlUp0o9BGda2YISvDZbhWJSOJu5zlp2TufRGVrLcYUKr31jyFEOj6RXzG3k/H4aCYeZyjpItfU8glw==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@vueuse/metadata": "8.3.1",
|
"@vueuse/metadata": "8.5.0",
|
||||||
"@vueuse/shared": "8.3.1",
|
"@vueuse/shared": "8.5.0",
|
||||||
"vue-demi": "*"
|
"vue-demi": "*"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@vueuse/shared": {
|
"@vueuse/shared": {
|
||||||
"version": "8.3.1",
|
"version": "8.5.0",
|
||||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.3.1.tgz",
|
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.5.0.tgz",
|
||||||
"integrity": "sha512-7HKLCcxp4dtONq6QSSoavblo9riYgqzw7jhqiC0/VUYMXKzqj1G/GznOzTmY8Wi8uKKT197JqjKQ1DKt2j/0+A==",
|
"integrity": "sha512-qKG+SZb44VvGD4dU5cQ63z4JE2Yk39hQUecR0a9sEdJA01cx+XrxAvFKJfPooxwoiqalAVw/ktWK6xbyc/jS3g==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"vue-demi": "*"
|
"vue-demi": "*"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -7,6 +7,7 @@
|
|||||||
"build": "vuepress build src -d dist"
|
"build": "vuepress build src -d dist"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@element-plus/icons": "0.0.11",
|
||||||
"element-plus": "^2.2.0",
|
"element-plus": "^2.2.0",
|
||||||
"highlight.js": "^11.2.0"
|
"highlight.js": "^11.2.0"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -8,6 +8,27 @@ import DemoBlock from './demo-block.vue';
|
|||||||
|
|
||||||
export default defineClientAppEnhance(({ app }) => {
|
export default defineClientAppEnhance(({ app }) => {
|
||||||
app.use(ElementPlus);
|
app.use(ElementPlus);
|
||||||
app.use(MagicForm);
|
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);
|
app.component('demo-block', DemoBlock);
|
||||||
});
|
});
|
||||||
|
|||||||
@ -50,27 +50,56 @@ const sidebar = {
|
|||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
api: [
|
editorApi: [
|
||||||
{
|
{
|
||||||
text: '编辑器',
|
text: '编辑器',
|
||||||
children: [
|
children: [
|
||||||
'/api/editor',
|
'/api/editor/editor',
|
||||||
'/api/model',
|
'/api/editor/services',
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
],
|
||||||
|
formApi: [
|
||||||
{
|
{
|
||||||
text: '表单',
|
text: '表单',
|
||||||
children: [
|
children: [
|
||||||
'/api/form',
|
'/api/form/form',
|
||||||
|
]
|
||||||
|
},
|
||||||
|
],
|
||||||
|
formConfig: [
|
||||||
|
{
|
||||||
|
text: '表单配置',
|
||||||
|
children: [
|
||||||
|
'/api/form-config/layout',
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: '表单配置协议',
|
text: 'field配置',
|
||||||
children: [
|
children: [
|
||||||
'/api/base-config',
|
'/api/form-config/fields/cascader',
|
||||||
'/api/field-config',
|
'/api/form-config/fields/checkbox',
|
||||||
|
'/api/form-config/fields/color-picker',
|
||||||
|
'/api/form-config/fields/date-picker',
|
||||||
|
'/api/form-config/fields/datetime-picker',
|
||||||
|
'/api/form-config/fields/display',
|
||||||
|
'/api/form-config/fields/hidden',
|
||||||
|
'/api/form-config/fields/number',
|
||||||
|
'/api/form-config/fields/input',
|
||||||
|
'/api/form-config/fields/link',
|
||||||
|
'/api/form-config/fields/redio',
|
||||||
|
'/api/form-config/fields/select',
|
||||||
|
'/api/form-config/fields/switch',
|
||||||
|
'/api/form-config/fields/textarea',
|
||||||
|
'/api/form-config/fields/time-picker',
|
||||||
]
|
]
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
text: '联动配置',
|
||||||
|
children: [
|
||||||
|
'/api/form-config/relate',
|
||||||
|
]
|
||||||
|
},
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -104,7 +133,20 @@ export default defineUserConfig<DefaultThemeOptions>({
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: 'API参考',
|
text: 'API参考',
|
||||||
link: '/api/editor'
|
children: [
|
||||||
|
{
|
||||||
|
text: '编辑器',
|
||||||
|
link: '/api/editor/editor'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '表单',
|
||||||
|
link: '/api/form/form'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '表单配置',
|
||||||
|
link: '/api/form-config/layout'
|
||||||
|
},
|
||||||
|
],
|
||||||
}, {
|
}, {
|
||||||
text: '查看源码',
|
text: '查看源码',
|
||||||
link: 'https://github.com/Tencent/tmagic-editor'
|
link: 'https://github.com/Tencent/tmagic-editor'
|
||||||
@ -119,7 +161,9 @@ export default defineUserConfig<DefaultThemeOptions>({
|
|||||||
'/guide/': sidebar.guide,
|
'/guide/': sidebar.guide,
|
||||||
'/page/': sidebar.page,
|
'/page/': sidebar.page,
|
||||||
'/component/': sidebar.component,
|
'/component/': sidebar.component,
|
||||||
'/api/': sidebar.api,
|
'/api/editor': sidebar.editorApi,
|
||||||
|
'/api/form': sidebar.formApi,
|
||||||
|
'/api/form-config': sidebar.formConfig,
|
||||||
},
|
},
|
||||||
smoothScroll: false,
|
smoothScroll: false,
|
||||||
lastUpdated: false,
|
lastUpdated: false,
|
||||||
|
|||||||
@ -20,21 +20,20 @@
|
|||||||
<div
|
<div
|
||||||
class="demo-block-control"
|
class="demo-block-control"
|
||||||
ref="control"
|
ref="control"
|
||||||
:class="{ 'is-fixed': fixedControl }"
|
|
||||||
@click="isExpanded = !isExpanded"
|
@click="isExpanded = !isExpanded"
|
||||||
>
|
>
|
||||||
<transition name="arrow-slide">
|
<transition name="arrow-slide">
|
||||||
<i :class="[iconClass, { hovering: hovering }]"></i>
|
<i :class="[iconClass, hovering]"></i>
|
||||||
</transition>
|
</transition>
|
||||||
<transition name="text-slide">
|
<transition name="text-slide">
|
||||||
<span v-show="hovering">{{ controlText }}</span>
|
<span>{{ controlText }}</span>
|
||||||
</transition>
|
</transition>
|
||||||
<el-tooltip effect="dark" :content="'前往 codepen.io 运行此示例'" placement="right">
|
<el-tooltip effect="dark" :content="'前往 codepen.io 运行此示例'" placement="right">
|
||||||
<transition name="text-slide">
|
<transition name="text-slide">
|
||||||
<el-button
|
<el-button
|
||||||
v-show="hovering || isExpanded"
|
|
||||||
size="small"
|
size="small"
|
||||||
type="text"
|
type="primary"
|
||||||
|
text
|
||||||
class="control-button"
|
class="control-button"
|
||||||
@click.stop="goCodepen"
|
@click.stop="goCodepen"
|
||||||
>
|
>
|
||||||
@ -187,7 +186,7 @@
|
|||||||
.control-button {
|
.control-button {
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 10px;
|
||||||
right: 0;
|
right: 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
216
docs/src/api/form-config/fields/cascader.md
Normal file
216
docs/src/api/form-config/fields/cascader.md
Normal file
@ -0,0 +1,216 @@
|
|||||||
|
# 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>
|
||||||
75
docs/src/api/form-config/fields/checkbox.md
Normal file
75
docs/src/api/form-config/fields/checkbox.md
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
# 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>
|
||||||
|
|
||||||
|
## 多选框组
|
||||||
|
|
||||||
|
适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。
|
||||||
|
|
||||||
|
<demo-block type="form" :config="[{
|
||||||
|
type: 'checkbox-group',
|
||||||
|
name: 'checkbox',
|
||||||
|
text: '选项',
|
||||||
|
options: [
|
||||||
|
{ text: '选项1', value: 1 },
|
||||||
|
{ text: '选项2', value: 2 }
|
||||||
|
]
|
||||||
|
}]">
|
||||||
|
<template #source>
|
||||||
|
<p>
|
||||||
|
checkbox-group 元素能把多个 checkbox 管理为一组。
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
|
||||||
|
## Checkbox Attributes
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|---------- |-------- |---------- |------------- |-------- |
|
||||||
|
| name | 绑定值 | string | — | — |
|
||||||
|
| text | 表单标签 | string | — | — |
|
||||||
|
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||||
|
| activeValue | 选中时的值 | string / number / Function | — | 1 |
|
||||||
|
| inactiveValue | 没有选中时的值 | string / number / Function | — | 0 |
|
||||||
|
| onChange | 值变化时触发的函数 | [OnChangeHandler ](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||||
|
|
||||||
|
## CheckboxGroup 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) | — | - |
|
||||||
|
| options | 选项 | Array | — | - |
|
||||||
17
docs/src/api/form-config/fields/color-picker.md
Normal file
17
docs/src/api/form-config/fields/color-picker.md
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
# ColorPicker 颜色选择器
|
||||||
|
|
||||||
|
用于颜色选择，支持多种格式。
|
||||||
|
|
||||||
|
## 基础用法
|
||||||
|
|
||||||
|
<demo-block type="form" :config="[{
|
||||||
|
text: '颜色选择器',
|
||||||
|
type: 'colorPicker',
|
||||||
|
name: 'color',
|
||||||
|
}]">
|
||||||
|
<template #source>
|
||||||
|
<p>
|
||||||
|
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</demo-block>
|
||||||
86
docs/src/api/form-config/fields/date-picker.md
Normal file
86
docs/src/api/form-config/fields/date-picker.md
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
# DatePicker 日期选择器
|
||||||
|
|
||||||
|
用于选择或输入日期
|
||||||
|
|
||||||
|
## 基础用法
|
||||||
|
|
||||||
|
<demo-block type="form" :config="[{
|
||||||
|
type: 'date',
|
||||||
|
name: 'date',
|
||||||
|
text: '日期选择器'
|
||||||
|
}]">
|
||||||
|
<template #source>
|
||||||
|
<p>
|
||||||
|
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
## 禁用状态
|
||||||
|
|
||||||
|
<demo-block type="form" :config="[{
|
||||||
|
type: 'date',
|
||||||
|
name: 'date',
|
||||||
|
text: '日期选择器',
|
||||||
|
disabled: () => true
|
||||||
|
}]">
|
||||||
|
<template #source>
|
||||||
|
<p>
|
||||||
|
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</demo-block>
|
||||||
|
## 日期格式
|
||||||
|
|
||||||
|
使用`format`指定输入框的格式；使用`valueFormat`指定绑定值的格式。
|
||||||
|
|
||||||
|
默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
|
||||||
|
|
||||||
|
:::warning
|
||||||
|
请注意大小写
|
||||||
|
:::
|
||||||
|
|
||||||
|
| 格式 | 含义 | 备注 | 举例 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| `yyyy` | 年 | | 2017 |
|
||||||
|
| `M` | 月 | 不补0 | 1 |
|
||||||
|
| `MM` | 月 | | 01 |
|
||||||
|
| `W` | 周 | 仅周选择器的 `format` 可用；不补0 | 1 |
|
||||||
|
| `WW` | 周 | 仅周选择器的 `format` 可用 | 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 |
|
||||||
|
| `timestamp` | JS时间戳 | 组件绑定值为`number`类型 | 1483326245000 |
|
||||||
|
| `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM |
|
||||||
|
|
||||||
|
<demo-block type="form" :config="[{
|
||||||
|
type: 'date',
|
||||||
|
name: 'date',
|
||||||
|
text: '日期选择器',
|
||||||
|
valueFormat: 'timestamp'
|
||||||
|
}]">
|
||||||
|
<template #source>
|
||||||
|
<p>
|
||||||
|
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||||
|
| name | 绑定值 | string | — | — |
|
||||||
|
| text | 表单标签 | string | — | — |
|
||||||
|
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||||
|
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
|
||||||
|
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
88
docs/src/api/form-config/fields/datetime-picker.md
Normal file
88
docs/src/api/form-config/fields/datetime-picker.md
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
# DateTimePicker 日期时间选择器
|
||||||
|
|
||||||
|
在同一个选择器里选择日期和时间
|
||||||
|
|
||||||
|
## 基础用法
|
||||||
|
|
||||||
|
<demo-block type="form" :config="[{
|
||||||
|
type: 'datetime',
|
||||||
|
name: 'dateTime',
|
||||||
|
text: '日期时间选择器'
|
||||||
|
}]">
|
||||||
|
<template #source>
|
||||||
|
<p>
|
||||||
|
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
## 禁用状态
|
||||||
|
|
||||||
|
<demo-block type="form" :config="[{
|
||||||
|
type: 'datetime',
|
||||||
|
name: 'dateTime',
|
||||||
|
text: '日期时间选择器',
|
||||||
|
disabled: () => true
|
||||||
|
}]">
|
||||||
|
<template #source>
|
||||||
|
<p>
|
||||||
|
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
## 日期格式
|
||||||
|
|
||||||
|
使用`format`指定输入框的格式；使用`valueFormat`指定绑定值的格式。
|
||||||
|
|
||||||
|
默认情况下，组件接受并返回`Date`对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：
|
||||||
|
|
||||||
|
:::warning
|
||||||
|
请注意大小写
|
||||||
|
:::
|
||||||
|
|
||||||
|
| 格式 | 含义 | 备注 | 举例 |
|
||||||
|
|------|------|------|------|
|
||||||
|
| `yyyy` | 年 | | 2017 |
|
||||||
|
| `M` | 月 | 不补0 | 1 |
|
||||||
|
| `MM` | 月 | | 01 |
|
||||||
|
| `W` | 周 | 仅周选择器的 `format` 可用；不补0 | 1 |
|
||||||
|
| `WW` | 周 | 仅周选择器的 `format` 可用 | 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 |
|
||||||
|
| `timestamp` | JS时间戳 | 仅 `valueFormat` 可用；组件绑定值为`number`类型 | 1483326245000 |
|
||||||
|
| `[MM]` | 不需要格式化字符 | 使用方括号标识不需要格式化的字符 (如 [A] [MM]) | MM |
|
||||||
|
|
||||||
|
<demo-block type="form" :config="[{
|
||||||
|
type: 'datetime',
|
||||||
|
name: 'dateTime',
|
||||||
|
text: '日期时间选择器',
|
||||||
|
format: 'yyyy-MM-dd',
|
||||||
|
valueFormat: 'timestamp'
|
||||||
|
}]">
|
||||||
|
<template #source>
|
||||||
|
<p>
|
||||||
|
在开启多选模式后，默认情况下会展示所有已选中的选项的Tag
|
||||||
|
</p>
|
||||||
|
</template>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
## Attributes
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||||
|
| name | 绑定值 | string | — | — |
|
||||||
|
| text | 表单标签 | string | — | — |
|
||||||
|
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||||
|
| format | 显示在输入框中的格式 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | yyyy-MM-dd HH:mm:ss |
|
||||||
|
| value-format | 可选，绑定值的格式。不指定则绑定值为 Date 对象 | string | 见[日期格式](#/zh-CN/component/date-picker#ri-qi-ge-shi) | — |
|
||||||
|
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||||
36
docs/src/api/form-config/fields/display.md
Normal file
36
docs/src/api/form-config/fields/display.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
|
||||||
|
# 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 | — | — |
|
||||||
32
docs/src/api/form-config/fields/hidden.md
Normal file
32
docs/src/api/form-config/fields/hidden.md
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
# 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 | — | — |
|
||||||
128
docs/src/api/form-config/fields/input.md
Normal file
128
docs/src/api/form-config/fields/input.md
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
# 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 | — | — |
|
||||||
|
| placeholder | 输入框占位文本 | string | — | — |
|
||||||
|
| text | 表单标签 | string | — | — |
|
||||||
|
| disabled | 是否禁用 | boolean / [FilterFunction](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | false |
|
||||||
|
| tooltip | 输入时显示内容 | boolean | — | 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) | — | - |
|
||||||
|
| append | 后置内容 | string / Object | — | - |
|
||||||
|
|
||||||
|
## append Attributes
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|---------- |-------- |---------- |------------- |-------- |
|
||||||
|
| type | 内容类型 | string | button | — |
|
||||||
|
| text | 文本内容 | string | — | — |
|
||||||
|
| handler | 点击操作 | Function | — | - |
|
||||||
64
docs/src/api/form-config/fields/link.md
Normal file
64
docs/src/api/form-config/fields/link.md
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
# 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 | — | — |
|
||||||
62
docs/src/api/form-config/fields/number.md
Normal file
62
docs/src/api/form-config/fields/number.md
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
# 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 | — | — |
|
||||||
|
| placeholder | 输入框占位文本 | string | — | — |
|
||||||
|
| text | 表单标签 | 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 |
|
||||||
|
| onChange | 值变化时触发的函数 | [OnChangeHandler](https://github.com/Tencent/tmagic-editor/blob/master/packages/form/src/schema.ts) | — | - |
|
||||||
67
docs/src/api/form-config/fields/redio.md
Normal file
67
docs/src/api/form-config/fields/redio.md
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
# Radio 单选框
|
||||||
|
|
||||||
|
在一组备选项中进行单选
|
||||||
|
|
||||||
|
## TS 定义
|
||||||
|
|
||||||
|
```typescript
|
||||||
|
interface RedioGroup extends FormItem {
|
||||||
|
type: 'redioGroup';
|
||||||
|
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) | — | - |
|
||||||
200
docs/src/api/form-config/fields/select.md
Normal file
200
docs/src/api/form-config/fields/select.md
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
# 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: 'xxx',
|
||||||
|
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>
|
||||||
|
|
||||||
|
:::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 | — | — | — |
|
||||||
200
docs/src/api/form-config/fields/select.md~Stashed changes
Normal file
200
docs/src/api/form-config/fields/select.md~Stashed changes
Normal file
@ -0,0 +1,200 @@
|
|||||||
|
# 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>
|
||||||
|
|
||||||
|
:::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 | — | — | — |
|
||||||
52
docs/src/api/form-config/fields/switch.md
Normal file
52
docs/src/api/form-config/fields/switch.md
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
# 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 |
|
||||||
42
docs/src/api/form-config/fields/textarea.md
Normal file
42
docs/src/api/form-config/fields/textarea.md
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
# 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) | — | - |
|
||||||
41
docs/src/api/form-config/fields/time-picker.md
Normal file
41
docs/src/api/form-config/fields/time-picker.md
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
# 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 |
|
||||||
33
docs/src/api/form-config/relate.md
Normal file
33
docs/src/api/form-config/relate.md
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
# 联动
|
||||||
|
|
||||||
|
## 显隐
|
||||||
|
|
||||||
|
<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>
|
||||||
|
|
||||||
Loading…
x
Reference in New Issue
Block a user