fix: 修复 XDesign 规范的几处 bug US2026
Signed-off-by: <zenglingka@> Match-id-179787bee5b2a541ccd878c6259550ed4d1e9a67
This commit is contained in:
OpenTiny
parent
c51427e40b
commit
568b18a0e1
|
|
@ -49,5 +49,6 @@ tgzs
|
|||
|
||||
packages/theme/scripts/theme.json
|
||||
packages/theme/scripts/theme-result.txt
|
||||
packages/theme/scripts/themeExcel.xlsx
|
||||
|
||||
packages/theme/src/theme/*-theme/component.js
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file.
|
||||
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
||||
|
||||
## [1.0.6-mf.0](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/compare/@opentiny/vue-docs@1.0.5-mf.0...@opentiny/vue-docs@1.0.6-mf.0) (2023-02-08)
|
||||
|
||||
**Note:** Version bump only for package @opentiny/vue-docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.0.5-mf.0](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/compare/@opentiny/vue-docs@1.0.4-mf.0...@opentiny/vue-docs@1.0.5-mf.0) (2023-02-08)
|
||||
|
||||
**Note:** Version bump only for package @opentiny/vue-docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.0.4-mf.0](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/compare/@opentiny/vue-docs@1.0.3-mf.0...@opentiny/vue-docs@1.0.4-mf.0) (2023-02-08)
|
||||
|
||||
**Note:** Version bump only for package @opentiny/vue-docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.0.3-mf.0](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/compare/@opentiny/vue-docs@1.0.2-mf.0...@opentiny/vue-docs@1.0.3-mf.0) (2023-02-08)
|
||||
|
||||
**Note:** Version bump only for package @opentiny/vue-docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## [1.0.2-mf.0](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/compare/@opentiny/vue-docs@1.0.1-beta.0...@opentiny/vue-docs@1.0.2-mf.0) (2023-02-08)
|
||||
|
||||
**Note:** Version bump only for package @opentiny/vue-docs
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 1.0.1-beta.0 (2023-02-08)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* 回退对tailwind的line-height的修改 ([8de2bb5](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/8de2bb50862e22a9810b5d2b8295d32f34710f4f))
|
||||
* 使用了按需导入插件，就不能用import default 导入 ([606b141](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/606b141690736753b20e12235e4e769187e044a5))
|
||||
* 修复 time-line 样例报错 ([502a0e6](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/502a0e635df59271ba6a1e56926c2e0d7f66adeb))
|
||||
* 修复工程样式问题，样式增加深度选择器 ([dd8d0c3](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/dd8d0c3c2cf02bf68303c33daa6d0301f7117e96))
|
||||
* 修正 DemoView 样式 ([e233e72](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/e233e72abdc56fbb4ac82f1ad22a872eb5a4ba35))
|
||||
* 修正 loading/custom-class.vue 的归属关系 ([480185f](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/480185fec93c863e25dfa6c4ed3e5e40cf839700))
|
||||
* 修正 md 路径问题以及全量引入 vue-icon ([3398881](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/3398881d1c986d398c88c2f2163598d4b48d9131))
|
||||
* 修正 md 文档中的表格样式 ([bbfaeb8](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/bbfaeb8d533f92a8d7010a67bd1fde7c7971dabb))
|
||||
* demo 链接一定要有后缀名；代码中不直接引用 common/adapter ([15341bd](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/15341bdb0195e545dfbc48c33b1c4e97722c6a96))
|
||||
* grid-basic-usage.md 文件放错了目录 ([649f932](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/649f932d93fbb118e1f86ef4ed102ed1cd0522ab))
|
||||
* tabs/lazy.vue 迁移回 pc 下 ([6c847d9](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/6c847d99c1f9233256879a93f1f5eca7556bbf4c))
|
||||
* tag-selectable.md 错误的同步到了 pc 目录下，重新 mv 到 mobile-first 下即可 ([47cdffa](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/47cdffa50e32a127558c83d0116cf76f30c99537))
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* 搭建了基于 vitest 的单元测试和基于 playwright 的 E2E 测试 ([fdeddaf](https://codehub-dg-g.huawei.com/AIF/TINY/opentiny-vue/commits/fdeddaf6c753c737caf5434cea2c86cc4292a311))
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row :gutter="20" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">
|
||||
20
|
||||
</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">
|
||||
20
|
||||
</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">
|
||||
20
|
||||
</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
<tiny-row :gutter="50" class="margin-bottom10">
|
||||
<tiny-col :span="3">
|
||||
<div class="col">
|
||||
50
|
||||
</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">
|
||||
50
|
||||
</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="3">
|
||||
<div class="col">
|
||||
50
|
||||
</div>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</tiny-layout>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Layout, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyLayout: Layout,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.margin-bottom10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.col {
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: #1f9ed8;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
// eager = true，可以校验vue,json等文件错误。
|
||||
// eager = false, 可以懒加载，优化速度
|
||||
|
||||
// demo源码
|
||||
// 同web-doc的菜单资源
|
||||
import originMenuData from '../resources/pc/menus.js'
|
||||
|
||||
export const demoStr = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false, as: 'raw' })
|
||||
export const demoVue = import.meta.glob('../resources/pc/demo/**/*.vue', { eager: false })
|
||||
|
||||
// // api属性
|
||||
export const zhApi = import.meta.glob('../resources/pc/api/zh-CN/**/*.json', { eager: false })
|
||||
// export const enApi = import.meta.glob('@resources/api/en-US/**/*.json', { eager: false })
|
||||
|
||||
// // json, demo的配置文件
|
||||
export const zhDemo = import.meta.glob('../resources/pc/demo-config/zh-CN/**/*.json', { eager: false })
|
||||
// 格式：{zh,en,enSuffix,path}
|
||||
// path: '/breadcrumb' 对应着【 demo的配置文件】。每个path有多个示例
|
||||
const menuData = originMenuData.slice(0)
|
||||
function processMenu(menu, isTop) {
|
||||
menu.id = menu.en
|
||||
menu.label = isTop ? menu.zh : `${menu.zh} ${menu.en}`
|
||||
if (menu.children && menu.children.length > 0) {
|
||||
menu.children.forEach((m) => processMenu(m, false))
|
||||
}
|
||||
}
|
||||
menuData.forEach((m) => processMenu(m, true))
|
||||
|
||||
export { menuData }
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import * as monaco from 'monaco-editor'
|
||||
import { hooks } from '@opentiny/vue-common'
|
||||
// monaco ESM模块集成说明 ： https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite
|
||||
// https://github.com/vitejs/vite/discussions/1791#discussioncomment-321046
|
||||
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
|
||||
self.MonacoEnvironment = {
|
||||
getWorker: () => new htmlWorker()
|
||||
}
|
||||
|
||||
export function useMonaco(selector) {
|
||||
const state = {
|
||||
editor: null,
|
||||
getCode: () => state.editor && state.editor.getValue(),
|
||||
setCode: (code) => state.editor && state.editor.setValue(code),
|
||||
hotKey: (key, fn) => state.editor && state.editor.addCommand(key, fn),
|
||||
format: () => state.editor && state.editor.trigger('anyString', 'editor.action.formatDocument'),
|
||||
scrollTop: () => state.editor && state.editor.setScrollTop(0)
|
||||
}
|
||||
|
||||
hooks.onMounted(() => {
|
||||
state.editor = monaco.editor.create(document.querySelector(selector), {
|
||||
value: '',
|
||||
language: 'html',
|
||||
theme: 'vs-dark',
|
||||
tabSize: 2,
|
||||
automaticLayout: true
|
||||
})
|
||||
})
|
||||
hooks.onUnmounted(() => (state.editor = null))
|
||||
return state
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "@opentiny/vue-docs",
|
||||
"type": "module",
|
||||
"version": "1.0.7",
|
||||
"version": "1.0.8",
|
||||
"description": "",
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
|
|
@ -13,8 +13,12 @@
|
|||
"@opentiny/vue-theme-mobile": "workspace:~",
|
||||
"@opentiny/vue-design-aurora": "workspace:~",
|
||||
"@opentiny/vue-design-smb": "workspace:~",
|
||||
"@playwright/test": "^1.29.2",
|
||||
"sortablejs": "1.15.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.29.2"
|
||||
},
|
||||
"files": [
|
||||
"resources"
|
||||
]
|
||||
|
|
|
|||
|
|
@ -62,6 +62,13 @@
|
|||
"type": "Boolean",
|
||||
"desc": "Whether to display the edit button. This parameter takes effect only when more buttons are displayed.",
|
||||
"defaultValue": "The default value of this attribute is false."
|
||||
},
|
||||
{
|
||||
"name": "border",
|
||||
"sample": "border",
|
||||
"type": "Boolean",
|
||||
"desc": "Remove button border.",
|
||||
"defaultValue": "The default value of this attribute is true."
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@
|
|||
},
|
||||
{
|
||||
"name": "disabled-void-icon-class",
|
||||
"sample": "disabled-not-selected-color",
|
||||
"sample": "disabled-void-icon-class",
|
||||
"type": "String",
|
||||
"desc": "Icon style name that is not selected in read-only state",
|
||||
"defaultValue": "The default value of this attribute is icon-stardisable."
|
||||
"desc": "Icon style name that is not selected in read-only state. Options 'icon-starDisable' | 'icon-frown' | 'icon-meh' | 'icon-smile'",
|
||||
"defaultValue": "The default value of this attribute is icon-starActive."
|
||||
},
|
||||
{
|
||||
"name": "high-threshold",
|
||||
|
|
@ -109,8 +109,8 @@
|
|||
"name": "void-icon-class",
|
||||
"sample": "not-selected-class",
|
||||
"type": "String",
|
||||
"desc": "Class name of unselected icons",
|
||||
"defaultValue": "The default value of this attribute is icon-stardisable."
|
||||
"desc": "Class name of unselected icons. Options 'icon-starDisable' | 'icon-frown' | 'icon-meh' | 'icon-smile'",
|
||||
"defaultValue": "The default value of this attribute is icon-starActive."
|
||||
},
|
||||
{
|
||||
"name": "radio",
|
||||
|
|
|
|||
|
|
@ -62,6 +62,13 @@
|
|||
"type": "Boolean",
|
||||
"desc": "是否显示编辑按钮，只有在显示更多的情况下生效。",
|
||||
"defaultValue": "该属性的默认值为 false"
|
||||
},
|
||||
{
|
||||
"name": "border",
|
||||
"sample": "border",
|
||||
"type": "Boolean",
|
||||
"desc": "是否显示边框线",
|
||||
"defaultValue": "该属性的默认值为 true"
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
|
|
|
|||
|
|
@ -37,10 +37,10 @@
|
|||
},
|
||||
{
|
||||
"name": "disabled-void-icon-class",
|
||||
"sample": "disabled-not-selected-color",
|
||||
"sample": "disabled-void-icon-class",
|
||||
"type": "String",
|
||||
"desc": "只读状态下未选中的图标样式名",
|
||||
"defaultValue": "该属性的默认值为 icon-stardisable"
|
||||
"desc": "只读状态下未选中的图标样式名，可选值:icon-starDisable | icon-frown | icon-meh | icon-smile",
|
||||
"defaultValue": "该属性的默认值为 icon-starActive"
|
||||
},
|
||||
{
|
||||
"name": "high-threshold",
|
||||
|
|
@ -109,8 +109,8 @@
|
|||
"name": "void-icon-class",
|
||||
"sample": "not-selected-class",
|
||||
"type": "String",
|
||||
"desc": "未选中 icon 的类名",
|
||||
"defaultValue": "该属性的默认值为 icon-stardisable"
|
||||
"desc": "未选中 icon 的图标样式名,可选值:icon-starDisable | icon-frown | icon-meh | icon-smile",
|
||||
"defaultValue": "该属性的默认值为 icon-starActive"
|
||||
},
|
||||
{
|
||||
"name": "radio",
|
||||
|
|
|
|||
|
|
@ -5,20 +5,20 @@
|
|||
"sample": "advanced-steps",
|
||||
"type": "Number",
|
||||
"desc": "设置步骤条的选中步骤，默认为-1 。",
|
||||
"defaultValue": "该属性的默认值为 -1"
|
||||
"defaultValue": "-1"
|
||||
},
|
||||
{
|
||||
"name": "count-field",
|
||||
"sample": "custom-steps-item",
|
||||
"type": "String",
|
||||
"desc": "设置高级向导里徽标计数对应的字段名，默认为 'count'",
|
||||
"defaultValue": "该属性的默认值为 count"
|
||||
"defaultValue": "count"
|
||||
},
|
||||
{
|
||||
"name": "data",
|
||||
"sample": "data-resource",
|
||||
"type": "Object , Array",
|
||||
"desc": "设置步骤条的数据 。",
|
||||
"desc": "设置步骤条的数据。",
|
||||
"defaultValue": ""
|
||||
},
|
||||
{
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
"sample": "custom-steps-item",
|
||||
"type": "String",
|
||||
"desc": "设置节点信息中名称对应的字段名，默认为 'name'",
|
||||
"defaultValue": "该属性的默认值为 name"
|
||||
"defaultValue": "name"
|
||||
},
|
||||
{
|
||||
"name": "space",
|
||||
|
|
@ -40,7 +40,21 @@
|
|||
"sample": "custom-steps-item",
|
||||
"type": "String",
|
||||
"desc": "设置数据状态对应的字段名，默认为 'status'",
|
||||
"defaultValue": "该属性的默认值为 status"
|
||||
"defaultValue": "status"
|
||||
},
|
||||
{
|
||||
"name": "text-position",
|
||||
"sample": "text-position",
|
||||
"type": "String",
|
||||
"desc": "设置节点文本内容的位置, 可选值有right, bottom",
|
||||
"defaultValue": "bottom"
|
||||
},
|
||||
{
|
||||
"name": "show-divider",
|
||||
"sample": "show-divider",
|
||||
"type": "Boolean",
|
||||
"desc": "设置是否显示步骤条底部分割线",
|
||||
"defaultValue": "false"
|
||||
}
|
||||
],
|
||||
"slots": [
|
||||
|
|
@ -50,6 +64,13 @@
|
|||
"type": "",
|
||||
"desc": "步骤条数据项插槽",
|
||||
"defaultValue": ""
|
||||
},
|
||||
{
|
||||
"name": "active-node-desc",
|
||||
"sample": "slot",
|
||||
"type": "",
|
||||
"desc": "当前节点描述信息插槽",
|
||||
"defaultValue": ""
|
||||
}
|
||||
],
|
||||
"events": [
|
||||
|
|
|
|||
|
|
@ -78,5 +78,21 @@
|
|||
"component": "Buttongroup",
|
||||
"findIntroStr": "A button group is used for multiple similar operations.",
|
||||
"demoId": "slot-default"
|
||||
},
|
||||
{
|
||||
"title": "Button Group Multiple",
|
||||
"content": "<p>Multi-line button group, after exceeding the maximum width, it will be displayed in a new line.</p>\n",
|
||||
"link": "button-group/button-group-multiple",
|
||||
"component": "Buttongroup",
|
||||
"findIntroStr": "Button group multiple",
|
||||
"demoId": "button-group-multiple"
|
||||
},
|
||||
{
|
||||
"title": "Border",
|
||||
"content": "<p>Set with or without border, the default is true.</p>\n",
|
||||
"link": "button-group/Border",
|
||||
"component": "Buttongroup",
|
||||
"findIntroStr": "Border",
|
||||
"demoId": "border"
|
||||
}
|
||||
]
|
||||
|
|
@ -113,10 +113,18 @@
|
|||
},
|
||||
{
|
||||
"title": "Slot",
|
||||
"content": "<p>Content of Checkbox</p>\n",
|
||||
"content": "<p>Multi-line button group, after exceeding the maximum width, it will be displayed in a new line.</p>\n",
|
||||
"link": "checkbox/checkbox-slot",
|
||||
"component": "Checkbox check box",
|
||||
"findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
|
||||
"demoId": "checkbox-slot"
|
||||
},
|
||||
{
|
||||
"title": "Checkbox Button Multiple",
|
||||
"content": "<p>Checkbox button multiple</p>\n",
|
||||
"link": "checkbox/checkbox-button-multiple",
|
||||
"component": "Checkbox check box",
|
||||
"findIntroStr": "Configure options for different scenarios. Users can select multiple options from a group of options.",
|
||||
"demoId": "checkbox-button-multiple"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1 +1,98 @@
|
|||
[{"title":"基本用法","content":"<p>通过 <code>v-model</code> 设置默认选中的按钮，并实现双向绑定。通过 <code>value</code> 也可设置默认选中按钮，但不能进行双向绑定。</p>\n","link":"button-group/base","component":" ButtonGroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"base"},{"title":"按钮组数据","content":"<p>通过 <code>data</code> 属性设置按钮组数据，对象中的 text 为按钮显示文本，value 用于双向绑定时指定的值。</p>\n","link":"button-group/data","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"data"},{"title":"设置组件大小","content":"<p>可以设置为：<code>medium</code>，<code>small</code>，<code>mini</code></p>\n","link":"button-group/size","component":" ButtonGroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"size"},{"title":"禁用状态","content":"<p>设置 <code>disabled</code> 属性为 true 可禁用整个按钮组。</p>\n","link":"button-group/disabled","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"disabled"},{"title":"朴素按钮","content":"<p>设置 <code>plain</code> 属性为 true 可显示为朴素按钮样式。</p>\n","link":"button-group/plain","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"plain"},{"title":"数据字段映射","content":"<p>若按钮组数据对象中的字段不是默认的 text 和 value ，则可通过 <code>text-field</code>、<code>value-field</code> 属性进行映射。</p>\n","link":"button-group/text-value-field","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"text-value-field"},{"title":"是否显示更多按钮","content":"<p>设置 <code>show-more</code> 属性值大于 0 且小于按钮组数据，可显示更多按钮。</p>\n","link":"button-group/show-more","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"show-more"},{"title":"是否显示编辑按钮","content":"<p>设置 <code>show-edit</code> 属性值为 true ，可显示编辑按钮。</p>\n","link":"button-group/show-edit","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"show-edit"},{"title":"编辑事件","content":"<p>勾选值改变后将触发 <code>edit</code> 事件。</p>\n","link":"button-group/event-edit","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"event-edit"},{"title":"默认插槽","content":"<p>使用默认插槽的方式时，ButtonGroup 的 <code>data、text-field、value-field、value / v-model、size</code> 属性对插槽中的按钮将不再生效。\n但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性，具体参考 Button 组件属性。</p>\n","link":"button-group/slot-default","component":" Buttongroup 按钮组","findIntroStr":"以按钮组的方式出现，常用于多项类似操作。","demoId":"slot-default"}]
|
||||
[
|
||||
{
|
||||
"title": "基本用法",
|
||||
"content": "<p>通过 <code>v-model</code> 设置默认选中的按钮，并实现双向绑定。通过 <code>value</code> 也可设置默认选中按钮，但不能进行双向绑定。</p>\n",
|
||||
"link": "button-group/base",
|
||||
"component": " ButtonGroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "base"
|
||||
},
|
||||
{
|
||||
"title": "按钮组数据",
|
||||
"content": "<p>通过 <code>data</code> 属性设置按钮组数据，对象中的 text 为按钮显示文本，value 用于双向绑定时指定的值。</p>\n",
|
||||
"link": "button-group/data",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "data"
|
||||
},
|
||||
{
|
||||
"title": "设置组件大小",
|
||||
"content": "<p>可以设置为：<code>medium</code>，<code>small</code>，<code>mini</code></p>\n",
|
||||
"link": "button-group/size",
|
||||
"component": " ButtonGroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "size"
|
||||
},
|
||||
{
|
||||
"title": "禁用状态",
|
||||
"content": "<p>设置 <code>disabled</code> 属性为 true 可禁用整个按钮组。</p>\n",
|
||||
"link": "button-group/disabled",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "disabled"
|
||||
},
|
||||
{
|
||||
"title": "朴素按钮",
|
||||
"content": "<p>设置 <code>plain</code> 属性为 true 可显示为朴素按钮样式。</p>\n",
|
||||
"link": "button-group/plain",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "plain"
|
||||
},
|
||||
{
|
||||
"title": "数据字段映射",
|
||||
"content": "<p>若按钮组数据对象中的字段不是默认的 text 和 value ，则可通过 <code>text-field</code>、<code>value-field</code> 属性进行映射。</p>\n",
|
||||
"link": "button-group/text-value-field",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "text-value-field"
|
||||
},
|
||||
{
|
||||
"title": "是否显示更多按钮",
|
||||
"content": "<p>设置 <code>show-more</code> 属性值大于 0 且小于按钮组数据，可显示更多按钮。</p>\n",
|
||||
"link": "button-group/show-more",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "show-more"
|
||||
},
|
||||
{
|
||||
"title": "是否显示编辑按钮",
|
||||
"content": "<p>设置 <code>show-edit</code> 属性值为 true ，可显示编辑按钮。</p>\n",
|
||||
"link": "button-group/show-edit",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "show-edit"
|
||||
},
|
||||
{
|
||||
"title": "编辑事件",
|
||||
"content": "<p>勾选值改变后将触发 <code>edit</code> 事件。</p>\n",
|
||||
"link": "button-group/event-edit",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "event-edit"
|
||||
},
|
||||
{
|
||||
"title": "默认插槽",
|
||||
"content": "<p>使用默认插槽的方式时，ButtonGroup 的 <code>data、text-field、value-field、value / v-model、size</code> 属性对插槽中的按钮将不再生效。\n但可根据使用场景在 Button 组件标签上对不同按钮设置不同的属性，具体参考 Button 组件属性。</p>\n",
|
||||
"link": "button-group/slot-default",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "以按钮组的方式出现，常用于多项类似操作。",
|
||||
"demoId": "slot-default"
|
||||
},
|
||||
{
|
||||
"title": "多行",
|
||||
"content": "<p>多行按钮组，超出最大宽度后，换行显示</p>\n",
|
||||
"link": "button-group/button-group-multiple",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "多行",
|
||||
"demoId": "button-group-multiple"
|
||||
},
|
||||
{
|
||||
"title": "边框",
|
||||
"content": "<p>设置有无边框，默认为true</p>\n",
|
||||
"link": "button-group/border",
|
||||
"component": " Buttongroup 按钮组",
|
||||
"findIntroStr": "边框",
|
||||
"demoId": "border"
|
||||
}
|
||||
]
|
||||
|
|
@ -118,5 +118,13 @@
|
|||
"component": " Checkbox 复选框",
|
||||
"findIntroStr": "用于配置不同场景的选项，提供用户可在一组选项中进行多选。",
|
||||
"demoId": "checkbox-slot"
|
||||
},
|
||||
{
|
||||
"title": "多行按钮",
|
||||
"content": "<p>多行按钮组，超出最大宽度后，换行显示</p>\n",
|
||||
"link": "checkbox/checkbox-button-multiple",
|
||||
"component": "Checkbox check box",
|
||||
"findIntroStr": "多行按钮",
|
||||
"demoId": "checkbox-button-multiple"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1 +1,138 @@
|
|||
[{"title":"基本用法","content":"详细用法参考如下示例","link":"rate/basic-usage","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"basic-usage"},{"title":"自定义 3 分段颜色","content":"<p>可通过 <code>colors</code> 定义 3 分段颜色。</p>\n","link":"rate/custom-3-threshold-colors","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"custom-3-threshold-colors"},{"title":"自定义禁用时未选中图标颜色","content":"<p>可通过 <code>disabled-void-color</code> 自定义禁用时未选中图标颜色。</p>\n","link":"rate/disabled-not-selected-color","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"disabled-not-selected-color"},{"title":"自定义禁用时未选中图标类名","content":"<p>可通过 <code>disabled-void-icon-class</code> 自定义禁用时未选中图标类名。</p>\n","link":"rate/disabled-not-selected-class","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"disabled-not-selected-class"},{"title":"自定义 3 分段图标样式","content":"<p>可通过 <code>icon-classes</code> 自定义 3 分段图标样式。</p>\n","link":"rate/custom-3-threshold-icon","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"custom-3-threshold-icon"},{"title":"辅助文字及颜色","content":"<p>可通过 <code>texts show-text text-color</code> 三个属性分别设置辅助文字内容、是否显示辅助文字及辅助文字颜色。</p>\n","link":"rate/texts-and-text-color","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"texts-and-text-color"},{"title":"大小及占位宽度","content":"<p>可通过 <code>size space</code> 分别大小和占位宽度。</p>\n","link":"rate/size-and-space","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"size-and-space"},{"title":"自定义未选中图标颜色","content":"<p>可通过 <code>void-color</code> 定义未选中图标颜色。</p>\n","link":"rate/not-selected-color","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"not-selected-color"},{"title":"自定义未选中图标类名","content":"<p>可通过 <code>void-icon-class</code> 定义未选中图标类名。</p>\n","link":"rate/not-selected-class","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"not-selected-class"},{"title":"图标下文字提示","content":"<p>可通过 <code>text-on-bottom</code> 定义是否在图标下显示文字提示。</p>\n","link":"rate/text-on-bottom","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"text-on-bottom"},{"title":"半选","content":"<p>可通过 <code>allow-half</code> 定义是否支持半选。</p>\n","link":"rate/allow-half","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"allow-half"},{"title":"禁用","content":"<p>可通过 <code>disabled</code> 定义是否禁用。</p>\n","link":"rate/dynamic-disable","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"dynamic-disable"},{"title":"分数显示","content":"<p>可通过 <code>show-score score-template</code> 分别定义是否显示分数和显示的模板。</p>\n","link":"rate/show-score","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"show-score"},{"title":"单选模式","content":"<p>可通过 <code>radio</code> 设置单选模式。</p>\n","link":"rate/radio-rate","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"radio-rate"},{"title":"最大分值","content":"<p>可通过 <code>max</code> 设置最大分值。</p>\n","link":"rate/max-score","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"max-score"},{"title":"界限值","content":"<p>可通过 <code>low-threshold high-threshold</code> 分别设置下限值和上限值，通过<code>colors</code>配置显示星的颜色</p>\n","link":"rate/threshold-value","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"threshold-value"},{"title":"事件","content":"<p>监听 <code>change</code> 事件触发处理方法。</p>\n","link":"rate/rate-events","component":" Rate 评分","findIntroStr":"Rate 快速评级，对评价进行展示。","demoId":"rate-events"}]
|
||||
[
|
||||
{
|
||||
"title": "基本用法",
|
||||
"content": "详细用法参考如下示例",
|
||||
"link": "rate/basic-usage",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "basic-usage"
|
||||
},
|
||||
{
|
||||
"title": "自定义 3 分段颜色",
|
||||
"content": "<p>可通过 <code>colors</code> 定义 3 分段颜色。</p>\n",
|
||||
"link": "rate/custom-3-threshold-colors",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "custom-3-threshold-colors"
|
||||
},
|
||||
{
|
||||
"title": "自定义禁用时未选中图标颜色",
|
||||
"content": "<p>可通过 <code>disabled-void-color</code> 自定义禁用时未选中图标颜色。</p>\n",
|
||||
"link": "rate/disabled-not-selected-color",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "disabled-not-selected-color"
|
||||
},
|
||||
{
|
||||
"title": "自定义禁用时未选中图标类名",
|
||||
"content": "<p>可通过 <code>disabled-void-icon-class</code> 自定义禁用时未选中图标类名。</p>\n",
|
||||
"link": "rate/disabled-not-selected-class",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "disabled-not-selected-class"
|
||||
},
|
||||
{
|
||||
"title": "自定义 3 分段图标样式",
|
||||
"content": "<p>可通过 <code>icon-classes</code> 自定义 3 分段图标样式。</p>\n",
|
||||
"link": "rate/custom-3-threshold-icon",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "custom-3-threshold-icon"
|
||||
},
|
||||
{
|
||||
"title": "辅助文字及颜色",
|
||||
"content": "<p>可通过 <code>texts show-text text-color</code> 三个属性分别设置辅助文字内容、是否显示辅助文字及辅助文字颜色。</p>\n",
|
||||
"link": "rate/texts-and-text-color",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "texts-and-text-color"
|
||||
},
|
||||
{
|
||||
"title": "大小及占位宽度",
|
||||
"content": "<p>可通过 <code>size space</code> 分别大小和占位宽度。</p>\n",
|
||||
"link": "rate/size-and-space",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "size-and-space"
|
||||
},
|
||||
{
|
||||
"title": "自定义未选中图标颜色",
|
||||
"content": "<p>可通过 <code>void-color</code> 定义未选中图标颜色。</p>\n",
|
||||
"link": "rate/not-selected-color",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "not-selected-color"
|
||||
},
|
||||
{
|
||||
"title": "自定义未选中图标类名",
|
||||
"content": "<p>可通过 <code>void-icon-class</code> 定义未选中图标类名。</p>\n",
|
||||
"link": "rate/not-selected-class",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "not-selected-class"
|
||||
},
|
||||
{
|
||||
"title": "图标下文字提示",
|
||||
"content": "<p>可通过 <code>text-on-bottom</code> 定义是否在图标下显示文字提示。</p>\n",
|
||||
"link": "rate/text-on-bottom",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "text-on-bottom"
|
||||
},
|
||||
{
|
||||
"title": "半选",
|
||||
"content": "<p>可通过 <code>allow-half</code> 定义是否支持半选。</p>\n",
|
||||
"link": "rate/allow-half",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "allow-half"
|
||||
},
|
||||
{
|
||||
"title": "禁用",
|
||||
"content": "<p>可通过 <code>disabled</code> 定义是否禁用。</p>\n",
|
||||
"link": "rate/dynamic-disable",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "dynamic-disable"
|
||||
},
|
||||
{
|
||||
"title": "分数显示",
|
||||
"content": "<p>可通过 <code>show-score score-template</code> 分别定义是否显示分数和显示的模板。</p>\n",
|
||||
"link": "rate/show-score",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "show-score"
|
||||
},
|
||||
{
|
||||
"title": "单选模式",
|
||||
"content": "<p>可通过 <code>radio</code> 设置单选模式。</p>\n",
|
||||
"link": "rate/radio-rate",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "radio-rate"
|
||||
},
|
||||
{
|
||||
"title": "最大分值",
|
||||
"content": "<p>可通过 <code>max</code> 设置最大分值。</p>\n",
|
||||
"link": "rate/max-score",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "max-score"
|
||||
},
|
||||
{
|
||||
"title": "界限值",
|
||||
"content": "<p>可通过 <code>low-threshold high-threshold</code> 分别设置下限值和上限值，通过<code>colors</code>配置显示星的颜色</p>\n",
|
||||
"link": "rate/threshold-value",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "threshold-value"
|
||||
},
|
||||
{
|
||||
"title": "事件",
|
||||
"content": "<p>监听 <code>change</code> 事件触发处理方法。</p>\n",
|
||||
"link": "rate/rate-events",
|
||||
"component": " Rate 评分",
|
||||
"findIntroStr": "Rate 快速评级，对评价进行展示。",
|
||||
"demoId": "rate-events"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -31,6 +31,22 @@
|
|||
"findIntroStr": "Steps 步骤条",
|
||||
"demoId": "text-position"
|
||||
},
|
||||
{
|
||||
"title": "底部分割线",
|
||||
"content": "<p>通过<code>show-divider</code> 设置是否显示步骤条底部分隔线，仅当节点文本内容位于序号右边时生效。</p>\n",
|
||||
"link": "steps/show-divider",
|
||||
"component": " Steps 步骤条",
|
||||
"findIntroStr": "Steps 步骤条",
|
||||
"demoId": "show-divider"
|
||||
},
|
||||
{
|
||||
"title": "当前节点描述信息",
|
||||
"content": "<p>通过<code>active-node-desc</code> 插槽添加当前节点一些自定义的描述信息。</p>\n",
|
||||
"link": "steps/slot-active-node-desc",
|
||||
"component": " Steps 步骤条",
|
||||
"findIntroStr": "Steps 步骤条",
|
||||
"demoId": "slot-active-node-desc"
|
||||
},
|
||||
{
|
||||
"title": "尺寸",
|
||||
"content": "<p>通过 <code>size</code> 设置步骤条尺寸。</p>\n",
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
import { test, expect } from '@playwright/test';
|
||||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('http://localhost:7130/pc/button-group/base');
|
||||
await page.getByText('基本用法').nth(1).click();
|
||||
await page.getByRole('button', { name: 'Button1' }).click();
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[1]')).toHaveAttribute('class', 'active');
|
||||
await page.getByRole('button', { name: 'Button2' }).click();
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[2]')).toHaveAttribute('class', 'active');
|
||||
await page.getByRole('button', { name: 'Button3' }).click();
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[3]')).toHaveAttribute('class', 'active');
|
||||
});
|
||||
test('按钮组基本示例', async ({ page }) => {
|
||||
await page.goto('http://localhost:7130/pc/button-group/base')
|
||||
await page.getByText('基本用法').nth(1).click()
|
||||
await page.getByRole('button', { name: 'Button1' }).click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[1]')).toHaveAttribute('class', 'active')
|
||||
await page.getByRole('button', { name: 'Button2' }).click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[2]')).toHaveAttribute('class', 'active')
|
||||
await page.getByRole('button', { name: 'Button3' }).click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/ul/li[3]')).toHaveAttribute('class', 'active')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button-group size="mini" :data="miniGroupData" :border="false" v-model="miniCheckedVal"></tiny-button-group>
|
||||
<span>当前选中值：{{ miniCheckedVal }}</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<tiny-button-group :data="groupData" :border="false" v-model="checkedVal"></tiny-button-group>
|
||||
<span>当前选中值：{{ checkedVal }}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { ButtonGroup } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButtonGroup: ButtonGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
miniCheckedVal: 'Button1',
|
||||
checkedVal: 'Button4',
|
||||
miniGroupData: [
|
||||
{ text: 'Button1', value: 'Button1' },
|
||||
{ text: 'Button2', value: 'Button2' },
|
||||
{ text: 'Button3', value: 'Button3' }
|
||||
],
|
||||
groupData: [
|
||||
{ text: 'Button4', value: 'Button4' },
|
||||
{ text: 'Button5', value: 'Button5' },
|
||||
{ text: 'Button6', value: 'Button6' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button-group :data="groupData" v-model="checkedVal"></tiny-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { ButtonGroup } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButtonGroup: ButtonGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkedVal: 'Button1',
|
||||
groupData: [
|
||||
{ text: 'Button1', value: 'Button1' },
|
||||
{ text: 'Button2', value: 'Button2' },
|
||||
{ text: 'Button3', value: 'Button3' },
|
||||
{ text: 'Button4', value: 'Button4' },
|
||||
{ text: 'Button5', value: 'Button5' },
|
||||
{ text: 'Button6', value: 'Button6' },
|
||||
{ text: 'Button7', value: 'Button7' },
|
||||
{ text: 'Button8', value: 'Button8' },
|
||||
{ text: 'Button9', value: 'Button9' },
|
||||
{ text: 'Button10', value: 'Button10' },
|
||||
{ text: 'Button11', value: 'Button11' },
|
||||
{ text: 'Button12', value: 'Button12' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,5 +1,10 @@
|
|||
<template>
|
||||
<tiny-button-group :data="groupData" disabled></tiny-button-group>
|
||||
<div>
|
||||
<tiny-button-group :data="groupData" disabled></tiny-button-group>
|
||||
</div>
|
||||
<div style="margin-top: 8px;">
|
||||
<tiny-button-group :data="groupData" :border="false" disabled></tiny-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
|
||||
<span>当前选中值：{{ checkedVal }}</span>
|
||||
<div>
|
||||
<tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
|
||||
<span>当前选中值：{{ checkedVal }}</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
|
||||
<span>当前选中值：{{ checkedVal }}</span>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<tiny-button-group size="medium" :data="groupData" v-model="checkedVal"></tiny-button-group>
|
||||
<span>当前选中值：{{ checkedVal }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-checkbox-button v-model="checked" text="复选框" true-label="真文本" false-label="假文本"></tiny-checkbox-button>
|
||||
<tiny-checkbox-button
|
||||
v-model="checked"
|
||||
text="复选框"
|
||||
true-label="真文本"
|
||||
false-label="假文本"
|
||||
></tiny-checkbox-button>
|
||||
<button @click="getValue">获取文本</button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div style="margin-top: 20px">
|
||||
<tiny-checkbox-group v-model="checkboxGroup" size="small">
|
||||
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
|
||||
</tiny-checkbox-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCheckboxButton: CheckboxButton,
|
||||
TinyCheckboxGroup: CheckboxGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
cities: ['上海', '北京', '广州', '深圳', '西安', '南京', '天津', '四川', '河北', '云南', '海南', '厦门'],
|
||||
checkboxGroup: ['上海']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,21 +1,28 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<div class="tiny-row">
|
||||
<tiny-checkbox-group v-model="checkboxGroup1">
|
||||
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
|
||||
</tiny-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<div class="tiny-row">
|
||||
<tiny-checkbox-group v-model="checkboxGroup2" size="medium">
|
||||
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
|
||||
</tiny-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<div class="tiny-row">
|
||||
<tiny-checkbox-group v-model="checkboxGroup3" size="small">
|
||||
<tiny-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{ city }}</tiny-checkbox-button>
|
||||
<tiny-checkbox-button v-for="city in cities" :label="city" :disabled="city === '北京'" :key="city">{{
|
||||
city
|
||||
}}</tiny-checkbox-button>
|
||||
</tiny-checkbox-group>
|
||||
</div>
|
||||
<div style="margin-top: 20px">
|
||||
<div class="tiny-row">
|
||||
<tiny-checkbox-group v-model="checkboxGroup4" size="mini">
|
||||
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
|
||||
</tiny-checkbox-group>
|
||||
</div>
|
||||
<div>
|
||||
<tiny-checkbox-group v-model="checkboxGroup4" size="mini" disabled>
|
||||
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
|
||||
</tiny-checkbox-group>
|
||||
|
|
@ -42,3 +49,8 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.tiny-row {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ export default {
|
|||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
<style scoped>
|
||||
.icon-clockWork {
|
||||
fill: var(--ti-common-color-line-active);
|
||||
font-size: 18px;
|
||||
|
|
@ -69,23 +69,23 @@ export default {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
a {
|
||||
color: #1476ff;
|
||||
position: relative;
|
||||
}
|
||||
a:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
a:first-child::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 17px;
|
||||
right: -12px;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
a:last-child {
|
||||
margin-left: 24px;
|
||||
}
|
||||
}
|
||||
.title a {
|
||||
color: #1476ff;
|
||||
position: relative;
|
||||
}
|
||||
.title a:hover {
|
||||
font-weight: bold;
|
||||
}
|
||||
.title a:first-child::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 17px;
|
||||
right: -12px;
|
||||
border-right: 1px solid rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.title a:last-child {
|
||||
margin-left: 24px;
|
||||
}
|
||||
.is-disabled a {
|
||||
color: #c2c2c2;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="boxVisibility = true">右侧弹窗</tiny-button>
|
||||
<tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息" width="30%" modal-append-to-body>
|
||||
<span>dialog-box内容</span>
|
||||
<tiny-dialog-box right-slide v-model:visible="boxVisibility" title="消息">
|
||||
<template #title>
|
||||
<div class="header">
|
||||
<span class="title">标题区</span>
|
||||
<icon-help-circle class="icon"></icon-help-circle>
|
||||
</div>
|
||||
</template>
|
||||
<span>半屏弹窗内容</span>
|
||||
<template #footer>
|
||||
<tiny-button type="primary" @click="boxVisibility = false">确 定</tiny-button>
|
||||
<tiny-button plain @click="boxVisibility = false">取消</tiny-button>
|
||||
|
|
@ -13,11 +19,13 @@
|
|||
|
||||
<script lang="jsx">
|
||||
import { Button, DialogBox } from '@opentiny/vue'
|
||||
import { iconHelpCircle } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyDialogBox: DialogBox
|
||||
TinyDialogBox: DialogBox,
|
||||
IconHelpCircle: iconHelpCircle()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -26,3 +34,21 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
margin-top: 2px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<tiny-dropdown-item>狮子头</tiny-dropdown-item>
|
||||
<tiny-dropdown-item>螺蛳粉</tiny-dropdown-item>
|
||||
<tiny-dropdown-item disabled>双皮奶</tiny-dropdown-item>
|
||||
<tiny-dropdown-item divided>蚵仔煎</tiny-dropdown-item>
|
||||
<tiny-dropdown-item>蚵仔煎</tiny-dropdown-item>
|
||||
</tiny-dropdown-menu>
|
||||
</template>
|
||||
</tiny-dropdown>
|
||||
|
|
|
|||
|
|
@ -24,19 +24,20 @@ export default {
|
|||
label: '老友粉1',
|
||||
icon: iconStarDisable(),
|
||||
children: [
|
||||
{ label: '老友粉2.1', children: [{ label: '狮子头3.1' }] },
|
||||
{ label: '老友粉2.2', divided: true },
|
||||
{
|
||||
label: '老友粉2.1',
|
||||
children: [{ label: '狮子头3.1' }]
|
||||
},
|
||||
{ label: '老友粉2.2' },
|
||||
{ label: '老友粉2.3', disabled: true }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '狮子头',
|
||||
divided: true,
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '黄金糕',
|
||||
divided: true,
|
||||
icon: iconStarDisable()
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('简化版列设置测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-customized/custom-column-simple')
|
||||
await page.locator('.tiny-select > div').click()
|
||||
await page.getByRole('listitem').filter({ hasText: '员工数' }).click()
|
||||
const thHeader = page.locator('th.tiny-grid-header__column').nth(1)
|
||||
await expect(thHeader).toContainText('名称')
|
||||
await page.getByRole('listitem').filter({ hasText: '名称' }).locator('span').nth(2).click()
|
||||
const thHeader2 = page.locator('th.tiny-grid-header__column').nth(1)
|
||||
|
||||
await expect(thHeader2).toContainText('员工数')
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('个性化排序测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-customized/custom-column-sort')
|
||||
await page.locator('.tiny-grid-custom__setting-btn').click()
|
||||
await page.getByRole('row', { name: '员工数 显示 未排序 未冻结' }).getByTitle('未排序').getByRole('img').click()
|
||||
await page.getByRole('button', { name: '确定' }).click()
|
||||
await page.waitForTimeout(200)
|
||||
const sortBtn = await page.getByRole('cell', { name: '员工数' }).getByRole('img')
|
||||
|
||||
await expect(sortBtn).toHaveClass(/tiny-grid-sort__asc-btn/)
|
||||
})
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('个性化列拖拽测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-customized/custom-column-simple')
|
||||
const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
|
||||
const thDom = page.getByRole('cell', { name: '名称' })
|
||||
// 获取初始列宽
|
||||
const { width: thWidth } = await thDom.boundingBox()
|
||||
// 获取拖拽元素位置
|
||||
const { x, y } = await draggerDom.boundingBox()
|
||||
// 开始拖拽
|
||||
await page.mouse.move(x + 2, y + 3)
|
||||
await page.waitForTimeout(200)
|
||||
await page.mouse.down()
|
||||
await page.waitForTimeout(200)
|
||||
await page.mouse.move(x + 15, y + 6)
|
||||
await page.waitForTimeout(200)
|
||||
await page.mouse.up()
|
||||
await page.waitForTimeout(200)
|
||||
// 拖拽完毕再次检测列宽
|
||||
const { width: lastThWidth } = await thDom.boundingBox()
|
||||
expect(thWidth).toBeLessThan(lastThWidth)
|
||||
// 刷新页面
|
||||
await page.reload()
|
||||
const thDom2 = page.getByRole('cell', { name: '名称' })
|
||||
const { width: thWidth2 } = await thDom2.boundingBox()
|
||||
// 检测列宽有没有保存在localstorage
|
||||
expect(thWidth2).toEqual(lastThWidth)
|
||||
})
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test.describe('手动重置列操作', () => {
|
||||
test('重置列宽', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-customized/custom-resetResizable')
|
||||
const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
|
||||
const thDom = page.getByRole('cell', { name: '名称' })
|
||||
// 获取初始列宽
|
||||
const { width: thWidth } = await thDom.boundingBox()
|
||||
// 获取拖拽元素位置
|
||||
const { x, y } = await draggerDom.boundingBox()
|
||||
// 开始拖拽
|
||||
await page.mouse.move(x + 2, y + 3)
|
||||
await page.waitForTimeout(200)
|
||||
await page.mouse.down()
|
||||
await page.waitForTimeout(200)
|
||||
await page.mouse.move(x + 15, y + 6)
|
||||
await page.waitForTimeout(200)
|
||||
await page.mouse.up()
|
||||
await page.waitForTimeout(200)
|
||||
// 拖拽完毕再次检测列宽
|
||||
const { width: lastThWidth } = await thDom.boundingBox()
|
||||
expect(thWidth).toBeLessThan(lastThWidth)
|
||||
await page.getByRole('button', { name: '重置列宽拖动操作' }).click()
|
||||
// 重置列宽
|
||||
const { width: resetWidth } = await thDom.boundingBox()
|
||||
expect(resetWidth).toEqual(thWidth)
|
||||
})
|
||||
|
||||
test('重置列隐藏', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-customized/custom-resetResizable')
|
||||
await page.locator('.tiny-grid-custom__setting-btn').click()
|
||||
await page.getByRole('row', { name: '名称 显示 未冻结' }).getByTitle('显示').getByRole('img').click()
|
||||
await page.getByRole('button', { name: '确定' }).click()
|
||||
const thHeader = page.locator('th.tiny-grid-header__column').nth(0)
|
||||
await expect(thHeader).toContainText('员工数')
|
||||
await page.getByRole('button', { name: '重置列的隐藏操作' }).click()
|
||||
const thHeader2 = page.locator('th.tiny-grid-header__column').nth(0)
|
||||
await expect(thHeader2).toContainText('名称')
|
||||
})
|
||||
})
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('单元格单击事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-cell-click-event')
|
||||
await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
|
||||
|
||||
await expect(page.getByText('单元格点击名称')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('单元格双击事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-cell-dblclick-event')
|
||||
await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
|
||||
await page.getByText('GFD科技YX公司').dblclick()
|
||||
|
||||
await expect(page.getByText('单元格双击名称')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('鼠标进入单元格事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-cell-mouseenter-event')
|
||||
await page.getByText('福州').hover()
|
||||
|
||||
await expect(page.getByText('鼠标进入单元格地址')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('行选中事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-cell-mouseleave-event')
|
||||
await page.getByText('福州').hover()
|
||||
await page.getByText('深圳福田区').hover()
|
||||
|
||||
await expect(page.getByText('鼠标离开单元格地址')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-current-change-event')
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '2 WWW科技YX公司 华南区 深圳福田区 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByText('华南区')
|
||||
.click()
|
||||
|
||||
await expect(page.getByText('触发行选中事件')).toBeVisible()
|
||||
})
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
<script>
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -68,7 +68,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleCurrentChange() {
|
||||
alert('触发行选中事件')
|
||||
Modal.message({
|
||||
message: '触发行选中事件',
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('单元格被激活编辑时会触发该事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-edit-actived-event')
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
|
||||
await expect(page.getByText('激活编辑事件')).toBeVisible()
|
||||
})
|
||||
|
|
@ -4,17 +4,12 @@
|
|||
<tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
|
||||
<tiny-grid-column
|
||||
field="introduction"
|
||||
title="公司简介"
|
||||
:editor="{ component: 'input', autoselect: true }"
|
||||
show-overflow="ellipsis"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input', autoselect: true }" show-overflow="ellipsis"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -23,7 +18,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
editActive() {
|
||||
alert('激活编辑事件')
|
||||
Modal.message({
|
||||
message: '激活编辑事件',
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('单元格编辑完成触发该事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-edit-closed-event')
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('sss')
|
||||
await page
|
||||
.locator('#preview div')
|
||||
.filter({
|
||||
hasText:
|
||||
'名称区域地址公司简介1华东区福州公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。2WWWW科技YX公司华南区深圳福田区公司技术'
|
||||
})
|
||||
.first()
|
||||
.click()
|
||||
|
||||
await expect(page.getByText('触发关闭编辑事件')).toBeVisible()
|
||||
})
|
||||
|
|
@ -4,17 +4,12 @@
|
|||
<tiny-grid-column field="name" title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="区域" :editor="{ component: 'select', options }"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
|
||||
<tiny-grid-column
|
||||
field="introduction"
|
||||
title="公司简介"
|
||||
:editor="{ component: 'input', autoselect: true }"
|
||||
show-overflow="ellipsis"
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input', autoselect: true }" show-overflow="ellipsis"></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
<script>
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -23,7 +18,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
editClosed() {
|
||||
alert('触发关闭编辑事件')
|
||||
Modal.message({
|
||||
message: '触发关闭编辑事件',
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('当单元格激活时如果是禁用状态时会触发该事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-edit-disabled-event')
|
||||
await page.getByText('点我触发禁止编辑效果').click()
|
||||
|
||||
await expect(page.getByText('激活editDisable事件')).toBeVisible()
|
||||
})
|
||||
|
|
@ -47,7 +47,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -123,7 +123,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
editDisabled() {
|
||||
alert('激活editDisable事件')
|
||||
Modal.message({
|
||||
message: '激活editDisable事件',
|
||||
status: 'info'
|
||||
})
|
||||
},
|
||||
activeMethod({ row }) {
|
||||
return row.area !== '华东区'
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('右键点击表尾单元格事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-footer-cell-context-menu-event')
|
||||
await page.getByText('3570').click()
|
||||
await expect(page.getByText('触发表尾左键点击事件')).toBeVisible()
|
||||
await page.waitForTimeout(200)
|
||||
await page.getByText('总计人数').click({
|
||||
button: 'right'
|
||||
})
|
||||
await page.waitForTimeout(200)
|
||||
|
||||
await expect(page.getByText('触发表尾右键点击事件').first()).toBeVisible()
|
||||
})
|
||||
|
|
@ -24,7 +24,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -166,10 +166,16 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
footerMenuClick() {
|
||||
alert('触发表尾右键点击事件')
|
||||
Modal.message({
|
||||
message: '触发表尾右键点击事件',
|
||||
status: 'info'
|
||||
})
|
||||
},
|
||||
footerCellClick() {
|
||||
alert('触发表尾左键点击事件')
|
||||
Modal.message({
|
||||
message: '触发表尾左键点击事件',
|
||||
status: 'info'
|
||||
})
|
||||
},
|
||||
footerMethod({ columns, data }) {
|
||||
return [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表格事件对象', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-cell-click-event')
|
||||
await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
|
||||
|
||||
await expect(page.getByText('单元格点击名称')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表格滚动事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-grid-scroll-event')
|
||||
const scrollDom = page.getByText('深圳万众科技YX公司')
|
||||
await scrollDom.scrollIntoViewIfNeeded()
|
||||
await page.waitForTimeout(20)
|
||||
|
||||
await expect(page.locator('.tiny-modal__box').first()).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表头右键点击事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-header-cell-context-menu-event')
|
||||
await page.getByText('名称').click({
|
||||
button: 'right'
|
||||
})
|
||||
|
||||
await expect(page.getByText('触发表头右键点击事件').first()).toBeVisible()
|
||||
})
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -142,7 +142,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
headerMenuClick() {
|
||||
alert('触发表头右键点击事件')
|
||||
Modal.message({
|
||||
message: '触发表头右键点击事件',
|
||||
status: 'info'
|
||||
})
|
||||
},
|
||||
visibleMethod({ options, column }) {
|
||||
const isVisible = column && (column.property === 'name' || column.property === 'area' || column.property === 'telephone')
|
||||
|
|
@ -163,11 +166,17 @@ export default {
|
|||
switch (menu.code) {
|
||||
case 'copy':
|
||||
if (row && column) {
|
||||
alert(`copy ${row}`)
|
||||
Modal.message({
|
||||
message: `copy ${row}`,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
break
|
||||
default:
|
||||
alert(`点击了 ${menu.name} 选项`)
|
||||
Modal.message({
|
||||
message: `点击了 ${menu.name} 选项`,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表头单元格单击事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-header-click-event')
|
||||
await page.getByText('名称').click()
|
||||
|
||||
await expect(page.getByText('表头单元格点击名称')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表头单元格双击事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-header-dblclick-event')
|
||||
await page.getByText('名称').dblclick()
|
||||
|
||||
await expect(page.getByText('表头单元格双击名称')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('分页发生改变前的事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-page-before-change-event')
|
||||
await page.getByRole('listitem').filter({ hasText: '2' }).click()
|
||||
|
||||
await expect(page.getByText('您确定要放弃修改吗？')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('分页发生改变事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-page-change-event')
|
||||
await page.getByRole('listitem').filter({ hasText: '2' }).click()
|
||||
|
||||
await expect(page.getByText('触发分页change事件')).toBeVisible()
|
||||
})
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn, Pager } from '@opentiny/vue'
|
||||
import { Grid, GridColumn, Pager, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -109,7 +109,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
pageChange() {
|
||||
alert('触发分页change事件')
|
||||
Modal.message({
|
||||
message: '触发分页change事件',
|
||||
status: 'info'
|
||||
})
|
||||
},
|
||||
getData({ page }) {
|
||||
let curPage = page.currentPage
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('单选选项改变', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-radio-change-event')
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '2 WWWW科技YX公司 华南区 深圳福田区 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.locator('span')
|
||||
.click()
|
||||
|
||||
await expect(page.getByText('选项改变')).toBeVisible()
|
||||
})
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
</tiny-grid>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
<script>
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -19,7 +19,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
radioChange() {
|
||||
alert('选项改变')
|
||||
Modal.message({
|
||||
message: '选项改变',
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('列宽改变事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-resizable-change-event')
|
||||
const draggerDom = page.getByRole('cell', { name: '名称' }).locator('div').nth(1)
|
||||
// 获取拖拽元素位置
|
||||
const { x, y } = await draggerDom.boundingBox()
|
||||
// 开始拖拽
|
||||
await page.mouse.move(x + 2, y + 3)
|
||||
await page.waitForTimeout(200)
|
||||
await page.mouse.down()
|
||||
await page.waitForTimeout(200)
|
||||
await page.mouse.move(x + 15, y + 6)
|
||||
await page.waitForTimeout(200)
|
||||
await page.mouse.up()
|
||||
await page.waitForTimeout(200)
|
||||
|
||||
await expect(page.getByText('列宽发生了变化')).toBeVisible()
|
||||
})
|
||||
|
|
@ -9,8 +9,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
<script>
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -19,7 +19,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
sizeChange() {
|
||||
alert('列宽发生了变化')
|
||||
Modal.message({
|
||||
message: '列宽发生了变化',
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('手动勾选全选时触发的事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-select-all-event')
|
||||
await page.getByRole('row', { name: '名称 所属区域 地址 公司简介' }).locator('span').click()
|
||||
|
||||
await expect(page.getByText('触发全选事件')).toBeVisible()
|
||||
})
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
<script>
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -20,7 +20,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
selectAll() {
|
||||
alert('触发全选事件')
|
||||
Modal.message({
|
||||
message: '触发全选事件',
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,14 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('复选选项改变事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-select-change-event')
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: 'WWWW科技YX公司 华南区 深圳福田区 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.locator('span')
|
||||
.click()
|
||||
|
||||
await expect(page.getByText('选项改变了')).toBeVisible()
|
||||
})
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
<script>
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -20,7 +20,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
selectChange() {
|
||||
alert('选项改变了')
|
||||
Modal.message({
|
||||
message: '选项改变了',
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('多个表格联动测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-table-data-association')
|
||||
await page.getByText('GFD科技YX公司').first().click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('ss')
|
||||
await page
|
||||
.locator('#preview div')
|
||||
.filter({
|
||||
hasText:
|
||||
'名称区域地址公司简介1华东区福州公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。2WWWW科技YX公司华南区深圳福田区公司技术'
|
||||
})
|
||||
.first()
|
||||
.click()
|
||||
|
||||
await expect(page.getByText('ss').nth(2)).toBeVisible()
|
||||
})
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('行展开收起事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-toggle-expand-change-event')
|
||||
await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('i').nth(1).click()
|
||||
|
||||
await expect(page.getByText('当前展开行：1')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('树节点展开收起事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-toggle-tree-change-event')
|
||||
await page.getByRole('cell', { name: '1' }).locator('i').click()
|
||||
|
||||
await expect(page.getByText('触树展开事件')).toBeVisible()
|
||||
})
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
import { Grid, GridColumn } from '@opentiny/vue'
|
||||
<script>
|
||||
import { Grid, GridColumn, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -41,7 +41,10 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
expandTree() {
|
||||
alert('触树展开事件')
|
||||
Modal.message({
|
||||
message: '触树展开事件',
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
},
|
||||
data() {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,15 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('校验不通过事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/event-valid-error-event')
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('')
|
||||
|
||||
await expect(page.getByText('触发校验不通过事件').first()).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('检查当前行是否展开', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-nested-grid/expand-hasRowExpand')
|
||||
await page.getByRole('row', { name: '1 GFD科技YX公司 华东区 800' }).locator('i').click()
|
||||
await page.locator('div').filter({ hasText: '当前展开行：1' }).nth(1).click()
|
||||
|
||||
await expect(page.locator('div:nth-child(2) > svg')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('弹窗框中表格编辑器失焦功能测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-faq/faq-gridInDialogBox')
|
||||
await page.getByRole('button', { name: '弹出Dialogfalse' }).click()
|
||||
await page.getByText('GFD科技有限公司').click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('ss')
|
||||
await page.getByText('消息').click()
|
||||
|
||||
await expect(page.getByText('ss')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('配置式表格使用插槽测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-faq/faq-opSlot')
|
||||
await page.getByText('800').click()
|
||||
const span = page.getByText('800')
|
||||
const hasStyleAttr = await span.evaluate((span) => span.hasAttribute('style'))
|
||||
|
||||
await expect(hasStyleAttr).toBe(true)
|
||||
})
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('常见问题--表格列头与单元格错位测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-faq/faq-unbalanced')
|
||||
const firstThDom = page.getByRole('cell', { name: 'test1', exact: true })
|
||||
const firstTdDom = page.locator('td:nth-child(3)').first()
|
||||
const { x } = await firstThDom.boundingBox()
|
||||
const { x: x1 } = await firstTdDom.boundingBox()
|
||||
|
||||
await expect(x).toEqual(x1)
|
||||
})
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('动态生成列测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-dynamically-columns/grid_Example-dynamicallyColumns')
|
||||
await page.getByRole('textbox').nth(2).click()
|
||||
await page.getByText('三月').first().click()
|
||||
await page.getByText('四月').first().click()
|
||||
const firstTh = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[1]/div[2]/table/thead/tr[1]/th[2]')
|
||||
|
||||
await expect(firstTh).toContainText('3')
|
||||
})
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('提交前校验', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-before-submit-validation')
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('')
|
||||
await page.getByRole('button', { name: '保存' }).click()
|
||||
|
||||
await expect(page.getByText('校验不通过')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('自定义组件与插槽编辑器校验', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-custcomp')
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。 1234567890'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('')
|
||||
|
||||
await expect(page.getByRole('tooltip', { name: '必填' })).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('隐藏列编辑时校验', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-editing-isvalidalways-validation')
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('cell')
|
||||
.nth(1)
|
||||
.click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('')
|
||||
|
||||
await expect(page.getByRole('tooltip', { name: '名称必填' })).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表格校验', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-editing-validation')
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('')
|
||||
|
||||
await expect(page.getByRole('tooltip', { name: '名称必填' })).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('数据关联校验', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-row-data-valid')
|
||||
await page.getByTitle('点击在vscode中打开').getByRole('img').click()
|
||||
await page.getByText('70').click()
|
||||
await page.getByRole('row', { name: '1 100 0' }).getByRole('textbox').fill('700')
|
||||
|
||||
await expect(page.getByRole('tooltip', { name: '数值不能大于100' })).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('选中时校验', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-select-validation')
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('')
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.locator('span')
|
||||
.click()
|
||||
await page.getByRole('button', { name: '校验选中数据' }).click()
|
||||
|
||||
await expect(page.getByText('校验不通过')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('触发校验时自动定位到当前校验的单元格', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-validation/grid_Example-gridValid-validation-scroll-to-col')
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByRole('textbox')
|
||||
.fill('')
|
||||
await page.getByText('名称', { exact: true }).click()
|
||||
const lastColumn = page
|
||||
.getByRole('row', {
|
||||
name: '1 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.getByText('公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。')
|
||||
await lastColumn.scrollIntoViewIfNeeded()
|
||||
await page.getByRole('button', { name: '保存' }).click()
|
||||
await page.waitForTimeout(200)
|
||||
|
||||
await expect(page.getByRole('cell', { name: 'WWW科技YX公司' })).toBeInViewport()
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('嵌套表格场景测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-nested-grid/grid_Example-nestedGrid')
|
||||
await page.getByRole('row', { name: '1 800 2014-04-30 00:56:00 福州' }).locator('i').click()
|
||||
|
||||
await expect(
|
||||
page.locator('//*[@id="preview"]/div[2]/div[2]/div/div[2]/div[3]/table/tbody/tr[1]/td[3]/div/span')
|
||||
).toHaveClass(/expand__active/)
|
||||
})
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表格反转测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-reverse-column-row/grid_Example-reverseRow')
|
||||
await page.getByRole('button', { name: '表格反转' }).click()
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
|
||||
await expect(
|
||||
page.getByText('公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。').nth(4)
|
||||
).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('键盘按键配置项测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-keyboard/keyboard-config')
|
||||
await page.getByText('GFD科技YX公司').click()
|
||||
await page.waitForTimeout(1000)
|
||||
await page.locator('body').press('ArrowDown')
|
||||
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div[3]/table/tbody/tr[2]/td[2]')).toHaveClass(
|
||||
/col__selected/
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('键盘导航测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-keyboard/keyboard-navigation')
|
||||
await page.getByRole('cell', { name: 'GFD科技YX公司' }).click()
|
||||
await page.waitForTimeout(1000)
|
||||
await page.locator('body').press('ArrowDown')
|
||||
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div[3]/table/tbody/tr[2]/td[2]')).toHaveClass(
|
||||
/col__selected/
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('设置展开所有行测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-nested-grid/methods-set-all-row-expansion')
|
||||
await page.getByRole('button', { name: 'setAllRowExpansion' }).click()
|
||||
|
||||
await expect(
|
||||
page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div/div[3]/table/tbody/tr[1]/td[3]/div/span')
|
||||
).toHaveClass(/expand__active/)
|
||||
})
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('手动展开所有树节点', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-tree-grid/methods-set-all-tree-expansion')
|
||||
await page.getByRole('button', { name: 'setAllTreeExpansion' }).click()
|
||||
|
||||
await expect(page.getByRole('row', { name: 'GFD科技股份有限子公司 华东区 700' })).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('设置指定展开行', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-nested-grid/methods-set-row-expansion')
|
||||
await page.getByRole('button', { name: 'setRowExpansion' }).click()
|
||||
|
||||
await expect(
|
||||
page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div/div[3]/table/tbody/tr[3]/td[3]/div/span')
|
||||
).toHaveClass(/expand__active/)
|
||||
})
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('切换展开行测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-nested-grid/methods-toggle-row-expansion')
|
||||
await page.getByRole('button', { name: 'toggleRowExpansion' }).click()
|
||||
const expandIcon = await page.locator(
|
||||
'//*[@id="preview"]/div[2]/div[2]/div/div/div/div[3]/table/tbody/tr[2]/td[3]/div/span'
|
||||
)
|
||||
|
||||
await expect(expandIcon).toHaveClass(/expand__active/)
|
||||
await page.getByRole('button', { name: 'toggleRowExpansion' }).click()
|
||||
|
||||
await expect(expandIcon).not.toHaveClass(/expand__active/)
|
||||
})
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('树表切换展开行测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-tree-grid/methods-toggle-tree-expansion')
|
||||
await page.getByRole('button', { name: 'toggleTreeExpansion' }).click()
|
||||
await page.getByRole('row', { name: 'WWWW科技股份有限子公司 华南区 720' }).locator('label span').click()
|
||||
const toggleIcon = page.locator(
|
||||
'//*[@id="preview"]/div[2]/div[2]/div/div/div/div[3]/table/tbody/tr[2]/td[1]/div/span[2]'
|
||||
)
|
||||
|
||||
await expect(toggleIcon).toHaveClass(/is__active/)
|
||||
await page.getByRole('button', { name: 'toggleTreeExpansion' }).click()
|
||||
|
||||
await expect(toggleIcon).not.toHaveClass(/is__active/)
|
||||
})
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表格组件鼠标配置项测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-keyboard/mouse-config')
|
||||
await page.getByText('WWWW科技YX公司').click()
|
||||
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div[3]/table/tbody/tr[2]/td[2]')).toHaveClass(
|
||||
/col__selected/
|
||||
)
|
||||
})
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('工具栏插槽', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-slot/slot-buttons-slot')
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.locator('span')
|
||||
.click()
|
||||
await page.getByRole('button', { name: '删除', exact: true }).click()
|
||||
const firstTr = page.locator('//*[@id="preview"]/div[2]/div[2]/div/div/div[2]/div[3]/table/tbody/tr[1]')
|
||||
|
||||
await expect(firstTr).toContainText('WWWW科技YX公司')
|
||||
})
|
||||
|
|
@ -1,11 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-grid
|
||||
ref="basicGrid"
|
||||
:data="tableData"
|
||||
@toolbar-button-click="toolbarButtonClickEvent"
|
||||
:edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }"
|
||||
>
|
||||
<tiny-grid ref="basicGrid" :data="tableData" @toolbar-button-click="toolbarButtonClickEvent" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }">
|
||||
<template #toolbar>
|
||||
<tiny-grid-toolbar :buttons="toolbarButtons"></tiny-grid-toolbar>
|
||||
</template>
|
||||
|
|
@ -14,17 +9,12 @@
|
|||
<tiny-grid-column field="name" show-overflow title="名称" :editor="{ component: 'input', autoselect: true }"></tiny-grid-column>
|
||||
<tiny-grid-column field="area" title="区域" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column field="address" title="地址" :editor="{ component: 'input' }"></tiny-grid-column>
|
||||
<tiny-grid-column
|
||||
field="introduction"
|
||||
title="公司简介"
|
||||
:editor="{ component: 'input', autoselect: true }"
|
||||
show-overflow
|
||||
></tiny-grid-column>
|
||||
<tiny-grid-column field="introduction" title="公司简介" :editor="{ component: 'input', autoselect: true }" show-overflow></tiny-grid-column>
|
||||
</tiny-grid>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Grid, GridColumn, GridToolbar } from '@opentiny/vue'
|
||||
import { Modal } from '@opentiny/vue-modal'
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表格默认插槽', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-slot/slot-default-slot')
|
||||
const cell = await page.getByRole('cell', { name: 'GFD科技YX公司' }).getByText('GFD科技YX公司')
|
||||
|
||||
await expect(cell).toHaveCSS('color', 'rgb(255, 192, 203)')
|
||||
})
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
<tiny-grid-column field="name" title="名称">
|
||||
<template #default="data">
|
||||
<tiny-tooltip class="item" effect="dark" :content="data.row.name" placement="top-start">
|
||||
<span>{{ data.row.name }}</span>
|
||||
<span style="color:pink">{{ data.row.name }}</span>
|
||||
</tiny-tooltip>
|
||||
</template>
|
||||
</tiny-grid-column>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('暂无数据插槽', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-slot/slot-empty-slot')
|
||||
const emptyDom = page.locator('.tiny-grid__empty-block')
|
||||
|
||||
await expect(emptyDom).toContainText('暂无数据')
|
||||
})
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('表格导出功能测试', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-import-export/tiny-first-menu-export-excel')
|
||||
const downloadPromise = page.waitForEvent('download')
|
||||
await page.getByRole('button', { name: '导出数据' }).click()
|
||||
const download = await downloadPromise
|
||||
// 检查文件是否被下载并含有名称table.csv
|
||||
await expect(download._suggestedFilename).toBe('table.csv')
|
||||
await page.getByRole('button', { name: '清空数据' }).click()
|
||||
|
||||
await expect(page.getByText('暂无数据')).toBeVisible()
|
||||
})
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('获取表格行方法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('http://localhost:7130/pc/grid-event/tiny-first-menu-get-row-method')
|
||||
await page
|
||||
.getByRole('row', {
|
||||
name: '1 GFD科技YX公司 华东区 福州 公司技术和研发实力雄厚，是国家863项目的参与者，并被政府认定为“高新技术企业”。'
|
||||
})
|
||||
.locator('span')
|
||||
.click()
|
||||
await page.getByRole('button', { name: '当前行', exact: true }).click()
|
||||
|
||||
await expect(
|
||||
page.getByText('当前行数据是：{"id":"1","name":"GFD科技YX公司","area":"华东区","address":"福州","introduction":"')
|
||||
).toBeVisible()
|
||||
await page.getByRole('button', { name: '确认' }).click()
|
||||
await page.getByRole('button', { name: '当前行号' }).click()
|
||||
|
||||
await expect(page.getByText('当前选中行号是：0')).toBeVisible()
|
||||
await page.getByRole('button', { name: '确认' }).click()
|
||||
await page.getByRole('button', { name: 'Radio单选选中行' }).click()
|
||||
|
||||
await expect(
|
||||
page.getByText('单选选中行数据是：{"id":"1","name":"GFD科技YX公司","area":"华东区","address":"福州","introduction"')
|
||||
).toBeVisible()
|
||||
await page.getByRole('button', { name: '确认' }).click()
|
||||
await page.getByRole('button', { name: 'rowId获取当前行' }).click()
|
||||
|
||||
await expect(
|
||||
page.getByText('根据 rowId 获取的当前行：{"id":"1","name":"GFD科技YX公司","area":"华东区","address":"福州","introd')
|
||||
).toBeVisible()
|
||||
await page.getByRole('button', { name: '确认' }).click()
|
||||
await page.getByRole('button', { name: 'tr元素获取行信息' }).click()
|
||||
|
||||
await expect(
|
||||
page.getByText(
|
||||
'根据 tr 元素获取对应的 row 信息：{"item":{"id":"1","name":"GFD科技YX公司","area":"华东区","address"'
|
||||
)
|
||||
).toBeVisible()
|
||||
})
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue