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",
|
||||
"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": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-1.1.4.tgz",
|
||||
@ -59,11 +64,6 @@
|
||||
"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": {
|
||||
"version": "4.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.7.tgz",
|
||||
@ -526,9 +526,9 @@
|
||||
}
|
||||
},
|
||||
"@vueuse/metadata": {
|
||||
"version": "8.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.3.1.tgz",
|
||||
"integrity": "sha512-1aZaFL44HzXXkfN6Q7KMDOXBFKTHDClHlOJBxtN8rTBXIIScoGOrJCpxWiQ4kuVg95MzG/pHrd3P4wd8poL9XQ=="
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-8.5.0.tgz",
|
||||
"integrity": "sha512-WxsD+Cd+bn+HcjpY6Dl9FJ8ywTRTT9pTwk3bCQpzEhXVYAyNczKDSahk50fCfIJKeWHhyI4B2+/ZEOxQAkUr0g=="
|
||||
},
|
||||
"@vueuse/shared": {
|
||||
"version": "7.6.2",
|
||||
@ -767,9 +767,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"dayjs": {
|
||||
"version": "1.11.1",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.1.tgz",
|
||||
"integrity": "sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA=="
|
||||
"version": "1.11.2",
|
||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
|
||||
"integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.3.3",
|
||||
@ -805,9 +805,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"element-plus": {
|
||||
"version": "2.1.11",
|
||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.1.11.tgz",
|
||||
"integrity": "sha512-s4X0I8s787tv+9UdekBC1g7v42Fj4bucPAmu03EjbgrGrV7BJvkoBGuK52lNfu4yC76bl6Uyjesd5Fu8CMakSw==",
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.0.tgz",
|
||||
"integrity": "sha512-zxmAFEAa1T/n09rR+NozXcWl5CjaFtqoaxhFSafag0dgc90tgEHitDXfegdFAl4ahugdNTqu9aLzngx3VhDAtA==",
|
||||
"requires": {
|
||||
"@ctrl/tinycolor": "^3.4.1",
|
||||
"@element-plus/icons-vue": "^1.1.4",
|
||||
@ -826,20 +826,25 @@
|
||||
"normalize-wheel-es": "^1.1.2"
|
||||
},
|
||||
"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": {
|
||||
"version": "8.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.3.1.tgz",
|
||||
"integrity": "sha512-WiXUgVyPG9elGx3G8UV8g+zqbEJ2hYacrPICogAxDdW6hnxxcUFdF7FtvDroJ/DxWmo2pg8XNNz07ybfnZyJbw==",
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-8.5.0.tgz",
|
||||
"integrity": "sha512-VEJ6sGNsPlUp0o9BGda2YISvDZbhWJSOJu5zlp2TufRGVrLcYUKr31jyFEOj6RXzG3k/H4aCYeZyjpItfU8glw==",
|
||||
"requires": {
|
||||
"@vueuse/metadata": "8.3.1",
|
||||
"@vueuse/shared": "8.3.1",
|
||||
"@vueuse/metadata": "8.5.0",
|
||||
"@vueuse/shared": "8.5.0",
|
||||
"vue-demi": "*"
|
||||
}
|
||||
},
|
||||
"@vueuse/shared": {
|
||||
"version": "8.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.3.1.tgz",
|
||||
"integrity": "sha512-7HKLCcxp4dtONq6QSSoavblo9riYgqzw7jhqiC0/VUYMXKzqj1G/GznOzTmY8Wi8uKKT197JqjKQ1DKt2j/0+A==",
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-8.5.0.tgz",
|
||||
"integrity": "sha512-qKG+SZb44VvGD4dU5cQ63z4JE2Yk39hQUecR0a9sEdJA01cx+XrxAvFKJfPooxwoiqalAVw/ktWK6xbyc/jS3g==",
|
||||
"requires": {
|
||||
"vue-demi": "*"
|
||||
}
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"build": "vuepress build src -d dist"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons": "0.0.11",
|
||||
"element-plus": "^2.2.0",
|
||||
"highlight.js": "^11.2.0"
|
||||
},
|
||||
|
||||
@ -8,6 +8,27 @@ import DemoBlock from './demo-block.vue';
|
||||
|
||||
export default defineClientAppEnhance(({ app }) => {
|
||||
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);
|
||||
});
|
||||
|
||||
@ -50,27 +50,56 @@ const sidebar = {
|
||||
]
|
||||
}
|
||||
],
|
||||
api: [
|
||||
editorApi: [
|
||||
{
|
||||
text: '编辑器',
|
||||
children: [
|
||||
'/api/editor',
|
||||
'/api/model',
|
||||
'/api/editor/editor',
|
||||
'/api/editor/services',
|
||||
]
|
||||
},
|
||||
],
|
||||
formApi: [
|
||||
{
|
||||
text: '表单',
|
||||
children: [
|
||||
'/api/form',
|
||||
'/api/form/form',
|
||||
]
|
||||
},
|
||||
],
|
||||
formConfig: [
|
||||
{
|
||||
text: '表单配置',
|
||||
children: [
|
||||
'/api/form-config/layout',
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '表单配置协议',
|
||||
text: 'field配置',
|
||||
children: [
|
||||
'/api/base-config',
|
||||
'/api/field-config',
|
||||
'/api/form-config/fields/cascader',
|
||||
'/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参考',
|
||||
link: '/api/editor'
|
||||
children: [
|
||||
{
|
||||
text: '编辑器',
|
||||
link: '/api/editor/editor'
|
||||
},
|
||||
{
|
||||
text: '表单',
|
||||
link: '/api/form/form'
|
||||
},
|
||||
{
|
||||
text: '表单配置',
|
||||
link: '/api/form-config/layout'
|
||||
},
|
||||
],
|
||||
}, {
|
||||
text: '查看源码',
|
||||
link: 'https://github.com/Tencent/tmagic-editor'
|
||||
@ -119,7 +161,9 @@ export default defineUserConfig<DefaultThemeOptions>({
|
||||
'/guide/': sidebar.guide,
|
||||
'/page/': sidebar.page,
|
||||
'/component/': sidebar.component,
|
||||
'/api/': sidebar.api,
|
||||
'/api/editor': sidebar.editorApi,
|
||||
'/api/form': sidebar.formApi,
|
||||
'/api/form-config': sidebar.formConfig,
|
||||
},
|
||||
smoothScroll: false,
|
||||
lastUpdated: false,
|
||||
|
||||
@ -20,21 +20,20 @@
|
||||
<div
|
||||
class="demo-block-control"
|
||||
ref="control"
|
||||
:class="{ 'is-fixed': fixedControl }"
|
||||
@click="isExpanded = !isExpanded"
|
||||
>
|
||||
<transition name="arrow-slide">
|
||||
<i :class="[iconClass, { hovering: hovering }]"></i>
|
||||
<i :class="[iconClass, hovering]"></i>
|
||||
</transition>
|
||||
<transition name="text-slide">
|
||||
<span v-show="hovering">{{ controlText }}</span>
|
||||
<span>{{ controlText }}</span>
|
||||
</transition>
|
||||
<el-tooltip effect="dark" :content="'前往 codepen.io 运行此示例'" placement="right">
|
||||
<transition name="text-slide">
|
||||
<el-button
|
||||
v-show="hovering || isExpanded"
|
||||
size="small"
|
||||
type="text"
|
||||
type="primary"
|
||||
text
|
||||
class="control-button"
|
||||
@click.stop="goCodepen"
|
||||
>
|
||||
@ -187,7 +186,7 @@
|
||||
.control-button {
|
||||
line-height: 26px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
top: 10px;
|
||||
right: 0;
|
||||
font-size: 14px;
|
||||
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