From da3f6ca16753e5e872ea14261dbf5967e16f80cc Mon Sep 17 00:00:00 2001 From: yoyo <15014217605@163.com> Date: Fri, 1 Mar 2024 16:33:24 +0800 Subject: [PATCH] docs(site/popeditor): improve documentation (#1438) --- examples/sites/demos/apis/popeditor.js | 34 +++++++++++-------- .../condition-form-composition-api.vue | 1 - .../demos/pc/app/popeditor/condition-form.vue | 1 - .../app/popeditor/events-composition-api.vue | 10 ++++-- .../sites/demos/pc/app/popeditor/events.vue | 10 ++++-- .../pc/app/popeditor/webdoc/popeditor.js | 18 +++++----- 6 files changed, 45 insertions(+), 29 deletions(-) diff --git a/examples/sites/demos/apis/popeditor.js b/examples/sites/demos/apis/popeditor.js index b84e9831d5..b8b9313435 100644 --- a/examples/sites/demos/apis/popeditor.js +++ b/examples/sites/demos/apis/popeditor.js @@ -96,8 +96,8 @@ export default { }, { name: 'grid-op', - typeAnchorName: 'grid#IGridOp', - type: 'IGridOp', + typeAnchorName: 'grid#API', + type: `InstanceType<typeof TinyGrid>['$props']`, defaultValue: '', desc: { 'zh-CN': '设置弹出面板中表格组件的配置信息', @@ -141,8 +141,8 @@ export default { }, { name: 'pager-op', - typeAnchorName: 'pager#IPagerOp', - type: 'IPagerOp', + typeAnchorName: 'pager#API', + type: `InstanceType<typeof TinyPager>['$props']`, defaultValue: '', desc: { 'zh-CN': '设置分页配置', @@ -165,7 +165,7 @@ export default { { name: 'popseletor', type: 'string', - defaultValue: 'grid', + defaultValue: `'grid'`, desc: { 'zh-CN': '设置弹出面板中可显示的树或者表格组件', 'en-US': 'Set the tree or table components that can be displayed in the pop-up panel.' @@ -198,7 +198,8 @@ export default { }, { name: 'remote-search', - type: '({ page, conditions }) => void', + type: 'IRemoteSearch', + typeAnchorName: 'IRemoteSearch', defaultValue: '', desc: { 'zh-CN': '配置远程搜索', @@ -220,8 +221,8 @@ export default { }, { name: 'selected-box-op', - typeAnchorName: 'ISelectedBoxOp', - type: 'ISelectedBoxOp', + typeAnchorName: 'dialog-select#ISelectedBoxOption', + type: 'ISelectedBoxOption', defaultValue: '', desc: { 'zh-CN': '通过属性 selected-box-op 指定 SelectedBox 组件配置，可以把已选表格显示为已选栏', @@ -301,7 +302,7 @@ export default { { name: 'tabindex', type: 'string', - defaultValue: '1', + defaultValue: `'1'`, desc: { 'zh-CN': '设置通过 Tab 键获焦及获焦顺序（readonly 属性设置为 false 时有效）', 'en-US': @@ -313,7 +314,7 @@ export default { { name: 'text-field', type: 'string', - defaultValue: 'label', + defaultValue: `'label'`, desc: { 'zh-CN': '设置输入框中显示文本的字段，提交数据时，不提交该显示文本', 'en-US': 'Set the text field in the text box. When data is submitted, the text is not submitted.' @@ -324,7 +325,7 @@ export default { { name: 'text-split', type: 'string', - defaultValue: '/', + defaultValue: `'/'`, desc: { 'zh-CN': '在多选的情况下，设置输入框中要显示多个数据时的分隔符', 'en-US': 'Separator for displaying multiple records in the text box when multiple records are selected.' @@ -359,7 +360,7 @@ export default { { name: 'value-field', type: 'string', - defaultValue: 'id', + defaultValue: `'id'`, desc: { 'zh-CN': '设置输入框要提交数据的字段', 'en-US': 'Set the field to which data is to be submitted in the text box.' @@ -370,7 +371,7 @@ export default { { name: 'value-split', type: 'string', - defaultValue: ';', + defaultValue: `';'`, desc: { 'zh-CN': '在多选的情况下，设置输入框要提交多个数据时的分隔符', 'en-US': @@ -395,7 +396,7 @@ export default { events: [ { name: 'change', - type: '(commitValue, selectedDatas) => void', + type: '(commitValue: number, selectedDatas: Object) => void', defaultValue: '', desc: { 'zh-CN': @@ -476,6 +477,11 @@ interface IConditions { label: string } ` + }, + { + name: 'IRemoteSearch', + type: 'type', + code: `type IRemoteSearch = ({ page: { currentPage: number, pageSize: number }, conditions: { [K in IConditions['field']]: string } }) => void` } ] } diff --git a/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue b/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue index 3f6f143350..f64e6043c6 100644 --- a/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue +++ b/examples/sites/demos/pc/app/popeditor/condition-form-composition-api.vue @@ -160,7 +160,6 @@ const rules = ref({ { required: true, message: '必填', trigger: 'blur' }, { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' } ], - datepicker: { type: 'date' }, email: { type: 'email' } }) const ruleFormRef = ref() diff --git a/examples/sites/demos/pc/app/popeditor/condition-form.vue b/examples/sites/demos/pc/app/popeditor/condition-form.vue index cff8a48a7e..1a45c343a2 100644 --- a/examples/sites/demos/pc/app/popeditor/condition-form.vue +++ b/examples/sites/demos/pc/app/popeditor/condition-form.vue @@ -162,7 +162,6 @@ export default { { required: true, message: '必填', trigger: 'blur' }, { min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' } ], - datepicker: { type: 'date' }, email: { type: 'email' } } } diff --git a/examples/sites/demos/pc/app/popeditor/events-composition-api.vue b/examples/sites/demos/pc/app/popeditor/events-composition-api.vue index 4b41f0992a..4eeaa1913c 100644 --- a/examples/sites/demos/pc/app/popeditor/events-composition-api.vue +++ b/examples/sites/demos/pc/app/popeditor/events-composition-api.vue @@ -124,10 +124,16 @@ function handlePageChange(val) { } function handlePopup() { - Modal.message('popup 弹窗打开事件') + Modal.message({ + message: 'popup 弹窗打开事件', + status: 'info' + }) } function handleClose() { - Modal.message('close 弹窗关闭事件') + Modal.message({ + message: 'close 弹窗关闭事件', + status: 'info' + }) } diff --git a/examples/sites/demos/pc/app/popeditor/events.vue b/examples/sites/demos/pc/app/popeditor/events.vue index ef2077a411..af174e9e57 100644 --- a/examples/sites/demos/pc/app/popeditor/events.vue +++ b/examples/sites/demos/pc/app/popeditor/events.vue @@ -130,10 +130,16 @@ export default { this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize) }, handlePopup() { - Modal.message('popup 弹窗打开事件') + Modal.message({ + message: 'popup 弹窗打开事件', + status: 'info' + }) }, handleClose() { - Modal.message('close 弹窗关闭事件') + Modal.message({ + message: 'close 弹窗关闭事件', + status: 'info' + }) } } } diff --git a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js index 2db0011d03..b0c5942d68 100644 --- a/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js +++ b/examples/sites/demos/pc/app/popeditor/webdoc/popeditor.js @@ -31,7 +31,7 @@ export default { { demoId: 'condition-layout', name: { - 'zh-CN': '布局与配置', + 'zh-CN': '布局', 'en-US': 'Layout and Configuration' }, desc: { @@ -115,7 +115,7 @@ export default { 'zh-CN': '

grid-op 当 popseletor 为 grid 时生效，目前支持配置 columns 表格列 和 data 数据源，详细配置项参考 Grid 表格组件，需同时配置 textField、valueField 字段。

', 'en-US': - '

gridOp: This parameter is valid only when popseletor is set to grid. Currently, columns and data data sources can be configured. For details about the configuration items, see the Grid table component. The textField and valueField fields must be configured at the same time.

' + '

grid-op: This parameter is valid only when popseletor is set to grid. Currently, columns and data data sources can be configured. For details about the configuration items, see the Grid table component. The textField and valueField fields must be configured at the same time.

' }, codeFiles: ['grid.vue'] }, @@ -206,7 +206,7 @@ export default { 'en-US': 'Reset' }, desc: { - 'zh-CN': '

通过 readonly 属性设置为是否只读。

', + 'zh-CN': '

通过 readonly 属性设置为是否禁用。

', 'en-US': '

Use the before-reset attribute to set the hook function before reset.

' }, codeFiles: ['readonly.vue'] @@ -309,7 +309,7 @@ export default { desc: { 'zh-CN': '

通过 value-field 属性设置组件提交给后台的字段。

', 'en-US': - 'The

showPager attribute is valid only when popseletor is set to grid. The default value is false. Pagination is not enabled. If this parameter is set to true, you need to configure the pagerOp attribute. In addition, you need to listen to the page-change event to change the data data source

\n of the gridOp' + 'The

showPager attribute is valid only when popseletor is set to grid. The default value is false. Pagination is not enabled. If this parameter is set to true, you need to configure the pager-op attribute. In addition, you need to listen to the page-change event to change the data data source

\n of the grid-op' }, codeFiles: ['title.vue'] }, @@ -348,7 +348,7 @@ export default { }, desc: { 'zh-CN': - '

showPager 属性只有当 popseletor 为 grid 时才能生效，默认值为 false 不启用分页，配置为 true 后还需配置 pagerOp 属性；并且需要监听 page-change 事件改变 gridOp 的 data 数据源。

', + '

showPager 属性只有当 popseletor 为 grid 时才能生效，默认值为 false 不启用分页，配置为 true 后还需配置 pager-op 属性；并且需要监听 page-change 事件改变 grid-op 的 data 数据源。

', 'en-US': '

Enable the tree mode through the popseletor attribute. Then the tree-op attribute is the op configuration mode of the Tree component.

' }, @@ -376,7 +376,7 @@ export default { }, desc: { 'zh-CN': - '

通过 popseletor 属性开启树模式，然后 tree-op 属性是 Tree 组件的 op 配置方式。

', + '

通过 popseletor 属性开启树模式，然后 tree-op 属性是 Tree 组件的 op配置方式。

', 'en-US': '

Configure the showOverflow attribute on the data column to set the display and hiding of the data when the data exceeds the column width. Values can be of type boolean or string, with three values to choose from, as shown below. By default, all content is displayed in a new line.

\n

optional value description

\n

tooltip: The extra part is displayed...., and all information is displayed on the left or right. \ntitle: The value is the same as the title attribute of the native tag. \nellipsis: \'...\' is displayed, and no message is displayed. \ntrue: If the value is true, the effect is the same as that of the tooltip.

\n
' }, @@ -390,7 +390,7 @@ export default { }, desc: { 'zh-CN': - '

通过 popseletor 属性开启树模式，然后 tree-op 属性是 Tree 组件的 op 配置方式。

', + '

通过 popseletor 属性开启树模式，然后 tree-op 属性是 Tree 组件的 op配置方式。

', 'en-US': '

When a single option is selected, you can only click the option button to select it by default. You can also set trigger to row to select any position in the row. Alternatively, set trigger to cell and click any position in the Operation column to select it.

' }, @@ -418,7 +418,7 @@ export default { }, desc: { 'zh-CN': - "\n

在数据的列上配置 showOverflow 属性用于设置数据超出列宽时的显示和隐藏。值的类型可以为 boolean 和 string，有三个值可以选择，如下所示。默认为换行显示全部内容。

\n
\n

可选值说明

\n

'tooltip'：内容超出部分显示 ...，左侧/右侧弹出提示层显示全部信息。\n

'title'：和原生标签的 title 属性一致。

\n

'ellipsis'：内容超出部分显示 ...，没有提示。

\n

boolean：为 true 时，效果和 'tooltip' 一致。

\n
\n ", + "

在数据列上配置 showOverflow 属性用于设置数据超出列宽时的显示和隐藏。值的类型可以为 boolean 和 string，有三个值可以选择，如下所示。默认为换行显示全部内容。

\n
\n

可选值说明

\n

'tooltip'：内容超出部分显示 ...，左侧/右侧弹出提示层显示全部信息。\n

'title'：和原生标签的 title 属性一致。

\n

'ellipsis'：内容超出部分显示 ...，没有提示。

\n

boolean：为 true 时，效果和 'tooltip' 一致。

\n
\n ", 'en-US': '

Configure the auto-lookup to false, set initialization to not request data, or call this $ref.popuptor.handleSearch() Proactively calls the request method

' }, @@ -441,7 +441,7 @@ export default { { demoId: 'show-history', name: { - 'zh-CN': '设置历史记录标签页', + 'zh-CN': '历史记录标签页', 'en-US': '' }, desc: {