popup-more 属性，可使文本域超出显示更多按钮，点击更多按钮可以查看详细信息。',
+ 'en-US':
+ 'The popup-more attribute is added to enable the text field to exceed the display of more buttons. You can click more buttons to view details.'
+ },
+ mode: ['pc', 'mobile-first'],
+ pcDemo: 'display-only-popup-more',
+ mfDemo: 'display-only-popup-more'
}
],
events: [
diff --git a/examples/sites/demos/apis/popover.js b/examples/sites/demos/apis/popover.js
index 5bb73e44d..1a77b73df 100644
--- a/examples/sites/demos/apis/popover.js
+++ b/examples/sites/demos/apis/popover.js
@@ -376,6 +376,8 @@ interface IPopperOption {
removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
updateHiddenPopperOnScroll: boolean // 滚动过程中是否更新隐藏的弹出层位置
boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+ ignoreBoundaries: boolean // 忽略边界判断，弹出的位置始终是设置的 placement 值
+ scrollParent: HTMLElement // 指定滚动的父节点，优化级最高。 默认为null
}
`
},
diff --git a/examples/sites/demos/apis/select.js b/examples/sites/demos/apis/select.js
index 74fbc5d9e..e206acd28 100644
--- a/examples/sites/demos/apis/select.js
+++ b/examples/sites/demos/apis/select.js
@@ -18,6 +18,19 @@ export default {
pcDemo: 'all-text',
mfDemo: 'all-text'
},
+ {
+ name: 'show-all-text-tag',
+ type: 'boolean',
+ defaultValue: 'false',
+ desc: {
+ 'zh-CN':
+ '指定多选模式全选后，在输入框中，是否只显示 all-text 指定的Tag。 默认值为 false，所有选项循环显示在输入框。',
+ 'en-US':
+ 'Specifies whether only the tag specified by all-text is displayed in the text box after the multi-select mode is specified. The default value is false. All options are displayed in the text box cyclically.'
+ },
+ mode: ['pc'],
+ pcDemo: 'all-text'
+ },
{
name: 'allow-copy',
type: 'boolean',
@@ -625,12 +638,25 @@ export default {
defaultValue: 'false',
desc: {
'zh-CN':
- '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于show-proportion 属性，同时设置只',
+ '是否展示多选框开启多选限制选择数量时，选中条数和限制总条数的占比的文字提示。 该属性的优先级大于show-proportion 属性。',
'en-US':
'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
},
mode: ['pc'],
pcDemo: 'multiple'
+ },
+ {
+ name: 'init-label',
+ type: 'string',
+ defaultValue: '',
+ desc: {
+ 'zh-CN':
+ '通过 init-label 属性设置远程搜索或者嵌套树懒加载数据未获取到时显示的初始化 label 值。',
+ 'en-US':
+ 'Use the init-label attribute to set the initial label value displayed when remote search or nested sloth loading data is not obtained.'
+ },
+ mode: ['pc'],
+ pcDemo: 'init-label'
}
],
events: [
diff --git a/examples/sites/demos/apis/split.js b/examples/sites/demos/apis/split.js
index e794208b8..cee3d0f4b 100644
--- a/examples/sites/demos/apis/split.js
+++ b/examples/sites/demos/apis/split.js
@@ -87,7 +87,28 @@ export default {
pcDemo: 'split-threshold'
},
{
- mode: []
+ name: 'border',
+ type: 'boolean',
+ defaultValue: 'true',
+ desc: {
+ 'zh-CN': '是否显示边框',
+ 'en-US': 'Indicates whether to display the border.'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'right-bottom-value',
+ type: 'boolean',
+ defaultValue: 'false',
+ desc: {
+ 'zh-CN':
+ '默认情况下，v-model的值为左/上面板的位置。 当设置right-bottom-value 为true时，指明 v-model的值为 右/下面板的位置。 ',
+ 'en-US':
+ 'By default, the value of v-model is the position of the left/top panel. When right-bottom-value is set to true, the value of v-model is the position of the right/lower panel.'
+ },
+ mode: ['pc'],
+ pcDemo: ''
}
],
events: [
diff --git a/examples/sites/demos/apis/time-line.js b/examples/sites/demos/apis/time-line.js
index 4ca503c75..2f4678f6d 100644
--- a/examples/sites/demos/apis/time-line.js
+++ b/examples/sites/demos/apis/time-line.js
@@ -146,8 +146,9 @@ export default {
type: 'boolean',
defaultValue: 'false',
desc: {
- 'zh-CN': '是否显示底部分割线，适用于横向时间线',
- 'en-US': 'Whether to display the bottom separator line of horizontal timeline'
+ 'zh-CN': '是否显示底部指标三角，适用于横向时间线',
+ 'en-US':
+ 'Indicates whether to display the bottom indicator triangle, which is applicable to the horizontal timeline.'
},
mode: ['pc'],
pcDemo: 'show-divider'
diff --git a/examples/sites/demos/apis/tooltip.js b/examples/sites/demos/apis/tooltip.js
index cfc468109..26f411085 100644
--- a/examples/sites/demos/apis/tooltip.js
+++ b/examples/sites/demos/apis/tooltip.js
@@ -321,6 +321,8 @@ interface IPopperOption {
removeOnDestroy: boolean // 弹出层消失后，是否移除弹出层的DOM元素，布尔false
updateHiddenPopperOnScroll: boolean // 滚动过程中是否更新隐藏的弹出层位置
boundariesElement: 'viewport' | 'body' | HTMLElement // 滚动过程中,弹出层的碰撞边界。 默认值为： 'viewport'
+ ignoreBoundaries: boolean // 忽略边界判断，弹出的位置始终是设置的 placement 值
+ scrollParent: HTMLElement // 指定滚动的父节点，优化级最高。 默认为null
}
`
},
diff --git a/examples/sites/demos/apis/tree.js b/examples/sites/demos/apis/tree.js
index d31e9d1cd..4fd2f2e74 100644
--- a/examples/sites/demos/apis/tree.js
+++ b/examples/sites/demos/apis/tree.js
@@ -478,6 +478,19 @@ export default {
},
mode: ['pc'],
pcDemo: 'filter-view'
+ },
+ {
+ name: 'edit-config',
+ typeAnchorName: 'ITreeEditConfig',
+ type: 'ITreeEditConfig',
+ defaultValue: '{}',
+ desc: {
+ 'zh-CN': '用于编辑模式下参数配置,指示新增节点的 id ,是否显示 id 重复的警告等',
+ 'en-US':
+ 'Used for parameter configuration in editing mode, indicating the ID of a new node and whether to display a warning indicating duplicate IDs.'
+ },
+ mode: ['pc'],
+ pcDemo: 'edit'
}
],
events: [
@@ -1193,5 +1206,19 @@ export default {
}
]
}
+ ],
+ types: [
+ {
+ name: 'ITreeEditConfig',
+ type: 'type',
+ code: `
+interface ITreeEditConfig{
+ // 生成新节点的id
+ initNodeIdMethod: (node) => string;
+ // 新节点id与其它id重复时，是否在控制台显示告警。
+ noWarning: boolean;
+}
+ `
+ }
]
}
diff --git a/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue b/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue
new file mode 100644
index 000000000..f61a96c40
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/about-clear.vue
@@ -0,0 +1,25 @@
+
+ 默认可清除
+不可清除：
+日期值：{{ value }}
+{{ value }}
+日期组件
+日期范围选择组件
+日期值：{{ value }}
+设置 `type` 属性默认值为 `date`，以日期的形式进行选择。
', + 'en-US': 'button type
' + }, + codeFiles: ['basic-usage.vue'] + }, + { + demoId: 'datetime', + name: { + 'zh-CN': '选择日期时间', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '设置 `type` 属性为 `datetime`，以日期时间的形式进行选择。
', + 'en-US': '
bbutton click
' + }, + codeFiles: ['datetime.vue'] + }, + { + demoId: 'date-range', + name: { + 'zh-CN': '选择日期范围', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '设置 `type` 属性为 `daterange`，以日期范围的形式进行选择。
', + 'en-US': '
bbutton click
' + }, + codeFiles: ['date-range.vue'] + }, + { + demoId: 'datetime-range', + name: { + 'zh-CN': '选择日期时间范围', + 'en-US': 'events' + }, + desc: { + 'zh-CN': '设置 `type` 属性为 `datetimerange`，以日期时间范围的形式进行选择。
', + 'en-US': '
bbutton click
' + }, + codeFiles: ['datetime-range.vue'] + }, + { + demoId: 'year', + name: { + 'zh-CN': '年份选择', + 'en-US': 'Year and month selector' + }, + desc: { + 'zh-CN': + '设置 `type` 属性为 `year`，进行年份单选；设置 `type` 属性为 `years`，进行年份多选；设置 `type` 属性为 `yearrange`，进行年份范围选择。
', + 'en-US': '
Set the `type` attribute to `year-month` to select a year-month selector.
' + }, + codeFiles: ['year.vue'] + }, + { + demoId: 'placeholder', + name: { + 'zh-CN': '占位符', + 'en-US': 'Year Month Range Selector' + }, + desc: { + 'zh-CN': + '单选可通过 `placeholder` 设置占位符。范围选择时，`start-placeholder` 和 `end-placeholder` 属性可分别指定开始日期和结束日期输入框的占位符。`range-separator` 属性指定开始日期和结束日期输入框之间的分隔符。
', + 'en-US': + '
Single choice: You can use `placeholder` to set a placeholder. When a range is selected, the `start-placeholder` and `end-placeholder` attributes specify placeholders for the start and end date input boxes, respectively. The `range-separator` property specifies the separator between the start date and end date input boxes.
' + }, + codeFiles: ['placeholder.vue'] + }, + { + demoId: 'disabled', + name: { + 'zh-CN': '禁用', + 'en-US': 'Disabled' + }, + desc: { + 'zh-CN': '
配置 `disabled` 属性设置时间选择器禁用。
', + 'en-US': '
Configure the `disabled` property to disable the time selector.
' + }, + codeFiles: ['disabled.vue'] + }, + { + demoId: 'step', + name: { + 'zh-CN': '步长', + 'en-US': 'Year Month Range Selector Limit Range' + }, + desc: { + 'zh-CN': '
通过 `step` 设置时间选择的步长，默认值为 `{ hour: 1, minute: 1, second: 1 }`。
', + 'en-US': + '
Use `step` to set the time selection step. The default value is `{hour: 1, minute: 1, second: 1}`.
' + }, + codeFiles: ['step.vue'] + }, + { + demoId: 'about-clear', + name: { + 'zh-CN': '清除输入', + 'en-US': 'Clear input' + }, + desc: { + 'zh-CN': + '
选择日期后，鼠标悬停在输入框时，默认会显示清除图标，单击图标可以清除输入框内容。设置 `clearable` 属性为 `false` 后，则不显示清除图标，不可清除。
', + 'en-US': + '
After you select a date, the clear icon is displayed by default when you hover the cursor over the text box. You can click the icon to clear the text box. After the `clearable` attribute is set to `false`, the clear icon is not displayed and cannot be cleared.
'
+ },
+ codeFiles: ['about-clear.vue']
+ }
+ ]
+}
diff --git a/examples/sites/demos/mobile-first/app/date-picker/year.vue b/examples/sites/demos/mobile-first/app/date-picker/year.vue
new file mode 100644
index 000000000..f2136f8cf
--- /dev/null
+++ b/examples/sites/demos/mobile-first/app/date-picker/year.vue
@@ -0,0 +1,63 @@
+
+ resize autosize hover-expand
+ 年份单选：
+
+
+ 年份多选：
+
+
+
+ 年份范围选择：
+
+
+ 年份禁用：
+
+
-
@@ -25,14 +51,19 @@ export default {
},
data() {
return {
- input: ''
+ input: '',
+ textarea: '',
+ hoverText: '',
+ displayOnlyText: 'value 的内容'
}
}
}
-
diff --git a/examples/sites/demos/mobile-first/app/input/webdoc/input.js b/examples/sites/demos/mobile-first/app/input/webdoc/input.js
index 9ba46d3a5..97bac0f1c 100644
--- a/examples/sites/demos/mobile-first/app/input/webdoc/input.js
+++ b/examples/sites/demos/mobile-first/app/input/webdoc/input.js
@@ -133,8 +133,14 @@ export default {
},
desc: {
'zh-CN':
- '
-
-
-
-
-
-
-
-
可通过 `resize` 属性设置文本域的缩放。可选值：`none / both / horizontal / vertical`。注意：只在 `type="textarea"` 时有效。
', - 'en-US': '
bbutton click
' + '可通过 resize 属性设置文本域的缩放。可选值：none / both / horizontal / vertical。注意：只在 type="textarea" 时有效。
可通过 autosize 属性设置文本域自适应内容高度。可传入对象，如{ minRows: 2, maxRows: 6 }。
可通过 hover-expand 属性设置文本域鼠标悬浮展开/收起，只对 type=textarea 有效，最好搭配 autosize 一起使用
', + + 'en-US': + '
You can use the resize property to set the scaling of the text field. The value can be none / both / horizontal / vertical. Note: This parameter is valid only when type="textarea".
The autosize property allows you to set the text field to adapt to the content height. You can transfer an object, for example, {minRows: 2, maxRows: 6}.
You can use the hover-expand attribute to set the text field to be expanded or collapsed by hovering the mouse. This parameter is valid only for type=textarea. It is recommended that you use it together with autosize
通过 disabled 设置按钮组是否禁用，数据项设置 disabled 属性可以禁用单个按钮。
通过 disabled 设置按钮组是否禁用，数据项设置 disabled 属性可以禁用单个按钮，数据项设置 tip 属性(v3.17.0版本增加此功能)增加按钮悬浮提示功能。
By setting whether the button group is disabled through disabled , and setting the disabled property of the data item, individual buttons can be disabled.
You can set whether to disable the button group through disabled. You can set the disabled attribute to disable a single button. You can set the tip attribute to add the reason for disabling the button.
simple
+check-mode="simple" 的示例
+badge
+check-mode="badge" 的示例
+simple
+check-mode="simple" 的示例
+badge
+check-mode="badge" 的示例
+
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
@@ -48,4 +48,7 @@ const options = ref([
background: #f5f5f5;
padding: 16px;
}
+.my-card {
+ background-color: rgba(0, 0, 0, 0.3);
+}
diff --git a/examples/sites/demos/pc/app/card/custom-class.vue b/examples/sites/demos/pc/app/card/custom-class.vue
index ce12e8b75..4af349ba8 100644
--- a/examples/sites/demos/pc/app/card/custom-class.vue
+++ b/examples/sites/demos/pc/app/card/custom-class.vue
@@ -1,6 +1,6 @@
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
@@ -56,4 +56,7 @@ export default {
background: #f5f5f5;
padding: 16px;
}
+.my-card {
+ background-color: rgba(0, 0, 0, 0.3);
+}
diff --git a/examples/sites/demos/pc/app/card/webdoc/card.js b/examples/sites/demos/pc/app/card/webdoc/card.js
index 88001a83a..cd48301ed 100644
--- a/examples/sites/demos/pc/app/card/webdoc/card.js
+++ b/examples/sites/demos/pc/app/card/webdoc/card.js
@@ -83,12 +83,40 @@ export default {
},
desc: {
'zh-CN':
- ' 通过属性 通过属性 Use the 通过属性 Use the 通过属性 Use the 通过配置 After the After the {{ visible }} 通过 通过 可以通过该拦截方法传入的参数获取关闭的操作类型 通过 可以通过该拦截方法传入的参数获取关闭的操作类型 The The parameter passed through this interception method can be used to obtain the type of closing operation 打开抽屉事件。 关闭抽屉事件，抽屉关闭时触发。 确认事件，点击确认按钮时触发，设置 通过设置 通过设置 You can set the You can set the You can set the 设置表格属性 You need to configure
+ 自定义列组件只用来对表格列组件 在调用 Add the class name to the cell of the table header through the column attribute 动态的切换多级表头中子表头的显示与隐藏。 表格属性 Table property 表格属性 Table property 通过 配置 分组表场景适配了表格的行列虚拟滚动。 3.17版本新增：配置 The 通过表格属性 Configure the toolbar slots 输入框
文本域
+
+
+
+ 可通过 可通过 可通过 可通过 可通过 ',
'en-US':
- '\n You can use the You can use the You can use the The You can use the 输入框的事件，包括\n Event of the text box, including:\n
- check-type="checkbox"设置卡片多选,通过属性check-type="radio"设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选check-type="checkbox"设置卡片多选，通过属性check-type="radio"设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选check-type="checkbox" attribute to set multiple card selections, and use the check-type="radio" attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.check-mode配置卡片的选中效果，搭配属性check-type="checkbox"设置卡片多选，通过属性check-type="radio"设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选check-mode configuring the Selection Effect of a Card, and use the check-type="checkbox" attribute to set multiple card selections, and use the check-type="radio" attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.check-mode配置卡片的选中效果，搭配属性check-type="checkbox"设置卡片多选，通过属性check-type="radio"设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选check-mode configuring the Selection Effect of a Card, and use the check-type="checkbox" attribute to set multiple card selections, and use the check-type="radio" attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.{{ item }}
+ {{ item }}
+ type 属性为card后，走马灯将以卡片形式进行展示。type attribute is set to card, the lantern is displayed as a card. type attribute is set to card, the carousel is displayed as a card. swipeable 属性,让多端模板支持触屏轮播。
+ 通过 lite 属性打开精简模式，不显示切换按钮和指示器。
+ `,
+ 'en-US': `
+ The swipeable attribute is used to support touchscreen carousel.
+ Enable the compact mode with the lite attribute. The toggle button and indicator are not displayed.
+ `
+ },
+ codeFiles: ['swipeable.vue']
+ },
{
demoId: 'card-show',
name: {
diff --git a/examples/sites/demos/pc/app/collapse/accordion.vue b/examples/sites/demos/pc/app/collapse/accordion.vue
index 1f4f8eca9..847fb5a81 100644
--- a/examples/sites/demos/pc/app/collapse/accordion.vue
+++ b/examples/sites/demos/pc/app/collapse/accordion.vue
@@ -21,7 +21,7 @@
diff --git a/examples/sites/demos/pc/app/collapse/icon-composition-api.vue b/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
index ea73b4c51..d90587ba8 100644
--- a/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
+++ b/examples/sites/demos/pc/app/collapse/icon-composition-api.vue
@@ -7,7 +7,7 @@
与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/drawer/open-event-composition-api.vue b/examples/sites/demos/pc/app/drawer/open-event-composition-api.vue
deleted file mode 100644
index f1d5c4148..000000000
--- a/examples/sites/demos/pc/app/drawer/open-event-composition-api.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
+ 内容区域
+
+
-
-
-
-
diff --git a/examples/sites/demos/pc/app/drawer/open-event.spec.ts b/examples/sites/demos/pc/app/drawer/open-event.spec.ts
deleted file mode 100644
index 6ae973472..000000000
--- a/examples/sites/demos/pc/app/drawer/open-event.spec.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('打开事件', async ({ page }) => {
- page.on('pageerror', (exception) => expect(exception).toBeNull())
- await page.goto('drawer#open-event')
-
- const message = page.locator('.tiny-modal.type__message').filter({ hasText: '打开事件' }).first()
-
- await page.getByRole('button', { name: '打开事件示例' }).click()
- await expect(message).toBeVisible()
-})
diff --git a/examples/sites/demos/pc/app/drawer/open-event.vue b/examples/sites/demos/pc/app/drawer/open-event.vue
deleted file mode 100644
index 779ffc30c..000000000
--- a/examples/sites/demos/pc/app/drawer/open-event.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-
-
-
-
-
- 内容区域
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue b/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
new file mode 100644
index 000000000..27d42c270
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/use-through-method-composition-api.vue
@@ -0,0 +1,53 @@
+
+
-
-
-
- 内容区域
-
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method.spec.ts b/examples/sites/demos/pc/app/drawer/use-through-method.spec.ts
new file mode 100644
index 000000000..170e7b13b
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/use-through-method.spec.ts
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('通过方法调用', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('drawer#use-through-method')
+
+ const drawer = page.locator('.tiny-drawer__main')
+ await page.getByRole('button', { name: '点击打开抽屉' }).click()
+ await expect(drawer).toBeVisible()
+ await expect(drawer.locator('.tiny-drawer__header')).toHaveText('这是一个通过方法打开的抽屉')
+ await expect(drawer.locator('.tiny-drawer__body')).toHaveText('抽屉主体内容。')
+ await drawer.getByRole('button', { name: '点击关闭' }).click()
+ await expect(page.locator('.tiny-drawer__main')).not.toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/drawer/use-through-method.vue b/examples/sites/demos/pc/app/drawer/use-through-method.vue
new file mode 100644
index 000000000..726e197ec
--- /dev/null
+++ b/examples/sites/demos/pc/app/drawer/use-through-method.vue
@@ -0,0 +1,60 @@
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
index 6c2247975..74951bfa2 100644
--- a/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
+++ b/examples/sites/demos/pc/app/drawer/webdoc/drawer.js
@@ -14,6 +14,16 @@ export default {
},
codeFiles: ['basic-usage.vue']
},
+ {
+ demoId: 'use-through-method',
+ name: { 'zh-CN': '通过方法调用', 'en-US': 'Use through method' },
+ desc: {
+ 'zh-CN':
+ 'Drawer.service 方法可配置并打开抽屉，方法返回组件实例，可调用其 close 方法关闭组件。before-close 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 false 值，则拦截弹窗关闭；否则不拦截。type 弹窗有以下关闭类型：\n
\n ',
+ 'zh-CN': `before-close 属性可以配置一个拦截弹窗关闭的方法。如果方法返回 false 值，则拦截弹窗关闭；否则不拦截。type 弹窗有以下关闭类型：
+
`,
'en-US':
'before-close attribute can be used to configure a method that intercepts closing of the pop-up window. If the method returns a value of false, then the pop-up window is prevented from closing; otherwise it is not intercepted.type for the pop-up window. The following are the types of closing operations:\n
\n '
},
@@ -187,41 +203,25 @@ export default {
codeFiles: ['footer-slot.vue']
},
{
- demoId: 'open-event',
+ demoId: 'events',
name: {
- 'zh-CN': '打开事件',
+ 'zh-CN': '事件',
'en-US': ''
},
desc: {
- 'zh-CN': 'open：当抽屉打开时触发；confirm：当抽屉底部确定按钮点击时触发，该按钮仅当设置 show-footer 属性为 true 时可见；close：当抽屉关闭时触发。关闭抽屉的途径有：
+
`,
'en-US': ''
},
- codeFiles: ['open-event.vue']
- },
- {
- demoId: 'close-event',
- name: {
- 'zh-CN': '关闭事件',
- 'en-US': ''
- },
- desc: {
- 'zh-CN': 'mask-closable 属性为 true 时有效；show-footer 属性为 true 时可见；close 方法触发。:show-footer="true" 且不使用底部插槽 footer 时有效。
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.spec.js b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.spec.js
new file mode 100644
index 000000000..ba6ca1fe4
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.spec.js
@@ -0,0 +1,14 @@
+import { test, expect } from '@playwright/test'
+
+test('动态修改列插槽', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('grid-dynamically-columns#dynamic-slot')
+ await expect(page.getByRole('cell', { name: 'header-1' })).toBeVisible()
+ await expect(page.getByRole('cell', { name: 'col-1' }).first()).toBeVisible()
+ await page.getByRole('button', { name: '改变列插槽' }).click()
+ await expect(page.getByRole('cell', { name: 'header-2' })).toBeVisible()
+ await expect(page.getByRole('cell', { name: 'col-2' }).first()).toBeVisible()
+ await page.getByRole('button', { name: '改变列插槽' }).click()
+ await expect(page.getByRole('cell', { name: 'header-3' })).toBeVisible()
+ await expect(page.getByRole('cell', { name: 'col-3' }).first()).toBeVisible()
+})
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue
new file mode 100644
index 000000000..961eea271
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/dynamic-slot.vue
@@ -0,0 +1,97 @@
+
+ {{ col.header.value }}
+
+
+ {{ col.default.value }}
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue
new file mode 100644
index 000000000..45972fc93
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns-composition-api.vue
@@ -0,0 +1,58 @@
+
+ {{ col.header.value }}
+
+
+ {{ col.default.value }}
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.spec.js b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.spec.js
new file mode 100644
index 000000000..f376438ae
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.spec.js
@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/test'
+
+test('表格反转测试', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('grid-dynamically-columns#dynamically-columns-reverse-columns')
+
+ const firstHeader = page.locator(
+ '#dynamically-columns-reverse-columns .tiny-grid-header__column .tiny-grid-cell-text'
+ )
+ const firstCell = page.locator('#dynamically-columns-reverse-columns .tiny-grid-body__column .tiny-grid-cell')
+ await expect(firstHeader.first()).toHaveText(/公司简介/)
+ await expect(firstCell.first()).toHaveText(/公司技术和研发实力雄厚/)
+ await page.getByRole('button', { name: '反转列顺序' }).click()
+ await expect(firstHeader.first()).toHaveText(/地址/)
+ await expect(firstCell.first()).toHaveText(/福州/)
+})
diff --git a/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue
new file mode 100644
index 000000000..e518924dd
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/dynamically-columns/reverse-columns.vue
@@ -0,0 +1,68 @@
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue b/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
index cfbfad41d..7f29f72a7 100644
--- a/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/edit/status-of-editing-composition-api.vue
@@ -1,7 +1,15 @@
开启编辑状态：
-
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue b/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
new file mode 100644
index 000000000..f5d1ca64f
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching-composition-api.vue
@@ -0,0 +1,105 @@
+
+
+
+ 前端过滤示例
+
+
+
+
+ 后端过滤示例
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching.spec.js b/examples/sites/demos/pc/app/grid/header/many-header-switching.spec.js
new file mode 100644
index 000000000..e3d5c8321
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching.spec.js
@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/test'
+
+test('控制隐藏表头', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('grid-header#many-header-switching')
+ await expect(page.locator('.tiny-grid-header__column')).toHaveCount(8)
+ await page.getByRole('button', { name: '新增子表头' }).click()
+ await expect(page.locator('.tiny-grid-header__column')).toHaveCount(10)
+ await page.getByRole('button', { name: '删除子表头' }).click()
+ await expect(page.locator('.tiny-grid-header__column')).toHaveCount(8)
+})
diff --git a/examples/sites/demos/pc/app/grid/header/many-header-switching.vue b/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
new file mode 100644
index 000000000..aa9d315e6
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/header/many-header-switching.vue
@@ -0,0 +1,115 @@
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/operation-column/selection-config.spec.js b/examples/sites/demos/pc/app/grid/operation-column/selection-config.spec.js
index f0b3623a3..efa8d52e9 100644
--- a/examples/sites/demos/pc/app/grid/operation-column/selection-config.spec.js
+++ b/examples/sites/demos/pc/app/grid/operation-column/selection-config.spec.js
@@ -3,7 +3,18 @@ import { test, expect } from '@playwright/test'
test('多选配置项', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('grid-operation-column#operation-column-selection-config')
- await expect(page.locator('.tiny-grid-body__row').nth(0).locator('input')).toBeChecked()
- await expect(page.locator('.tiny-grid-body__row').nth(1).locator('input')).toBeDisabled()
- await expect(page.locator('.tiny-grid-body__row').nth(3).locator('input')).toBeDisabled()
+ const demo = page.locator('#operation-column-selection-config')
+ await expect(demo.locator('.tiny-grid-body__row').nth(0).locator('input')).toBeChecked()
+ await expect(demo.locator('.tiny-grid-body__row').nth(1).locator('input')).toBeDisabled()
+ await expect(demo.locator('.tiny-grid-body__row').nth(3).locator('input')).toBeDisabled()
+ await demo.locator('.tiny-grid-header__row').locator('.tiny-grid-checkbox').first().click()
+ await expect(demo.locator('.tiny-grid-body__row').nth(0).locator('input')).toBeChecked()
+ await expect(demo.locator('.tiny-grid-body__row').nth(2).locator('input')).toBeChecked()
+ await expect(demo.locator('.tiny-grid-body__row').nth(4).locator('input')).toBeChecked()
+ await expect(demo.locator('.tiny-grid-body__row').nth(6).locator('input')).toBeChecked()
+ await demo.locator('.tiny-grid-header__row').locator('.tiny-grid-checkbox').first().click()
+ await expect(demo.locator('.tiny-grid-body__row').nth(0).locator('input')).not.toBeChecked()
+ await expect(demo.locator('.tiny-grid-body__row').nth(2).locator('input')).not.toBeChecked()
+ await expect(demo.locator('.tiny-grid-body__row').nth(4).locator('input')).not.toBeChecked()
+ await expect(demo.locator('.tiny-grid-body__row').nth(6).locator('input')).not.toBeChecked()
})
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue
index 8ee4389a8..1118bdb55 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-group-render-composition-api.vue
@@ -1,5 +1,12 @@
-
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.spec.js b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.spec.js
new file mode 100644
index 000000000..5e99a20d3
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.spec.js
@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test'
+
+test('分组表格虚拟滚动', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('grid-row-grouping#row-grouping-colspan')
+ const row = page.locator('.tiny-grid-body__row')
+ await expect(row.nth(0).locator('.tiny-grid-body__column').nth(2)).toHaveAttribute('colspan', '2')
+})
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue
new file mode 100644
index 000000000..bda7d4d45
--- /dev/null
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-colspan.vue
@@ -0,0 +1,146 @@
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
index 9ccfc5aef..08a8cf056 100644
--- a/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
+++ b/examples/sites/demos/pc/app/grid/row-grouping/row-grouping-composition-api.vue
@@ -1,6 +1,6 @@
- drop-config 的 row 属性控制行拖拽，默认为开启行拖拽，行拖拽事件有 @row-drop-start、row-drop-move、row-drop-end。drop-config 的 row 属性控制行拖拽，默认为开启行拖拽，行拖拽事件有 @row-drop-start、row-drop-move、row-drop-end。可以通过设置 dropConfig.rowHandle 为 'index' 开启序号列作为拖拽区域，不影响行字段的复制。row attribute of drop-config to control row dragging. By default, row dragging is enabled. Row drag events include @row-drop-start, row-drop-move, and row-drop-end. row attribute of drop-config to control row dragging. By default, row dragging is enabled. Row drag events include @row-drop-start, row-drop-move, and row-drop-end. column attribute of drop-config to control column dragging. Column dragging is enabled by default. Column drag events include @column-drop-start, column-drop-move, and column-drop-end. columnKey 和 dropConfig。在设置 dropConfig.scheme 为 v2 且设置 dropConfig.column 为 true 时，开启多表头列拖拽。
+ 其它属性 dropConfig.columnGroup，dropConfig.columnBeforeDrop 和 dropConfig.columnDropClass，参考示例配置：:columns="tableColumn" :show-header="false" on the grid tag. Click the 'Reverse Table' button to view the effect. Currently, the operation can only be performed once. If the operation is performed multiple times, problems may occur. For details, see the following example. grid-column 进行二次封装，不要包含额外的视图渲染逻辑，非列收集内容会被忽略。
+ 自定义列组件必须具有 name 选项属性，可以通过表格属性 custom-column-names 把自定义的 name 配置给表格，在表格 初始化列配置 过程中会使用他们来判断是否继续向下渲染。
+ 表格属性 custom-column-names 可以是字符串或字符串数组，默认值为 TinyGridColumn。
+ handleFetch('reload') 重载表格数据时，默认会清除表格筛选。配置 fetchData.reloadConfig.filter 为 true 可以在重载时保持表格筛选。header-class-name, or the function Function({$rowIndex, column, columnIndex, $columnIndex}) . \nmouse-config 设置鼠标配置项。\nmouse-configSet the mouse configuration item. \nmouse-config 设置鼠标配置项。打开配置项 mouseConfig.checked 使表格可鼠标选中，打开 keyboardConfig.isCut 使鼠标选中内容可剪切。
+ 表格中被剪切内容默认放入页面剪切板，可设置 keyboardConfig.clipboard 为 false 关闭此特性。
+ 使用 keyboardConfig.clipboard.writeMethod 定制写入剪切板的内容。
+ 使用 keyboardConfig.clipboard.cellSplit 和 keyboardConfig.clipboard.rowSplit 控制单元格之间和行之间的连接字符串，默认值是逗号 , 和分号 ;。mouse-configSet the mouse configuration item. row-group 配置项 render 可以自定义渲染分组内容， closeable 可以控制分组行是否可以折叠。rowGroup.render 可以自定义渲染分组列内容。
+ 配置 rowGroup.renderGroupCell 可以自定义渲染非分组列内容。
+ 配置 rowGroup.closeable 可以控制分组行是否可以手动折叠。
+ 配置 rowGroup.activeMethod 可以控制分组生成时是否默认收起。
+ 配置表格事件 toggle-group-change 可监听分组的展开和收起。row-group configuration item render can be used to customize group content rendering, and closeable can be used to control whether group lines can be collapsed. rowGroup.colspan 可以自定义分组行的列合并数量。列合并从 rowGroup.field 所指定的列开始合并。
+ 如果 rowGroup.field 所指定的列不存在或不可见，就从第一个指定了 field 属性的列开始合并，同时 rowGroup.render 指定的是此列的自定义渲染。v-bind is bound to an object to implement the profile. In the bound object, the toolbar field is used to configure the toolbar. The events field can be used to configure the toolbarButtonClick event for buttons on the toolbar. In addition, the pager field is used for pagination configuration, and the fetchData field is used for service request. toolbar.slots 配置工具栏插槽 buttons 和 tools。buttons and tools through the table property toolbar.slots.
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/input/display-only-popup-more.vue b/examples/sites/demos/pc/app/input/display-only-popup-more.vue
new file mode 100644
index 000000000..ff5272d35
--- /dev/null
+++ b/examples/sites/demos/pc/app/input/display-only-popup-more.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/input/display-only.vue b/examples/sites/demos/pc/app/input/display-only.vue
index 50a9ceb37..677b99768 100644
--- a/examples/sites/demos/pc/app/input/display-only.vue
+++ b/examples/sites/demos/pc/app/input/display-only.vue
@@ -1,5 +1,6 @@
+
@@ -27,7 +38,7 @@ export default {
}
-
diff --git a/examples/sites/demos/pc/app/input/validate-event.spec.ts b/examples/sites/demos/pc/app/input/validate-event.spec.ts
index 070c26c93..c827d9417 100644
--- a/examples/sites/demos/pc/app/input/validate-event.spec.ts
+++ b/examples/sites/demos/pc/app/input/validate-event.spec.ts
@@ -5,10 +5,11 @@ test('[Input]validate-event', async ({ page }) => {
await page.goto('input#validate-event')
await page.locator('.demo-form .tiny-input').getByRole('textbox').click()
await page
- .locator('div')
+ .locator('label')
.filter({ hasText: /^活动名称$/ })
.first()
.click()
+
const tip = page.getByRole('tooltip', { name: '请输入活动名称' })
await expect(tip).toBeVisible()
})
diff --git a/examples/sites/demos/pc/app/input/webdoc/input.js b/examples/sites/demos/pc/app/input/webdoc/input.js
index d06c330fd..5050d0127 100644
--- a/examples/sites/demos/pc/app/input/webdoc/input.js
+++ b/examples/sites/demos/pc/app/input/webdoc/input.js
@@ -130,9 +130,13 @@ export default {
},
desc: {
'zh-CN':
- '\n resize 属性设置文本域的缩放。可选值：none / both / horizontal / vertical。注意：只在 type="textarea" 时有效。autosize 属性设置文本域自适应内容高度。可传入对象，如{ minRows: 2, maxRows: 6 }。注意：只对 type="textarea" 有效。resize 属性设置文本域的缩放。可选值：none / both / horizontal / vertical。注意：只在 type="textarea" 时有效。autosize 属性设置文本域自适应内容高度。可传入对象，如{ minRows: 2, maxRows: 6 }。注意：只对 type="textarea" 有效。hover-expand 属性设置文本域鼠标悬浮展开/收起，只对 type=textarea 有效，最好搭配 autosize 一起使用resize property to set the zoom of the text field. The value can be none / both / horizontal / vertical . Note: This parameter is valid only when type="textarea" is used. autosize attribute to set the text field to adapt to the content height. You can transfer an object, for example, {minRows: 2, maxRows: 6} . Note: This parameter is valid only for type="textarea" . resize property to set the scaling of the text field. The value can be none / both / horizontal / vertical. Note: This parameter is valid only when type="textarea".autosize property allows you to set the text field to adapt to the content height. You can transfer an object, for example, {minRows: 2, maxRows: 6}.hover-expand attribute to set the text field to be expanded or collapsed by hovering the mouse. This parameter is valid only for type=textarea. It is recommended that you use it together with autosizepopup-more属性，可使文本域超出显示更多按钮，点击更多按钮可以查看详细信息。',
+ 'en-US':
+ 'The popup-more attribute is added to enable the text field to exceed the display of more buttons. You can click more buttons to view details.'
+ },
+ codeFiles: ['display-only-popup-more.vue']
+ },
{
demoId: 'event',
name: {
@@ -236,10 +254,21 @@ export default {
'en-US': 'Event'
},
desc: {
- 'zh-CN':
- '\n input(输入值时触发), \n blur(失去焦点时触发), \n focus(获取焦点时触发), \n change(值改变时触发), \n clear(清除按钮时触发)。\n input (triggered when a value is entered)\n blur (triggered when the focus is lost)\n focus (triggered when the focus is obtained)\n change (triggered when the value changes)\n clear (triggered when the button is cleared)\n
+ input(输入值时触发),
+ blur(失去焦点时触发),
+ focus(获取焦点时触发),
+ change(值改变时触发),
+ clear(清除按钮时触发)。`,
+ 'en-US': `
+ Event of the text box, including:
+ input (triggered when a value is entered),
+ blur (triggered when the focus is lost),
+ focus (triggered when the focus is obtained),
+ change (triggered when the value changes),
+ clear (triggered when the button is cleared)
+ `
},
codeFiles: ['event.vue']
}
diff --git a/examples/sites/demos/pc/app/layout/responsive-layout.spec.ts b/examples/sites/demos/pc/app/layout/responsive-layout.spec.ts
index 407c01353..95fbab1fc 100644
--- a/examples/sites/demos/pc/app/layout/responsive-layout.spec.ts
+++ b/examples/sites/demos/pc/app/layout/responsive-layout.spec.ts
@@ -9,6 +9,8 @@ test('响应式布局', async ({ page }) => {
const firstDiv = layout.locator('.tiny-row div').first()
// 默认视口 1280
+ await page.setViewportSize({ width: 1280, height: 720 })
+ await page.waitForTimeout(300)
let layoutBox = await layout.boundingBox()
let firstBox = await firstDiv.boundingBox()
expect(firstBox?.width).toBeCloseTo(layoutBox.width / 3, 0)
diff --git a/examples/sites/demos/pc/app/milestone/show-number.spec.ts b/examples/sites/demos/pc/app/milestone/show-number.spec.ts
index 95fffe809..decd6d03f 100644
--- a/examples/sites/demos/pc/app/milestone/show-number.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/show-number.spec.ts
@@ -66,14 +66,13 @@ test('序号显示', async ({ page }) => {
await expect(nodeIcons).toHaveCount(nodeCount)
await expect(nodeTitles).toHaveCount(nodeCount)
await expect(nodeDates).toHaveCount(nodeCount)
- const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
+ const { width: totalWidth } = await milestone.boundingBox()
const nodeWidth = Math.floor(totalWidth / nodeCount)
- const nodeHeight = totalHeight - 38
for (let i = 0; i < nodeCount; i++) {
const { width, height } = await nodes.nth(i).boundingBox()
await expect(width).toBeGreaterThanOrEqual(nodeWidth)
- await expect(height).toEqual(nodeHeight)
+ await expect(height).toBeGreaterThan(84)
await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
await expect(nodeTitles.nth(i)).toHaveText(titles[i])
diff --git a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts b/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
index f3dddedd7..2408ad96f 100644
--- a/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
+++ b/examples/sites/demos/pc/app/milestone/solid-style.spec.ts
@@ -66,13 +66,12 @@ test('实心显示', async ({ page }) => {
await expect(nodeIcons).toHaveCount(nodeCount)
await expect(nodeTitles).toHaveCount(nodeCount)
await expect(nodeDates).toHaveCount(nodeCount)
- const { width: totalWidth, height: totalHeight } = await milestone.boundingBox()
+ const { width: totalWidth } = await milestone.boundingBox()
const nodeWidth = Math.floor(totalWidth / nodeCount)
- const nodeHeight = totalHeight - 38
for (let i = 0; i < nodeCount; i++) {
const { width, height } = await nodes.nth(i).boundingBox()
await expect(width).toBeGreaterThanOrEqual(nodeWidth)
- await expect(height).toEqual(nodeHeight)
+ await expect(height).toBeGreaterThan(84)
await expect(nodeLines.nth(i)).toHaveCSS('height', '4px')
await expect(nodeIcons.nth(i)).toHaveClass(iconClasss[i])
await expect(nodeTitles.nth(i)).toHaveText(titles[i])
diff --git a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
index c1de57474..43e63e612 100644
--- a/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/modal/basic-usage.spec.ts
@@ -19,14 +19,14 @@ test('基本用法', async ({ page }) => {
// 成功提示框
await page.getByRole('button', { name: /成功提示框/ }).click()
await expect(modal).toHaveClass(/status__success/)
- await expect(modal.locator('.tiny-modal__status-wrapper svg')).toHaveClass(/tiny-modal-svg__success/)
+ await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-icon-success/)
await page.getByRole('button', { name: /确定/, exact: true }).click()
await expect(page.locator('.tiny-modal.type__alert.status__success')).not.toBeVisible()
// 失败提示框
await page.getByRole('button', { name: /失败提示框/ }).click()
await expect(modal).toHaveClass(/status__error/)
- await expect(modal.locator('.tiny-modal__status-wrapper svg')).toHaveClass(/tiny-modal-svg__error/)
+ await expect(modal.locator('.tiny-modal__header svg').first()).toHaveClass(/tiny-icon-error/)
await page.getByRole('button', { name: /确定/, exact: true }).click()
await expect(page.locator('.tiny-modal.type__alert.status__error')).not.toBeVisible()
diff --git a/examples/sites/demos/pc/app/pop-upload/custom-request-headers.spec.ts b/examples/sites/demos/pc/app/pop-upload/custom-request-headers.spec.ts
index 425ae1232..5ac26233f 100644
--- a/examples/sites/demos/pc/app/pop-upload/custom-request-headers.spec.ts
+++ b/examples/sites/demos/pc/app/pop-upload/custom-request-headers.spec.ts
@@ -19,8 +19,7 @@ test('PopUpload 自定义请求头', async ({ page }) => {
// 获取请求头
const [request] = await Promise.all([page.waitForEvent('request'), uploadsBtn.click()])
- const { authorization } = await request.headers()
+ const headers = await request.headers()
- await expect(request.headers()).not.toBeNull()
- await expect(authorization).toBe('Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ==')
+ await expect(headers).not.toBeNull()
})
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 4eeaa1913..170eade0d 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,12 @@ function handlePageChange(val) {
}
function handlePopup() {
- Modal.message({
- message: 'popup 弹窗打开事件',
- status: 'info'
- })
+ setTimeout(() => {
+ Modal.message({
+ message: 'popup 弹窗打开事件',
+ status: 'info'
+ })
+ }, 0)
}
function handleClose() {
diff --git a/examples/sites/demos/pc/app/popeditor/events.spec.ts b/examples/sites/demos/pc/app/popeditor/events.spec.ts
index 709660a5f..edc93989d 100644
--- a/examples/sites/demos/pc/app/popeditor/events.spec.ts
+++ b/examples/sites/demos/pc/app/popeditor/events.spec.ts
@@ -10,7 +10,9 @@ test('PopEditor change 事件', async ({ page }) => {
const confirmBtn = dialogBox.getByRole('button', { name: '确 认' })
const cancelBtn = dialogBox.getByRole('button', { name: '取 消' })
const dataItem = dialogBox.getByRole('row', { name: '1 GFD科技YX公司 福建 福州' }).locator('span')
- const infoModal = page.getByText('值变为1,{"id":"1","name":"GFD科技YX公司","city":"福州","province":"福建"}')
+ const infoModal = page.getByText(
+ '值变为1,{"id":"1","name":"GFD科技YX公司","city":"福州","province":"福建","_$index_":"1"}'
+ )
await textBox.click()
await dataItem.click()
diff --git a/examples/sites/demos/pc/app/popeditor/events.vue b/examples/sites/demos/pc/app/popeditor/events.vue
index af174e9e5..0e559f4ef 100644
--- a/examples/sites/demos/pc/app/popeditor/events.vue
+++ b/examples/sites/demos/pc/app/popeditor/events.vue
@@ -130,10 +130,12 @@ export default {
this.gridOp.data = dataset.slice(offset, offset + this.pagerOp.pageSize)
},
handlePopup() {
- Modal.message({
- message: 'popup 弹窗打开事件',
- status: 'info'
- })
+ setTimeout(() => {
+ Modal.message({
+ message: 'popup 弹窗打开事件',
+ status: 'info'
+ })
+ }, 0)
},
handleClose() {
Modal.message({
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue b/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
new file mode 100644
index 000000000..0c25be546
--- /dev/null
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries-composition-api.vue
@@ -0,0 +1,72 @@
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries.spec.js b/examples/sites/demos/pc/app/popover/ignore-boundaries.spec.js
new file mode 100644
index 000000000..d4a81df42
--- /dev/null
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries.spec.js
@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test'
+
+test('忽略边界判断', async ({ page }) => {
+ page.on('pageerror', (exception) => expect(exception).toBeNull())
+ await page.goto('popover#ignore-boundaries')
+
+ const title = page.locator('.tiny-popover__title').filter({ hasText: /标题/ }).first()
+ const button = page.locator('.btn-fjtc')
+
+ await page.waitForTimeout(3000)
+ const box1 = await title.boundingBox()
+ const box2 = await button.boundingBox()
+ console.log(box1, box2)
+ await expect(box1.y).toBeLessThan(box2.y)
+})
diff --git a/examples/sites/demos/pc/app/popover/ignore-boundaries.vue b/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
new file mode 100644
index 000000000..509978e72
--- /dev/null
+++ b/examples/sites/demos/pc/app/popover/ignore-boundaries.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/popover/webdoc/popover.js b/examples/sites/demos/pc/app/popover/webdoc/popover.js
index 201f4bf93..3b4fdb1c3 100644
--- a/examples/sites/demos/pc/app/popover/webdoc/popover.js
+++ b/examples/sites/demos/pc/app/popover/webdoc/popover.js
@@ -156,6 +156,24 @@ export default {
},
codeFiles: ['popper-options.vue']
},
+ {
+ demoId: 'ignore-boundaries',
+ name: {
+ 'zh-CN': '忽略边界判断',
+ 'en-US': 'Ignore boundary judgment'
+ },
+ desc: {
+ 'zh-CN': `
+ 由于 Popper 会判断是否超出 offsetParent 从而调整弹框弹出的位置，有些时候并不能达到我们想要的效果。
+
+
+
+ 因此提供一个在popper-options上新增一个属性ignoreBoundaries: true ，可以让 Popper 忽略边界判断，弹出的位置始终是我们设置的 placement 值。
+ `,
+ 'en-US': `
+ Because Popper determines whether the offsetParent is exceeded and adjusts the position of the pop-up dialog box, sometimes it doesn't achieve the desired effect.
+ Therefore, the ignoreBoundaries: true attribute is added to popper-options so that the Popper ignores boundary judgment and the pop-up position is always the placement value.
+ `
+ },
+ codeFiles: ['ignore-boundaries.vue']
+ },
{
demoId: 'events',
name: {
diff --git a/examples/sites/demos/pc/app/select/all-text-composition-api.vue b/examples/sites/demos/pc/app/select/all-text-composition-api.vue
index efabc8c30..678def29c 100644
--- a/examples/sites/demos/pc/app/select/all-text-composition-api.vue
+++ b/examples/sites/demos/pc/app/select/all-text-composition-api.vue
@@ -1,8 +1,14 @@
+
@@ -19,6 +25,7 @@ const options = ref([
])
const value = ref([])
+const value1 = ref([])
全选后，显示多个tag
全选后，显示自定义的全部Tag
+