forked from opentiny/tiny-vue
Merge branch 'dev' of github.com:opentiny/tiny-vue into sync-3.18.0-to-dev
This commit is contained in:
ajaxzheng
commit
0236d0807f
|
|
@ -618,6 +618,15 @@
|
|||
"contributions": [
|
||||
"tool"
|
||||
]
|
||||
},
|
||||
{
|
||||
"login": "Nowitzki41",
|
||||
"name": "Nowitzki41",
|
||||
"avatar_url": "https://avatars.githubusercontent.com/u/22088253?v=4",
|
||||
"profile": "https://github.com/Nowitzki41",
|
||||
"contributions": [
|
||||
"code"
|
||||
]
|
||||
}
|
||||
],
|
||||
"contributorsPerLine": 8,
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
blank_issues_enabled: true
|
||||
contact_links:
|
||||
- name: Questions or need help
|
||||
url: https://github.com/opentiny/ui-vue/discussions
|
||||
url: https://github.com/opentiny/tiny-vue/discussions
|
||||
about: Add this WeChat(opentiny-official), we will invite you to the WeChat discussion group later.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
labels:
|
||||
- label: 'enhancement'
|
||||
sync: true
|
||||
matcher:
|
||||
title: '^feat.*: ?.*'
|
||||
commit: '^feat.*: ?.*'
|
||||
- label: 'bug'
|
||||
sync: true
|
||||
matcher:
|
||||
title: '^fix.*: ?.*'
|
||||
commit: '^fix.*: ?.*'
|
||||
- label: 'documentation'
|
||||
sync: true
|
||||
matcher:
|
||||
title: '^docs?: ?.*'
|
||||
commit: '^docs?: ?.*'
|
||||
- label: 'refactoring'
|
||||
sync: true
|
||||
matcher:
|
||||
title: '^refactor.*: ?.*'
|
||||
commit: '^refactor.*: ?.*'
|
||||
- label: 'chore'
|
||||
sync: true
|
||||
matcher:
|
||||
title: '^chore.*: ?.*'
|
||||
commit: '^chore.*: ?.*'
|
||||
- label: 'ospp-2024'
|
||||
sync: true
|
||||
matcher:
|
||||
baseBranch: '^ospp-2024/.*'
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
name: Auto Label (Pull Request)
|
||||
|
||||
on:
|
||||
pull_request_target:
|
||||
types: [opened, edited]
|
||||
|
||||
permissions:
|
||||
contents: read
|
||||
pull-requests: write
|
||||
|
||||
jobs:
|
||||
label:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: fuxingloh/multi-labeler@v4.0.0
|
||||
with:
|
||||
github-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
config-path: .github/labeler.yaml
|
||||
|
|
@ -64,6 +64,8 @@ packages/theme/scripts/theme-result.txt
|
|||
packages/theme/scripts/themeExcel.xlsx
|
||||
|
||||
packages/theme/src/theme/*-theme/component.js
|
||||
packages/theme/src/aurora-theme
|
||||
packages/theme/src/smb-theme
|
||||
|
||||
pnpm-lock.yaml
|
||||
gulp/bundle.json
|
||||
|
|
|
|||
|
|
@ -169,6 +169,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
|
|||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/trueLoving"><img src="https://avatars.githubusercontent.com/u/44056372?v=4?s=100" width="100px;" alt="Aoi Kaze"/><br /><sub><b>Aoi Kaze</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=trueLoving" title="Tests">⚠️</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="http://simonhe.me"><img src="https://avatars.githubusercontent.com/u/57086651?v=4?s=100" width="100px;" alt="Simon He"/><br /><sub><b>Simon He</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Simon-He95" title="Documentation">📖</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://study.linlove.cn/"><img src="https://avatars.githubusercontent.com/u/44194929?v=4?s=100" width="100px;" alt="zhangpaopao"/><br /><sub><b>zhangpaopao</b></sub></a><br /><a href="#tool-zhangpaopao0609" title="Tools">🔧</a></td>
|
||||
<td align="center" valign="top" width="12.5%"><a href="https://github.com/Nowitzki41"><img src="https://avatars.githubusercontent.com/u/22088253?v=4?s=100" width="100px;" alt="Nowitzki41"/><br /><sub><b>Nowitzki41</b></sub></a><br /><a href="https://github.com/opentiny/tiny-vue/commits?author=Nowitzki41" title="Code">💻</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
package-lock.json
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
# Blocks
|
||||
|
||||
使用 TinyVue 组件搭建出来的区块。
|
||||
|
||||
## 本启启动
|
||||
|
||||
```shell
|
||||
pnpm i
|
||||
pnpm -F blocks dev
|
||||
```
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
/* eslint-disable */
|
||||
/* prettier-ignore */
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
export {}
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
RouterLink: (typeof import('vue-router'))['RouterLink']
|
||||
RouterView: (typeof import('vue-router'))['RouterView']
|
||||
TinyActionSheet: (typeof import('@opentiny/vue'))['ActionSheet']
|
||||
TinyAlert: (typeof import('@opentiny/vue'))['Alert']
|
||||
TinyBaseSelect: (typeof import('@opentiny/vue'))['BaseSelect']
|
||||
TinyButton: (typeof import('@opentiny/vue'))['Button']
|
||||
TinyCascaderSelect: (typeof import('@opentiny/vue'))['CascaderSelect']
|
||||
TinyCell: (typeof import('@opentiny/vue'))['Cell']
|
||||
TinyCheckbox: (typeof import('@opentiny/vue'))['Checkbox']
|
||||
TinyCheckboxGroup: (typeof import('@opentiny/vue'))['CheckboxGroup']
|
||||
TinyCol: (typeof import('@opentiny/vue'))['Col']
|
||||
TinyCustomSwitch: (typeof import('@opentiny/vue'))['CustomSwitch']
|
||||
TinyDialogBox: (typeof import('@opentiny/vue'))['DialogBox']
|
||||
TinyDropdown: (typeof import('@opentiny/vue'))['Dropdown']
|
||||
TinyDropdownItem: (typeof import('@opentiny/vue'))['DropdownItem']
|
||||
TinyDropdownMenu: (typeof import('@opentiny/vue'))['DropdownMenu']
|
||||
TinyException: (typeof import('@opentiny/vue'))['Exception']
|
||||
TinyFilterBox: (typeof import('@opentiny/vue'))['FilterBox']
|
||||
TinyGrid: (typeof import('@opentiny/vue'))['Grid']
|
||||
TinyGridColumn: (typeof import('@opentiny/vue'))['GridColumn']
|
||||
TinyInput: (typeof import('@opentiny/vue'))['Input']
|
||||
TinyLayout: (typeof import('@opentiny/vue'))['Layout']
|
||||
TinyModal: (typeof import('@opentiny/vue'))['Modal']
|
||||
TinyOption: (typeof import('@opentiny/vue'))['Option']
|
||||
TinyOptionGroup: (typeof import('@opentiny/vue'))['OptionGroup']
|
||||
TinyPager: (typeof import('@opentiny/vue'))['Pager']
|
||||
TinyPopover: (typeof import('@opentiny/vue'))['Popover']
|
||||
TinyRadio: (typeof import('@opentiny/vue'))['Radio']
|
||||
TinyRadioGroup: (typeof import('@opentiny/vue'))['RadioGroup']
|
||||
TinyRecycleScroller: (typeof import('@opentiny/vue'))['RecycleScroller']
|
||||
TinyRow: (typeof import('@opentiny/vue'))['Row']
|
||||
TinySearch: (typeof import('@opentiny/vue'))['Search']
|
||||
TinySelect: (typeof import('@opentiny/vue'))['Select']
|
||||
TinySelectedBox: (typeof import('@opentiny/vue'))['SelectedBox']
|
||||
TinySplit: (typeof import('@opentiny/vue'))['Split']
|
||||
TinyTabItem: (typeof import('@opentiny/vue'))['TabItem']
|
||||
TinyTabs: (typeof import('@opentiny/vue'))['Tabs']
|
||||
TinyTagGroup: (typeof import('@opentiny/vue'))['TagGroup']
|
||||
TinyTimePickerMobile: (typeof import('@opentiny/vue'))['TimePickerMobile']
|
||||
TinyTooltip: (typeof import('@opentiny/vue'))['Tooltip']
|
||||
TinyTree: (typeof import('@opentiny/vue'))['Tree']
|
||||
TinyUserHead: (typeof import('@opentiny/vue'))['UserHead']
|
||||
}
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>FluentEditor</title>
|
||||
<title>TinyVue 区块</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "fluent-editor-docs",
|
||||
"name": "blocks",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
|
|
@ -9,10 +9,11 @@
|
|||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@opentiny/fluent-editor": "workspace:^",
|
||||
"@opentiny/vue": "~3.18.0",
|
||||
"vue": "^3.3.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@opentiny/unplugin-tiny-vue": "~0.0.2",
|
||||
"@vitejs/plugin-vue": "^4.5.2",
|
||||
"typescript": "^5.2.2",
|
||||
"vite": "^5.0.8",
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<script setup lang="ts">
|
||||
import BlockDemo from './blocks/BlockDemo.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<BlockDemo />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
<script setup lang="ts"></script>
|
||||
|
||||
<template>
|
||||
<tiny-button>确定</tiny-button>
|
||||
<tiny-alert description="描述信息"></tiny-alert>
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import autoImportPlugin from '@opentiny/unplugin-tiny-vue'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [vue(), autoImportPlugin('vite')],
|
||||
resolve: {
|
||||
alias: [
|
||||
// XDesign 主题
|
||||
{
|
||||
find: /\@opentiny\/vue-theme\/(?!(smb))/,
|
||||
replacement: '@opentiny/vue-theme/smb-theme/'
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
export default {
|
||||
mode: ['pc'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
apis: [
|
||||
{
|
||||
name: 'anchor',
|
||||
|
|
@ -15,8 +15,9 @@ export default {
|
|||
'en-US':
|
||||
'When used in single page hash routing mode, specify the id value of the scrolling container. If the id is empty, the scrolling container defaults to the body element of the root node of the HTML document'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'set-container'
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'set-container',
|
||||
mfDemo: 'set-container'
|
||||
},
|
||||
{
|
||||
name: 'is-affix',
|
||||
|
|
@ -26,8 +27,9 @@ export default {
|
|||
'zh-CN': '固定模式',
|
||||
'en-US': 'Fixed mode'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'is-affix'
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'is-affix',
|
||||
mfDemo: 'set-container'
|
||||
},
|
||||
{
|
||||
name: 'links',
|
||||
|
|
@ -38,8 +40,9 @@ export default {
|
|||
'zh-CN': '导航数据配置项，可通过 children 嵌套',
|
||||
'en-US': 'Navigation data configuration items can be nested through children'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'basic-usage',
|
||||
mfDemo: 'set-container'
|
||||
},
|
||||
{
|
||||
name: 'mark-class',
|
||||
|
|
@ -49,8 +52,9 @@ export default {
|
|||
'zh-CN': '自定义滚动的目标元素类名',
|
||||
'en-US': 'Class name of the customized scrolling target element'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'set-container'
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'set-container',
|
||||
mfDemo: 'set-container'
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
|
|
@ -60,8 +64,9 @@ export default {
|
|||
'zh-CN': '锚点类型',
|
||||
'en-US': 'Anchor type'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'basic-usage',
|
||||
mfDemo: 'set-container'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
@ -73,8 +78,9 @@ export default {
|
|||
'zh-CN': '锚点链接改变事件',
|
||||
'en-US': 'Anchor link change event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'change'
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'change',
|
||||
mfDemo: 'set-container'
|
||||
},
|
||||
{
|
||||
name: 'link-click',
|
||||
|
|
@ -84,8 +90,9 @@ export default {
|
|||
'zh-CN': '锚点点击事件',
|
||||
'en-US': 'Anchor click event'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'set-container'
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'set-container',
|
||||
mfDemo: 'set-container'
|
||||
},
|
||||
{
|
||||
name: 'on-change',
|
||||
|
|
|
|||
|
|
@ -181,8 +181,8 @@ export default {
|
|||
'zh-CN': '自定义数据为空时展示内容',
|
||||
'en-US': 'customize content when data is empty'
|
||||
},
|
||||
metaData: {
|
||||
new: '3.17.0'
|
||||
meta: {
|
||||
stable: '3.17.0'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'slot-empty'
|
||||
|
|
|
|||
|
|
@ -145,7 +145,7 @@ export default {
|
|||
type: "'medium' | 'small' | 'mini'",
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': 'checkbox 的尺寸，仅在 border 为真时有效',
|
||||
'zh-CN': 'checkbox 的尺寸，仅在 border 为true时有效',
|
||||
'en-US': 'Checkbox size. This parameter is valid only when border is set to true'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
|
|
|
|||
|
|
@ -8,10 +8,10 @@ export default {
|
|||
{
|
||||
name: 'aspect-ratio',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
defaultValue: '16 / 9',
|
||||
desc: {
|
||||
'zh-CN': '裁剪框的宽高比;默认为 16 / 9',
|
||||
'en-US': 'Aspect-to-height ratio of the crop box; The default value is 16 / 9'
|
||||
'zh-CN': '裁剪框的宽高比',
|
||||
'en-US': 'Aspect-to-height ratio of the crop box'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'aspect-ratio'
|
||||
|
|
@ -19,11 +19,10 @@ export default {
|
|||
{
|
||||
name: 'auto-crop',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '初始化时，是否自动显示裁剪框;默认为 true',
|
||||
'en-US':
|
||||
'Indicates whether to automatically display the crop box during initialization. The default value is true'
|
||||
'zh-CN': '初始化时，是否自动显示裁剪框',
|
||||
'en-US': 'Indicates whether to automatically display the crop box during initialization'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'auto-crop-area'
|
||||
|
|
@ -31,10 +30,10 @@ export default {
|
|||
{
|
||||
name: 'auto-crop-area',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
defaultValue: '0.8',
|
||||
desc: {
|
||||
'zh-CN': '定义自动裁剪面积大小（百分比）;默认为 0.8',
|
||||
'en-US': 'Defines the automatic cropping area size (percentage). The default value is 0.8'
|
||||
'zh-CN': '定义自动裁剪面积大小（百分比）',
|
||||
'en-US': 'Defines the automatic cropping area size (percentage)'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'auto-crop-area'
|
||||
|
|
@ -42,10 +41,10 @@ export default {
|
|||
{
|
||||
name: 'background',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示容器的网格背景;默认为 true',
|
||||
'en-US': 'Whether to display the grid background of the container; The default value is true'
|
||||
'zh-CN': '是否显示容器的网格背景',
|
||||
'en-US': 'Whether to display the grid background of the container'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'no-background'
|
||||
|
|
@ -53,10 +52,10 @@ export default {
|
|||
{
|
||||
name: 'center',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '裁剪框是否在图片正中心;默认为 true',
|
||||
'en-US': 'Whether the cropping frame is in the center of the image; The default value is true'
|
||||
'zh-CN': '裁剪框是否在图片正中心,并显示一个 + 号',
|
||||
'en-US': 'Whether the cropping frame is in the center of the image'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'aspect-ratio'
|
||||
|
|
@ -64,11 +63,10 @@ export default {
|
|||
{
|
||||
name: 'crop-type',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
defaultValue: 'base64',
|
||||
desc: {
|
||||
'zh-CN': '设置图片裁剪后返回的类型，可配置为 blob 和 base64，默认为 base64',
|
||||
'en-US':
|
||||
'Type of the image that is returned after cropping. The value can be blob or base64. The default value is base64'
|
||||
'zh-CN': '设置图片裁剪后返回的类型，可配置为 blob 和 base64',
|
||||
'en-US': 'Type of the image that is returned after cropping. The value can be blob or base64'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'get-cropped-canvas'
|
||||
|
|
@ -76,10 +74,10 @@ export default {
|
|||
{
|
||||
name: 'cropvisible',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '设置裁剪弹框是否可见;默认为 false',
|
||||
'en-US': 'Set whether the cropping dialog box is visible. The default value is false'
|
||||
'zh-CN': '设置裁剪弹框是否可见',
|
||||
'en-US': 'Set whether the cropping dialog box is visible'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
|
|
@ -87,12 +85,12 @@ export default {
|
|||
{
|
||||
name: 'drag-mode',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
defaultValue: 'crop',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
"定义 cropper 的拖拽模式;默认为 'crop';'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理",
|
||||
"定义 cropper 的拖拽模式;'crop'： 可以产生一个新的裁剪框 3 。'move'：只可以移动图片 3 。'none'： 什么也不处理",
|
||||
'en-US':
|
||||
"Defines the drag mode of the cropper. The default value is'crop'. 'Crop': A new crop box 3 can be generated. 'move': Only image 3 can be moved. 'none': no action is required"
|
||||
"Defines the drag mode of the cropper.'Crop': A new crop box 3 can be generated. 'move': Only image 3 can be moved. 'none': no action is required"
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'drag-mode'
|
||||
|
|
@ -100,10 +98,10 @@ export default {
|
|||
{
|
||||
name: 'guides',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否在裁剪框上方显示虚线;默认为 true',
|
||||
'en-US': 'Whether to display dotted lines above the crop box; The default value is true'
|
||||
'zh-CN': '是否在裁剪框上方显示虚线',
|
||||
'en-US': 'Whether to display dotted lines above the crop box;'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'no-guides'
|
||||
|
|
@ -111,11 +109,10 @@ export default {
|
|||
{
|
||||
name: 'max-size',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
defaultValue: '1M',
|
||||
desc: {
|
||||
'zh-CN': '设置待裁剪图片的最大大小，默认为 1M ;默认为 1M',
|
||||
'en-US':
|
||||
'Set the maximum size of the image to be cropped. The default value is 1 MB. The default value is 1M'
|
||||
'zh-CN': '设置待裁剪图片的最大大小，默认为 1M',
|
||||
'en-US': 'Set the maximum size of the image to be cropped'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
|
|
@ -123,10 +120,10 @@ export default {
|
|||
{
|
||||
name: 'min-container-height',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
defaultValue: '300',
|
||||
desc: {
|
||||
'zh-CN': '容器的最小高度;默认为 300',
|
||||
'en-US': 'Minimum height of a container; The default value is 300'
|
||||
'zh-CN': '容器的最小高度',
|
||||
'en-US': 'Minimum height of a container'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
|
|
@ -134,10 +131,10 @@ export default {
|
|||
{
|
||||
name: 'min-container-width',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
defaultValue: '652',
|
||||
desc: {
|
||||
'zh-CN': '容器的最小宽度;默认为 652',
|
||||
'en-US': 'Minimum width of a container; The default value is 652'
|
||||
'zh-CN': '容器的最小宽度',
|
||||
'en-US': 'Minimum width of a container'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
|
|
@ -145,10 +142,10 @@ export default {
|
|||
{
|
||||
name: 'min-crop-box-height',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
defaultValue: '0',
|
||||
desc: {
|
||||
'zh-CN': '裁剪层的最小高度;默认为 0',
|
||||
'en-US': 'Minimum height of the crop layer; The default value is 0'
|
||||
'zh-CN': '裁剪层的最小高度',
|
||||
'en-US': 'Minimum height of the crop layer'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
|
|
@ -156,10 +153,10 @@ export default {
|
|||
{
|
||||
name: 'min-crop-box-width',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
defaultValue: '0',
|
||||
desc: {
|
||||
'zh-CN': '裁剪层的最小宽度;默认为 0',
|
||||
'en-US': 'Minimum width of the cropping layer; The default value is 0'
|
||||
'zh-CN': '裁剪层的最小宽度',
|
||||
'en-US': 'Minimum width of the cropping layer'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'min-crop-box-width-height'
|
||||
|
|
@ -167,11 +164,10 @@ export default {
|
|||
{
|
||||
name: 'modal',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否显示图片上方裁剪框下方的黑色模态;默认为 true',
|
||||
'en-US':
|
||||
'Whether to display the black mode below the cropping box above the image; The default value is true'
|
||||
'zh-CN': '是否显示图片上方裁剪框下方的黑色模态',
|
||||
'en-US': 'Whether to display the black mode below the cropping box above the image'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'no-modal'
|
||||
|
|
@ -179,33 +175,21 @@ export default {
|
|||
{
|
||||
name: 'movable',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否允许可以移动后面的图片;默认为 true',
|
||||
'en-US': 'Indicates whether the image can be moved. The default value is true'
|
||||
'zh-CN': '是否允许可以移动后面的图片',
|
||||
'en-US': 'Indicates whether the image can be moved'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'drag-mode'
|
||||
},
|
||||
{
|
||||
name: 'preview',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '设置裁剪区域图片是否可预览，默认为 false',
|
||||
'en-US': 'Specifies whether images in the cropping area can be previewed. The default value is false'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'quality',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
defaultValue: ' 0.92',
|
||||
desc: {
|
||||
'zh-CN': '设置图片裁剪后的压缩比例，值在 0-1 之间，默认为 0.92',
|
||||
'en-US':
|
||||
'Set the compression ratio of the cropped image. The value ranges from 0 to 1. The default value is 0.92'
|
||||
'zh-CN': '设置图片裁剪后的压缩比例，值在 0-1 之间',
|
||||
'en-US': 'Set the compression ratio of the cropped image. The value ranges from 0 to 1'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
|
|
@ -213,10 +197,10 @@ export default {
|
|||
{
|
||||
name: 'rotatable',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否允许旋转图像;默认为 true',
|
||||
'en-US': 'Indicates whether images can be rotated. The default value is true'
|
||||
'en-US': 'Indicates whether images can be rotated'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'replace-image'
|
||||
|
|
@ -235,12 +219,12 @@ export default {
|
|||
{
|
||||
name: 'view-mode',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
defaultValue: '0',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'定义 cropper 的视图模式;默认为 0;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1',
|
||||
'定义 cropper 的视图模式;0：没有限制，3 可以移动到 2 外。1：3 只能在 2 内移动。2：2 图片不全部铺满 1 （即缩小时可以有一边出现空隙）。3：2 图片填充整个 1',
|
||||
'en-US':
|
||||
'Defines the view mode of the cropper. The default value is 0. 0: no restriction. The value 3 can be moved out of the value 2. 1:3 can only be moved within 2. The 2:2 picture is not completely covered with 1 (i.e., there may be gaps on one side when the picture is zoomed out). 3: 2 The image fills the entire 1'
|
||||
'Defines the view mode of the cropper. 0: no restriction. The value 3 can be moved out of the value 2. 1:3 can only be moved within 2. The 2:2 picture is not completely covered with 1 (i.e., there may be gaps on one side when the picture is zoomed out). 3: 2 The image fills the entire 1'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'view-mode'
|
||||
|
|
@ -248,10 +232,10 @@ export default {
|
|||
{
|
||||
name: 'wheel-zoom-ratio',
|
||||
type: 'number',
|
||||
defaultValue: '',
|
||||
defaultValue: '0.1',
|
||||
desc: {
|
||||
'zh-CN': '用鼠标移动图像时，定义缩放比例;默认为 0.1',
|
||||
'en-US': 'Define the scaling ratio when moving the image with the mouse. The default value is 0.1'
|
||||
'zh-CN': '用鼠标移动图像时，定义缩放比例',
|
||||
'en-US': 'Define the scaling ratio when moving the image with the mouse'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'wheel-zoom-ratio'
|
||||
|
|
@ -259,11 +243,10 @@ export default {
|
|||
{
|
||||
name: 'zoom-on-wheel',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否可以通过滚动鼠标滚轮来缩放图像;默认为 true',
|
||||
'en-US':
|
||||
'Specifies whether you can zoom in or out an image by scrolling the mouse wheel. The default value is true'
|
||||
'zh-CN': '是否可以通过滚动鼠标滚轮来缩放图像',
|
||||
'en-US': 'Specifies whether you can zoom in or out an image by scrolling the mouse wheel'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'zoom-on-wheel'
|
||||
|
|
@ -271,10 +254,10 @@ export default {
|
|||
{
|
||||
name: 'zoomable',
|
||||
type: 'boolean',
|
||||
defaultValue: '',
|
||||
defaultValue: 'true',
|
||||
desc: {
|
||||
'zh-CN': '是否允许放大图像;默认为 true',
|
||||
'en-US': 'Whether to allow image zooming in; The default value is true'
|
||||
'zh-CN': '是否允许放大图像',
|
||||
'en-US': 'Whether to allow image zooming in'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'replace-image'
|
||||
|
|
|
|||
|
|
@ -446,7 +446,23 @@ export default {
|
|||
pcDemo: ''
|
||||
}
|
||||
],
|
||||
slots: [],
|
||||
slots: [
|
||||
{
|
||||
name: 'now',
|
||||
type: '',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '组件“此刻”位置插槽',
|
||||
'en-US': 'Component "Now" button slot'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'now',
|
||||
mfDemo: 'now'
|
||||
}
|
||||
],
|
||||
format: [
|
||||
{
|
||||
name: 'a',
|
||||
|
|
|
|||
|
|
@ -442,8 +442,8 @@ export default {
|
|||
'zh-CN': '自定义弹窗底部按钮',
|
||||
'en-US': 'Custom Pop Up Bottom buttons'
|
||||
},
|
||||
metaData: {
|
||||
new: '3.18.0'
|
||||
meta: {
|
||||
stable: '3.18.0'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
|
|
|
|||
|
|
@ -241,7 +241,7 @@ export default {
|
|||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'lazy-show-popper',
|
||||
mfDemo: '',
|
||||
metaData: {
|
||||
meta: {
|
||||
experimental: '3.18.0'
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -566,6 +566,21 @@ export default {
|
|||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'prompt-tip',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '设置提示是否为 tip 类型，悬浮图标时显示 tip 提示',
|
||||
'en-US': 'Set whether the prompt is of the tip type. The tip is displayed when the icon is suspended.'
|
||||
},
|
||||
metaData: {
|
||||
new: '3.19.0'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
mfDemo: 'prompt-tip',
|
||||
pcDemo: 'prompt-tip'
|
||||
},
|
||||
{
|
||||
name: 're-upload-tip',
|
||||
type: '(count: number) => string',
|
||||
|
|
|
|||
|
|
@ -147,8 +147,8 @@ export default {
|
|||
name: 'custom-column-names',
|
||||
type: 'string[]',
|
||||
defaultValue: "['TinyGridColumn']",
|
||||
metaData: {
|
||||
new: '3.17.0'
|
||||
meta: {
|
||||
stable: '3.17.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '封装 grid-column 时需要配置此字段，提供给表格收集配置',
|
||||
|
|
@ -723,6 +723,22 @@ export default {
|
|||
pcDemo: 'grid-size#size-resize-column-width',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'IResizableConfig',
|
||||
typeAnchorName: 'IResizableConfig',
|
||||
type: 'IResizableConfig',
|
||||
defaultValue: '',
|
||||
metaData: {
|
||||
new: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '设置列宽拖拽参数',
|
||||
'en-US': 'Set column width drag parameters'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'grid-size#size-resizable-config',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'row-class-name',
|
||||
typeAnchorName: 'IClassNameArgs',
|
||||
|
|
@ -1467,8 +1483,8 @@ export default {
|
|||
name: 'toggle-group-change',
|
||||
type: '(row: IRow) => void',
|
||||
defaultValue: '',
|
||||
metaData: {
|
||||
new: '3.17.0'
|
||||
meta: {
|
||||
stable: '3.17.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '当分组的展开和收起时会触发该事件',
|
||||
|
|
@ -2289,13 +2305,28 @@ export default {
|
|||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'getAllSelection',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow[]',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '获取所有翻页中保存的已选中的数据',
|
||||
'en-US': 'This command is used to select multiple lines to obtain the selected data.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'grid-operation-column#operation-column-grid-pager-reserve'
|
||||
},
|
||||
{
|
||||
name: 'getSelectRecords',
|
||||
typeAnchorName: 'IRow',
|
||||
type: '() => IRow[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '用于多选行，获取已选中的数据',
|
||||
'zh-CN': '用于多选行，获取当前页已选中的数据',
|
||||
'en-US': 'This command is used to select multiple lines to obtain the selected data.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
|
|
@ -3418,6 +3449,7 @@ export default {
|
|||
{
|
||||
name: 'filter',
|
||||
type: 'boolean | IFilterConfig',
|
||||
typeAnchorName: 'IFilterConfig',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '设置表格列的筛选配置信息。默认值为 false 不配置筛选信息',
|
||||
|
|
@ -4050,7 +4082,7 @@ interface IPagerConfig {
|
|||
pageSize: number
|
||||
pageSizes: number[]
|
||||
total: number
|
||||
// 分页组件布局默认值：'total, prev, pager, next, jumper, sizes'
|
||||
// 分页组件布局默认值：'total, prev, pager, next, jumper'
|
||||
layout: string
|
||||
}
|
||||
}
|
||||
|
|
@ -4403,7 +4435,7 @@ interface IPageChangeArgs {
|
|||
$grid: Component
|
||||
// 当前页码
|
||||
currentPage: number
|
||||
//当前分页组件布局信息 'total, prev, pager, next, jumper, sizes'
|
||||
//当前分页组件布局信息 'total, prev, pager, next, jumper'
|
||||
layout: string
|
||||
// 当前每页显示条数
|
||||
pageSize: number
|
||||
|
|
@ -4667,6 +4699,16 @@ interface IResizableChangeArgs {
|
|||
columnIndex: number
|
||||
// 是否固定列
|
||||
fixed: boolean
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IResizableConfig',
|
||||
type: 'type',
|
||||
code: `
|
||||
interface IResizableConfig {
|
||||
// 拖拽宽度限制函数，field: 当前拖拽的列名，width: 当前拖拽的宽度
|
||||
limit: ({ field: string, width: number }) => number
|
||||
}
|
||||
`
|
||||
},
|
||||
|
|
|
|||
|
|
@ -400,8 +400,8 @@ export default {
|
|||
name: 'show-tooltip',
|
||||
type: 'boolean',
|
||||
defaultValue: 'true',
|
||||
metaData: {
|
||||
new: '3.18.0'
|
||||
meta: {
|
||||
stable: '3.18.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '只读状态下，文本超出是否悬浮提示',
|
||||
|
|
@ -557,6 +557,18 @@ export default {
|
|||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'display-only-popup-more',
|
||||
mfDemo: 'display-only-popup-more'
|
||||
},
|
||||
{
|
||||
name: 'input-box-type',
|
||||
type: 'string',
|
||||
defaultValue: 'normal',
|
||||
desc: {
|
||||
'zh-CN': '设置边框模式',
|
||||
'en-US': 'Setting input box border type'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'input-box-type',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ export default {
|
|||
type: "'left' | 'center' | 'right'",
|
||||
defaultValue: "'left'",
|
||||
desc: {
|
||||
'zh-CN': '分页对齐方式，Aurora、SMB主题默认值为 right',
|
||||
'en-US': 'Pagination alignment, the default value for Aurora and SMB themes is right'
|
||||
'zh-CN': '分页对齐方式，Aurora、XDesign主题默认值为 right',
|
||||
'en-US': 'Pagination alignment, the default value for Aurora and XDesign themes is right'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'align'
|
||||
|
|
@ -247,13 +247,28 @@ export default {
|
|||
name: 'total-fixed-left',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
metaData: {
|
||||
new: '3.18.0'
|
||||
meta: {
|
||||
stable: '3.18.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '总条目数是否固定在左侧，Aurora、SMB主题默认值为 true',
|
||||
'zh-CN': '总条目数是否固定在左侧，Aurora、XDesign主题默认值为 true',
|
||||
'en-US':
|
||||
'Whether the total number of entries is fixed on the left, the default value for Aurora and SMB themes is true'
|
||||
'Whether the total number of entries is fixed on the left, the default value for Aurora and XDesign themes is true'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'page-size-text',
|
||||
type: 'string',
|
||||
defaultValue: '"条/页"',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '自定以页码大小后置显示文本，XDesign主题默认为空',
|
||||
'en-US':
|
||||
'Customize the text to be displayed after the page number size. The XDesign theme is empty by default.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
|
|
|
|||
|
|
@ -297,8 +297,8 @@ export default {
|
|||
'zh-CN': '自定义上传提示内容',
|
||||
'en-US': 'Customize upload prompt content'
|
||||
},
|
||||
metaData: {
|
||||
new: '3.18.0'
|
||||
meta: {
|
||||
stable: '3.18.0'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'upload-tip'
|
||||
|
|
|
|||
|
|
@ -62,6 +62,20 @@ export default {
|
|||
},
|
||||
mode: ['mobile-first']
|
||||
},
|
||||
{
|
||||
name: 'dot',
|
||||
type: 'Boolean',
|
||||
defaultValue: 'false',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '点状形步骤条，当值只支持垂直样式',
|
||||
'en-US': 'Dot shaped step bar, values only support vertical style'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'line-dot'
|
||||
},
|
||||
{
|
||||
name: 'duration',
|
||||
type: 'number',
|
||||
|
|
|
|||
|
|
@ -40,6 +40,22 @@ export default {
|
|||
pcDemo: 'content',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'content-max-height',
|
||||
type: 'string',
|
||||
defaultValue: '50vh',
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '内容最大高度，仅当使用content设置内容时生效，使用插槽等其他方式时无效',
|
||||
'en-US':
|
||||
'The maximum height of the content. It only takes effect when content is set using content. It is invalid when using other methods such as slots.'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'content-max-height',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'boolean',
|
||||
|
|
|
|||
|
|
@ -440,7 +440,7 @@ interface IPagerOp {
|
|||
currentPage: number
|
||||
pageSize: number
|
||||
pageSizes: number[]
|
||||
layout: string // 分页组件布局默认值：'total, prev, pager, next, jumper, sizes'
|
||||
layout: string // 分页组件布局默认值：'total, prev, pager, next, jumper'
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
|||
|
|
@ -78,6 +78,17 @@ export default {
|
|||
mode: ['pc'],
|
||||
pcDemo: 'show-expand'
|
||||
},
|
||||
{
|
||||
name: 'placeholder',
|
||||
type: 'string',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '当数据为空时的占位符',
|
||||
'en-US': 'Placeholder when data is empty'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'data',
|
||||
typeAnchorName: 'ITreeNodeData',
|
||||
|
|
@ -397,6 +408,20 @@ export default {
|
|||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'clearable'
|
||||
},
|
||||
{
|
||||
name: 'highlight-query',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '通过 <code> highlightQuery </code> 属性，是否在匹配的节点中，高亮搜索文字。<br>',
|
||||
'en-US': 'Indicates whether to highlight the search text in the matched node.'
|
||||
},
|
||||
meta: {
|
||||
stable: '3.19.0'
|
||||
},
|
||||
mode: ['pc'],
|
||||
pcDemo: 'show-filter'
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="demo-top mb10">
|
||||
<tiny-switch v-model="type" true-value="line" false-value="dot"> </tiny-switch>
|
||||
<span class="demo-anchor">当前类型：{{ type }}</span>
|
||||
</div>
|
||||
<tiny-anchor :links="links" :type="type"></tiny-anchor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor, Switch } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAnchor: Anchor,
|
||||
TinySwitch: Switch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
links: [
|
||||
{
|
||||
key: 'demonstrate',
|
||||
link: '#demonstrate',
|
||||
title: '演示',
|
||||
children: [
|
||||
{
|
||||
key: 'basic-usage',
|
||||
link: '#basic-usage',
|
||||
title: '基本用法（测试超出隐藏文字）'
|
||||
},
|
||||
{
|
||||
key: 'is-affix',
|
||||
link: '#is-affix',
|
||||
title: '固定模式'
|
||||
},
|
||||
{
|
||||
key: 'set-container',
|
||||
link: '#set-container',
|
||||
title: '滚动容器'
|
||||
},
|
||||
{
|
||||
key: 'on-change',
|
||||
link: '#change',
|
||||
title: 'change 事件'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'api',
|
||||
link: '#API',
|
||||
title: 'API'
|
||||
}
|
||||
],
|
||||
type: 'line'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-anchor {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<tiny-anchor :links="links" @change="handleChange"></tiny-anchor>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor, Modal } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAnchor: Anchor
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
links: [
|
||||
{
|
||||
key: 'demonstrate',
|
||||
link: '#demonstrate',
|
||||
title: '演示',
|
||||
children: [
|
||||
{
|
||||
key: 'basic-usage',
|
||||
link: '#basic-usage',
|
||||
title: '基本用法'
|
||||
},
|
||||
{
|
||||
key: 'is-affix',
|
||||
link: '#is-affix',
|
||||
title: '固定模式'
|
||||
},
|
||||
{
|
||||
key: 'set-container',
|
||||
link: '#set-container',
|
||||
title: '滚动容器'
|
||||
},
|
||||
{
|
||||
key: 'on-change',
|
||||
link: '#change',
|
||||
title: 'change 事件'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'api',
|
||||
link: '#API',
|
||||
title: 'API'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(link) {
|
||||
Modal.message({ message: `change${link}`, status: 'info' })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
<template>
|
||||
<div class="wrap">
|
||||
<div class="demo-top mb10">
|
||||
<tiny-switch v-model="isAffix"></tiny-switch>
|
||||
<span class="demo-anchor">{{ isAffix ? '固定模式' : '非固定模式' }}</span>
|
||||
</div>
|
||||
<tiny-anchor :links="links" :is-affix="isAffix"></tiny-anchor>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor, Switch } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAnchor: Anchor,
|
||||
TinySwitch: Switch
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isAffix: false,
|
||||
links: [
|
||||
{
|
||||
key: 'demonstrate',
|
||||
link: '#demonstrate',
|
||||
title: '演示',
|
||||
children: [
|
||||
{
|
||||
key: 'basic-usage',
|
||||
link: '#basic-usage',
|
||||
title: '基本用法'
|
||||
},
|
||||
{
|
||||
key: 'is-affix',
|
||||
link: '#is-affix',
|
||||
title: '固定模式'
|
||||
},
|
||||
{
|
||||
key: 'set-container',
|
||||
link: '#set-container',
|
||||
title: '滚动容器'
|
||||
},
|
||||
{
|
||||
key: 'on-change',
|
||||
link: '#change',
|
||||
title: 'change 事件'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 'api',
|
||||
link: '#API',
|
||||
title: 'API'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.wrap {
|
||||
min-height: 180px;
|
||||
}
|
||||
.demo-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.demo-anchor {
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
<template>
|
||||
<tiny-row>
|
||||
<tiny-col :span="10">
|
||||
<div id="container" class="scroll-container">
|
||||
<div id="sec-1" class="sec-1">Sec 1</div>
|
||||
<div id="sec-2" class="sec-2">Sec 2</div>
|
||||
<div id="sec-3" class="sec-3">Sec 3</div>
|
||||
<div id="sec-3-1" class="sec-3-1">Sec 3-1</div>
|
||||
<div id="sec-3-2" class="sec-3-2">Sec 3-2</div>
|
||||
</div>
|
||||
</tiny-col>
|
||||
<tiny-col :span="2">
|
||||
<tiny-anchor
|
||||
:links="links"
|
||||
container-id="#container"
|
||||
@link-click="handleClick"
|
||||
mark-class="is-active-anchor"
|
||||
></tiny-anchor>
|
||||
</tiny-col>
|
||||
</tiny-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Anchor, Row, Col } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyAnchor: Anchor,
|
||||
TinyRow: Row,
|
||||
TinyCol: Col
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
links: [
|
||||
{
|
||||
key: 'sec-1',
|
||||
link: '#sec-1',
|
||||
title: 'Sec 1'
|
||||
},
|
||||
{
|
||||
key: 'sec-2',
|
||||
link: '#sec-2',
|
||||
title: 'Sec 2'
|
||||
},
|
||||
{
|
||||
key: 'sec-3',
|
||||
link: '#sec-3',
|
||||
title: 'Sec 3',
|
||||
children: [
|
||||
{
|
||||
key: 'sec-3-1',
|
||||
link: '#sec-3-1',
|
||||
title: 'Sec 3-1'
|
||||
},
|
||||
{
|
||||
key: 'sec-3-2',
|
||||
link: '#sec-3-2',
|
||||
title: 'Sec 3-2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick(e, link) {
|
||||
e.preventDefault()
|
||||
console.log('link', link)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.is-active-anchor {
|
||||
border: 1px solid #333;
|
||||
}
|
||||
.scroll-container {
|
||||
height: 40vh;
|
||||
overflow: auto;
|
||||
}
|
||||
.sec-1 {
|
||||
height: 50vh;
|
||||
background: rgba(135, 206, 235, 0.1);
|
||||
}
|
||||
.sec-2 {
|
||||
height: 50vh;
|
||||
background: rgba(135, 206, 235, 0.3);
|
||||
}
|
||||
.sec-3 {
|
||||
background: rgba(135, 206, 235, 0.6);
|
||||
padding-top: 20vh;
|
||||
}
|
||||
.sec-3-1 {
|
||||
height: 50vh;
|
||||
background: rgba(135, 206, 235, 0.8);
|
||||
}
|
||||
.sec-3-2 {
|
||||
height: 50vh;
|
||||
background: rgba(135, 206, 235, 1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Anchor 锚点
|
||||
---
|
||||
|
||||
# Anchor 锚点
|
||||
|
||||
<div>用于页内导航。</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Anchor
|
||||
---
|
||||
|
||||
# Anchor
|
||||
|
||||
<div>Used for intra page navigation.</div>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
export default {
|
||||
column: '1',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '通过 <code>links</code> 设置导航数据， <code>type</code> 设置类型。',
|
||||
'en-US': 'Set navigation data through <code>links</code> , and <code>type</code> to set the type.'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'is-affix',
|
||||
name: {
|
||||
'zh-CN': '固定模式',
|
||||
'en-US': 'Fixed mode'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '通过 <code>is-affix</code> 设置固定定位，不随页面滚动。',
|
||||
'en-US': 'Set fixed positioning through <code>is-affix</code> , without scrolling with the page.'
|
||||
},
|
||||
codeFiles: ['is-affix.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'set-container',
|
||||
name: {
|
||||
'zh-CN': '滚动容器',
|
||||
'en-US': 'Rolling Container'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'通过 <code>container-id</code> 设置滚动容器， <code>link-click</code> 监听锚点点击事件，阻止浏览器默认行为，实现单页面 <code>hash</code> 路由模式的页内跳转，在指定容器内滚动。<br/>\n <code>mark-class</code> 设置自定义类名，高亮显示导航的目标元素。',
|
||||
'en-US':
|
||||
'By setting the scrolling container through <code>container-id</code> , <code>link-click</code> listens for anchor click events, prevents browser default behavior, and implements single page <code>hash</code> routing mode for page hopping, scrolling within the specified container<br/>\n <code>mark-class</code> Set a custom class name to highlight the target element for navigation.'
|
||||
},
|
||||
codeFiles: ['set-container.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'change',
|
||||
name: {
|
||||
'zh-CN': 'change事件',
|
||||
'en-US': 'change event'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '通过 <code>change</code> 监听锚点改变的事件。',
|
||||
'en-US': ' <code>change</code> event. Callback is triggered when the anchor link changes.'
|
||||
},
|
||||
codeFiles: ['change.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div style="height: 540px">
|
||||
<tiny-file-upload
|
||||
ref="upload"
|
||||
prompt-tip
|
||||
:action="action"
|
||||
accept=".doc,.docx"
|
||||
:file-list="fileList"
|
||||
list-type="saas"
|
||||
:file-size="[100, 200]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { FileUpload } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyFileUpload: FileUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
action: 'http://localhost:3000/api/upload',
|
||||
fileList: [
|
||||
{
|
||||
docId: 'M1T2A1N548572512085860351',
|
||||
path: 'edm/one/',
|
||||
docVersion: 'V1',
|
||||
name: 'test1.png',
|
||||
docSize: 100 * 1024,
|
||||
size: 100 * 1024,
|
||||
serverName: 'ShenZhen'
|
||||
},
|
||||
{
|
||||
docId: 'M1T2A1N548572512085860352',
|
||||
path: 'edm/one/',
|
||||
docVersion: 'V1',
|
||||
name: 'test2.doc',
|
||||
docSize: 17252 * 1024,
|
||||
size: 17252 * 1024,
|
||||
serverName: 'ShenZhen'
|
||||
},
|
||||
{
|
||||
docId: 'M1T2A1N548572512085860353',
|
||||
path: 'edm/one/',
|
||||
docVersion: 'V1',
|
||||
name: 'test3.png',
|
||||
docSize: 200 * 1024,
|
||||
size: 200 * 1024,
|
||||
serverName: 'ShenZhen',
|
||||
status: 'uploading',
|
||||
percentage: 30
|
||||
},
|
||||
{
|
||||
docId: 'M1T2A1N548572512085860353',
|
||||
path: 'edm/one/',
|
||||
docVersion: 'V1',
|
||||
name: 'test4.doc',
|
||||
docSize: 17252 * 1024,
|
||||
size: 17252 * 1024,
|
||||
serverName: 'ShenZhen',
|
||||
status: 'fail',
|
||||
percentage: 30
|
||||
},
|
||||
{
|
||||
docId: 'M1T2A1N548572512085860353',
|
||||
path: 'edm/one/',
|
||||
docVersion: 'V1',
|
||||
name: 'test5超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长.doc',
|
||||
docSize: 17252 * 1024,
|
||||
size: 17252 * 1024,
|
||||
serverName: 'ShenZhen'
|
||||
},
|
||||
{
|
||||
docId: 'M1T2A1N548572512085860353',
|
||||
path: 'edm/one/',
|
||||
docVersion: 'V1',
|
||||
name: '没有文件大小.doc',
|
||||
serverName: 'ShenZhen'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -62,6 +62,19 @@ export default {
|
|||
},
|
||||
codeFiles: ['file-size-array.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'prompt-tip',
|
||||
name: {
|
||||
'zh-CN': 'tip提示',
|
||||
'en-US': 'tip Hints'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>propmtTip</code> 为 `true` 设置提示为tip类型，悬浮图标时显示tip提示。<p>',
|
||||
'en-US':
|
||||
'<p>Set the prompt to the tip type by setting <code>propmtTip</code> to `true`. The tip prompt is displayed when the icon is suspended.</p>'
|
||||
},
|
||||
codeFiles: ['prompt-tip.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'show-title',
|
||||
name: {
|
||||
|
|
|
|||
|
|
@ -146,7 +146,7 @@ export default {
|
|||
pageSize: 5,
|
||||
pageSizes: [5, 10],
|
||||
total: 0,
|
||||
layout: 'total, prev, pager, next, jumper, sizes'
|
||||
layout: 'total, sizes, prev, pager, next, jumper'
|
||||
}
|
||||
},
|
||||
fetchData: {
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ export default {
|
|||
pageSize: 60,
|
||||
pageSizes: [5, 10, 60],
|
||||
total: 0,
|
||||
layout: 'total, prev, pager, next, jumper, sizes'
|
||||
layout: 'total, sizes, prev, pager, next, jumper'
|
||||
}
|
||||
},
|
||||
fetchData: {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export const cmpMenus = [
|
|||
labelEn: 'Navigation',
|
||||
key: 'cmp-navigation-components',
|
||||
children: [
|
||||
{ name: 'Anchor', nameCn: '锚点', key: 'anchor' },
|
||||
{ name: 'Tabbar', nameCn: '标签栏', key: 'tabbar' },
|
||||
{ name: 'CalendarBar', nameCn: '日历栏', key: 'calendar-bar' },
|
||||
{ name: 'Filter', nameCn: '过滤器', key: 'filter' },
|
||||
|
|
|
|||
|
|
@ -6,10 +6,14 @@
|
|||
:options="options"
|
||||
:suffix-icon="tinyIconEllipsis"
|
||||
more-text=""
|
||||
spacing="12px"
|
||||
spacing="8px"
|
||||
:max-show-num="3"
|
||||
>
|
||||
</tiny-action-menu>
|
||||
<br />
|
||||
<tiny-action-menu :options="options" :suffix-icon="tinyIconEllipsis" more-text="" spacing="8px" :max-show-num="3">
|
||||
</tiny-action-menu>
|
||||
<br />
|
||||
<p>场景2：只显示文本</p>
|
||||
<tiny-action-menu :options="options1" :show-icon="false" :max-show-num="3"> </tiny-action-menu>
|
||||
</div>
|
||||
|
|
@ -18,12 +22,12 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ActionMenu as TinyActionMenu } from '@opentiny/vue'
|
||||
import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
|
||||
import { IconPreChecked, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
|
||||
|
||||
const options = ref([
|
||||
{
|
||||
label: '远程登陆',
|
||||
icon: iconWebPlus()
|
||||
icon: IconPreChecked()
|
||||
},
|
||||
{
|
||||
label: '开机',
|
||||
|
|
@ -70,4 +74,30 @@ p {
|
|||
font-size: 14px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.custom-icon.tiny-action-menu {
|
||||
:deep(.tiny-action-menu__wrap) {
|
||||
.tiny-action-menu__item {
|
||||
.tiny-dropdown-item__wrap {
|
||||
color: #191919;
|
||||
.tiny-svg {
|
||||
fill: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
|
||||
fill: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
.tiny-dropdown {
|
||||
color: #191919;
|
||||
.tiny-svg {
|
||||
fill: #191919;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ test('只显示文本', async ({ page }) => {
|
|||
await page.goto('action-menu#icon')
|
||||
|
||||
const wrap = page.locator('#icon')
|
||||
const actionMenu = wrap.locator('.tiny-action-menu').nth(1)
|
||||
const actionMenu = wrap.locator('.tiny-action-menu').nth(2)
|
||||
const actionMenuItem = actionMenu.locator('.tiny-action-menu__item')
|
||||
|
||||
await expect(actionMenuItem.nth(0).locator('.tiny-svg')).toBeHidden()
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
:options="options"
|
||||
:suffix-icon="tinyIconEllipsis"
|
||||
more-text=""
|
||||
spacing="12px"
|
||||
spacing="8px"
|
||||
:max-show-num="3"
|
||||
>
|
||||
</tiny-action-menu>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
<script>
|
||||
import { ActionMenu } from '@opentiny/vue'
|
||||
import { iconWebPlus, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
|
||||
import { IconPreChecked, iconSuccessful, iconCloseSquare, iconEllipsis } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -28,7 +28,7 @@ export default {
|
|||
options: [
|
||||
{
|
||||
label: '远程登陆',
|
||||
icon: iconWebPlus()
|
||||
icon: IconPreChecked()
|
||||
},
|
||||
{
|
||||
label: '开机',
|
||||
|
|
@ -76,4 +76,30 @@ p {
|
|||
font-size: 14px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.custom-icon.tiny-action-menu {
|
||||
:deep(.tiny-action-menu__wrap) {
|
||||
.tiny-action-menu__item {
|
||||
.tiny-dropdown-item__wrap {
|
||||
color: #191919;
|
||||
.tiny-svg {
|
||||
fill: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.tiny-dropdown-item__wrap > .tiny-dropdown-item__content .tiny-svg {
|
||||
fill: #191919;
|
||||
}
|
||||
}
|
||||
|
||||
.tiny-dropdown {
|
||||
color: #191919;
|
||||
.tiny-svg {
|
||||
fill: #191919;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-action-menu :options="options" spacing="10px"> </tiny-action-menu>
|
||||
<tiny-action-menu :options="options" spacing="8px"> </tiny-action-menu>
|
||||
<br />
|
||||
<tiny-action-menu :options="options" :spacing="20"> </tiny-action-menu>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,8 +10,8 @@ test('菜单项间距', async ({ page }) => {
|
|||
const tenPXSpacing = actionMenu.first()
|
||||
const twentyPXSpacing = actionMenu.nth(1)
|
||||
|
||||
await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-left', '10px')
|
||||
await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-right', '10px')
|
||||
await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-left', '8px')
|
||||
await expect(getDivider(tenPXSpacing)).toHaveCSS('margin-right', '8px')
|
||||
await expect(getDivider(twentyPXSpacing)).toHaveCSS('margin-left', '20px')
|
||||
await expect(getDivider(twentyPXSpacing)).toHaveCSS('margin-right', '20px')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-action-menu :options="options" spacing="10px"> </tiny-action-menu>
|
||||
<tiny-action-menu :options="options" spacing="8px"> </tiny-action-menu>
|
||||
<br />
|
||||
<tiny-action-menu :options="options" :spacing="20"> </tiny-action-menu>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,6 @@ import { Alert as TinyAlert } from '@opentiny/vue'
|
|||
|
||||
<style>
|
||||
.demo-alert .tiny-alert__opration {
|
||||
margin-top: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -35,6 +35,6 @@ export default {
|
|||
|
||||
<style>
|
||||
.demo-alert .tiny-alert__opration {
|
||||
margin-top: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -69,18 +69,15 @@ function loadAll() {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal !important;
|
||||
padding: 7px !important;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #a29b91;
|
||||
line-height: 18px;
|
||||
color: #c2c2c2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -77,18 +77,15 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.my-autocomplete li {
|
||||
line-height: normal !important;
|
||||
padding: 7px !important;
|
||||
}
|
||||
|
||||
.my-autocomplete li .name {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.my-autocomplete li .addr {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #a29b91;
|
||||
line-height: 18px;
|
||||
color: #c2c2c2;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,17 @@
|
|||
<template>
|
||||
<tiny-badge is-dot>小圆点显示</tiny-badge>
|
||||
<br /><br />
|
||||
<tiny-badge is-dot>
|
||||
<template #default>
|
||||
<tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
|
||||
</template>
|
||||
</tiny-badge>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Badge as TinyBadge } from '@opentiny/vue'
|
||||
import { iconMail } from '@opentiny/vue-icon'
|
||||
import { Button as TinyButton } from '@opentiny/vue'
|
||||
|
||||
const TinyIconMail = iconMail()
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,11 @@ test('小圆点标记', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('badge#is-dot')
|
||||
|
||||
const demo = page.locator('#is-dot')
|
||||
const badge = demo.locator('.tiny-badge')
|
||||
const demo = page
|
||||
.locator('div')
|
||||
.filter({ hasText: /^小圆点显示$/ })
|
||||
.first()
|
||||
const badge = demo.locator('.tiny-badge').first()
|
||||
|
||||
await expect(badge).toHaveClass(/tiny-badge--default/)
|
||||
await expect(badge).toHaveCSS('width', '6px')
|
||||
|
|
|
|||
|
|
@ -1,13 +1,27 @@
|
|||
<template>
|
||||
<tiny-badge is-dot>小圆点显示</tiny-badge>
|
||||
<br /><br />
|
||||
<tiny-badge is-dot>
|
||||
<template #default>
|
||||
<tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
|
||||
</template>
|
||||
</tiny-badge>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Badge } from '@opentiny/vue'
|
||||
import { Button } from '@opentiny/vue'
|
||||
import { iconMail } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyButton: Button,
|
||||
TinyBadge: Badge
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
TinyIconMail: iconMail()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
<template>
|
||||
<tiny-badge :value="5" :max="2">最大值显示</tiny-badge>
|
||||
<tiny-badge :value="10" :max="9">最大值显示</tiny-badge>
|
||||
<br />
|
||||
<tiny-badge value="100" :max="99" data="我的待办"></tiny-badge>
|
||||
<br />
|
||||
<tiny-badge value="1000" :max="999" data="我的待办"></tiny-badge>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ test('计数最大值', async ({ page }) => {
|
|||
await page.goto('badge#max')
|
||||
|
||||
const demo = page.locator('#max')
|
||||
const badge = demo.locator('.tiny-badge')
|
||||
const badge = demo.locator('.tiny-badge').first()
|
||||
|
||||
await expect(badge).toContainText('2+')
|
||||
await expect(badge).toContainText('9+')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,5 +1,11 @@
|
|||
<template>
|
||||
<tiny-badge :value="5" :max="2">最大值显示</tiny-badge>
|
||||
<template>
|
||||
<tiny-badge :value="10" :max="9">最大值显示</tiny-badge>
|
||||
<br />
|
||||
<tiny-badge value="100" :max="99" data="我的待办"></tiny-badge>
|
||||
<br />
|
||||
<tiny-badge value="1000" :max="999" data="我的待办"></tiny-badge>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<div>
|
||||
<p>使用字符串：</p>
|
||||
<br />
|
||||
<tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
|
||||
<tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
|
||||
<br /><br />
|
||||
<p>使用数字：</p>
|
||||
<br />
|
||||
<tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
|
||||
<tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,6 @@ test('标记的位置', async ({ page }) => {
|
|||
const demo = page.locator('#offset')
|
||||
const badge = demo.locator('.tiny-badge')
|
||||
|
||||
await expect(badge.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -10)')
|
||||
await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -10)')
|
||||
await expect(badge.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -4)')
|
||||
await expect(badge.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, -6)')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<div>
|
||||
<p>使用字符串：</p>
|
||||
<br />
|
||||
<tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
|
||||
<tiny-badge :value="2" :offset="['0', '-20%']">我的待办</tiny-badge>
|
||||
<br /><br />
|
||||
<p>使用数字：</p>
|
||||
<br />
|
||||
<tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
|
||||
<tiny-badge :value="2" :offset="[0, -6]">我的待办</tiny-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
metaData: {
|
||||
meta: {
|
||||
experimental: '3.16.0'
|
||||
},
|
||||
demos: [
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="demo-button">
|
||||
<p>原生及插槽</p>
|
||||
<tiny-button-group :data="groupData" v-model="checkedVal">
|
||||
<template #button4="{ sup }">
|
||||
<tiny-icon-plus-circle></tiny-icon-plus-circle>
|
||||
|
|
@ -8,12 +9,23 @@
|
|||
</span>
|
||||
</template>
|
||||
</tiny-button-group>
|
||||
<br /><br />
|
||||
<p>插槽引用tag角标</p>
|
||||
<tiny-button-group :data="groupDataTag" v-model="checkedVal">
|
||||
<template #btn="{ sup }">
|
||||
<tiny-tag type="warning" size="small" hit>
|
||||
<component :is="sup.icon" class="tiny-svg-size"></component>
|
||||
{{ sup.text }}
|
||||
</tiny-tag>
|
||||
</template>
|
||||
</tiny-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { ButtonGroup as TinyButtonGroup } from '@opentiny/vue'
|
||||
import { Tag as TinyTag } from '@opentiny/vue'
|
||||
import { iconSearch, iconPlusCircle } from '@opentiny/vue-icon'
|
||||
|
||||
const TinyIconPlusCircle = iconPlusCircle()
|
||||
|
|
@ -53,6 +65,45 @@ const groupData = ref([
|
|||
}
|
||||
}
|
||||
])
|
||||
const groupDataTag = ref([
|
||||
{
|
||||
text: '1年',
|
||||
value: 'Button1',
|
||||
sup: {
|
||||
slot: 'btn',
|
||||
class: 'sup-tag',
|
||||
text: '特惠'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '2年',
|
||||
value: 'Button2',
|
||||
sup: {
|
||||
slot: 'btn',
|
||||
class: 'sup-tag',
|
||||
icon: iconSearch()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '3年',
|
||||
value: 'Button3',
|
||||
sup: {
|
||||
slot: 'btn',
|
||||
class: 'sup-tag',
|
||||
icon: iconPlusCircle()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '4年',
|
||||
value: 'Button4',
|
||||
sup: {
|
||||
slot: 'btn',
|
||||
class: 'sup-tag',
|
||||
icon: iconPlusCircle(),
|
||||
text: '8折'
|
||||
}
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -80,4 +131,13 @@ const groupData = ref([
|
|||
.demo-button button {
|
||||
width: 124px;
|
||||
}
|
||||
.demo-button p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.demo-button .tiny-tag {
|
||||
border-radius: 0px 5px 0 8px;
|
||||
}
|
||||
.demo-button .tiny-svg-size {
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<template>
|
||||
<div class="demo-button">
|
||||
<p>原生及插槽</p>
|
||||
<tiny-button-group :data="groupData" v-model="checkedVal">
|
||||
<template #button4="{ sup }">
|
||||
<icon-plus-circle></icon-plus-circle>
|
||||
|
|
@ -8,16 +9,28 @@
|
|||
</span>
|
||||
</template>
|
||||
</tiny-button-group>
|
||||
<br /><br />
|
||||
<p>插槽引用tag角标</p>
|
||||
<tiny-button-group :data="groupData2" v-model="checkedVal">
|
||||
<template #btn="{ sup }">
|
||||
<tiny-tag type="warning" size="small" hit>
|
||||
<component :is="sup.icon" class="tiny-svg-size"></component>
|
||||
{{ sup.text }}
|
||||
</tiny-tag>
|
||||
</template>
|
||||
</tiny-button-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ButtonGroup } from '@opentiny/vue'
|
||||
import { Tag } from '@opentiny/vue'
|
||||
import { iconSearch, iconPlusCircle } from '@opentiny/vue-icon'
|
||||
|
||||
const IconPlusCircle = iconPlusCircle()
|
||||
export default {
|
||||
components: {
|
||||
TinyTag: Tag,
|
||||
TinyButtonGroup: ButtonGroup,
|
||||
IconPlusCircle
|
||||
},
|
||||
|
|
@ -58,6 +71,45 @@ export default {
|
|||
text: '8折'
|
||||
}
|
||||
}
|
||||
],
|
||||
groupData2: [
|
||||
{
|
||||
text: '1年',
|
||||
value: 'Button1',
|
||||
sup: {
|
||||
slot: 'btn',
|
||||
class: 'sup-tag',
|
||||
text: '特惠'
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '2年',
|
||||
value: 'Button2',
|
||||
sup: {
|
||||
slot: 'btn',
|
||||
class: 'sup-tag',
|
||||
icon: iconSearch()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '3年',
|
||||
value: 'Button3',
|
||||
sup: {
|
||||
slot: 'btn',
|
||||
class: 'sup-tag',
|
||||
icon: iconPlusCircle()
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '4年',
|
||||
value: 'Button4',
|
||||
sup: {
|
||||
slot: 'btn',
|
||||
class: 'sup-tag',
|
||||
icon: iconPlusCircle(),
|
||||
text: '8折'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -86,7 +138,16 @@ export default {
|
|||
</style>
|
||||
|
||||
<style>
|
||||
.demo-button p {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.demo-button button {
|
||||
width: 124px;
|
||||
}
|
||||
.demo-button .tiny-tag {
|
||||
border-radius: 0px 5px 0 8px;
|
||||
}
|
||||
.demo-button .tiny-svg-size {
|
||||
margin-right: 4px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -116,8 +116,8 @@ export default {
|
|||
'zh-CN': '空数据',
|
||||
'en-US': 'No data'
|
||||
},
|
||||
metaData: {
|
||||
new: '3.17.1'
|
||||
meta: {
|
||||
mark: '3.17.1'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>当数据为空时，默认会显示"暂无数据"，通过 <code>empty</code> 插槽自定义内容。</p>',
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button>默认按钮</tiny-button>
|
||||
<tiny-button>次要按钮</tiny-button>
|
||||
<tiny-button autofocus>默认聚焦</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
|
|||
test('测试是否有默认聚焦', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#autofocus')
|
||||
await page.getByRole('button', { name: '默认按钮' }).click()
|
||||
await page.getByRole('button', { name: '次要按钮' }).click()
|
||||
await page.getByRole('button', { name: '默认聚焦' }).click()
|
||||
const button = await page.getByRole('button', { name: '默认聚焦' })
|
||||
const hasAutofocus = await button.evaluate((button) => button.hasAttribute('autofocus'))
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button>默认按钮</tiny-button>
|
||||
<tiny-button>次要按钮</tiny-button>
|
||||
<tiny-button autofocus>默认聚焦</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-button>默认按钮</tiny-button>
|
||||
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
|
||||
<tiny-button>次要按钮</tiny-button>
|
||||
<tiny-button type="success"> 成功按钮 </tiny-button>
|
||||
<tiny-button type="info"> 信息按钮 </tiny-button>
|
||||
<tiny-button type="warning"> 警告按钮 </tiny-button>
|
||||
<tiny-button type="danger"> 危险按钮 </tiny-button>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-button plain> 朴素按钮 </tiny-button>
|
||||
<tiny-button type="primary" plain> 主要按钮 </tiny-button>
|
||||
<tiny-button plain>次要按钮 </tiny-button>
|
||||
<tiny-button type="success" plain> 成功按钮 </tiny-button>
|
||||
<tiny-button type="info" plain> 信息按钮 </tiny-button>
|
||||
<tiny-button type="warning" plain> 警告按钮 </tiny-button>
|
||||
<tiny-button type="danger" plain> 危险按钮 </tiny-button>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-button round> 圆角按钮 </tiny-button>
|
||||
<tiny-button type="primary" round> 主要按钮 </tiny-button>
|
||||
<tiny-button round> 圆角按钮 </tiny-button>
|
||||
<tiny-button type="success" round> 成功按钮 </tiny-button>
|
||||
<tiny-button type="info" round> 信息按钮 </tiny-button>
|
||||
<tiny-button type="warning" round> 警告按钮 </tiny-button>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
|
|||
test('测试默认按钮', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#base')
|
||||
await expect(page.locator('.tiny-button').first()).toHaveClass(/tiny-button--default/)
|
||||
await expect(page.getByRole('button', { name: '次要按钮' }).first()).toHaveClass(/tiny-button--default/)
|
||||
await expect(page.getByRole('button', { name: '主要按钮' }).first()).toHaveClass(/tiny-button--primary/)
|
||||
await expect(page.getByRole('button', { name: '成功按钮' }).first()).toHaveClass(/tiny-button--success/)
|
||||
await expect(page.getByRole('button', { name: '信息按钮' }).first()).toHaveClass(/tiny-button--info/)
|
||||
|
|
@ -14,7 +14,7 @@ test('测试默认按钮', async ({ page }) => {
|
|||
test('测试朴素按钮', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#base')
|
||||
await expect(page.getByRole('button', { name: '朴素按钮' })).toHaveClass(/is-plain/)
|
||||
await expect(page.getByRole('button', { name: '次要按钮' }).nth(1)).toHaveClass(/is-plain/)
|
||||
await expect(page.getByRole('button', { name: '主要按钮' }).nth(1)).toHaveClass(/tiny-button--primary is-plain/)
|
||||
await expect(page.getByRole('button', { name: '成功按钮' }).nth(1)).toHaveClass(/tiny-button--success is-plain/)
|
||||
await expect(page.getByRole('button', { name: '信息按钮' }).nth(1)).toHaveClass(/tiny-button--info is-plain/)
|
||||
|
|
@ -36,8 +36,8 @@ test('测试圆角按钮', async ({ page }) => {
|
|||
test('测试是否是圆形按钮', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('button#base')
|
||||
await expect(page.locator('.tiny-button').first()).toHaveClass(/tiny-button--default/)
|
||||
await expect(page.locator('button:nth-child(2)').first()).toHaveClass(/tiny-button--primary/)
|
||||
await expect(page.getByRole('button', { name: '圆角按钮' })).toHaveClass(/tiny-button--default/)
|
||||
await expect(page.getByRole('button', { name: '主要按钮' }).nth(2)).toHaveClass(/tiny-button--primary/)
|
||||
await expect(page.locator('button:nth-child(3)').first()).toHaveClass(/tiny-button--success/)
|
||||
await expect(page.locator('button:nth-child(4)').first()).toHaveClass(/tiny-button--info/)
|
||||
await expect(page.locator('button:nth-child(5)').first()).toHaveClass(/tiny-button--warning/)
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
<template>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-button>默认按钮</tiny-button>
|
||||
<tiny-button type="primary" native-type="submit"> 主要按钮 </tiny-button>
|
||||
<tiny-button>次要按钮</tiny-button>
|
||||
<tiny-button type="success"> 成功按钮 </tiny-button>
|
||||
<tiny-button type="info"> 信息按钮 </tiny-button>
|
||||
<tiny-button type="warning"> 警告按钮 </tiny-button>
|
||||
<tiny-button type="danger"> 危险按钮 </tiny-button>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-button plain> 朴素按钮 </tiny-button>
|
||||
<tiny-button type="primary" plain> 主要按钮 </tiny-button>
|
||||
<tiny-button plain>次要按钮 </tiny-button>
|
||||
<tiny-button type="success" plain> 成功按钮 </tiny-button>
|
||||
<tiny-button type="info" plain> 信息按钮 </tiny-button>
|
||||
<tiny-button type="warning" plain> 警告按钮 </tiny-button>
|
||||
<tiny-button type="danger" plain> 危险按钮 </tiny-button>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-button round> 圆角按钮 </tiny-button>
|
||||
<tiny-button type="primary" round> 主要按钮 </tiny-button>
|
||||
<tiny-button round> 圆角按钮 </tiny-button>
|
||||
<tiny-button type="success" round> 成功按钮 </tiny-button>
|
||||
<tiny-button type="info" round> 信息按钮 </tiny-button>
|
||||
<tiny-button type="warning" round> 警告按钮 </tiny-button>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<tiny-layout>
|
||||
<tiny-row> 是否禁用：<tiny-switch v-model="disabled"></tiny-switch> </tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-button :disabled="disabled">默认按钮</tiny-button>
|
||||
<tiny-button type="primary" :disabled="disabled">主要按钮</tiny-button>
|
||||
<tiny-button :disabled="disabled">次要按钮</tiny-button>
|
||||
<tiny-button type="success" :disabled="disabled">成功按钮</tiny-button>
|
||||
<tiny-button type="info" :disabled="disabled">信息按钮</tiny-button>
|
||||
<tiny-button type="warning" :disabled="disabled">警告按钮</tiny-button>
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
</tiny-row>
|
||||
|
||||
<tiny-row>
|
||||
<tiny-button :disabled="disabled" plain>默认按钮</tiny-button>
|
||||
<tiny-button type="primary" :disabled="disabled" plain>主要按钮</tiny-button>
|
||||
<tiny-button :disabled="disabled" plain>次要按钮</tiny-button>
|
||||
<tiny-button type="success" :disabled="disabled" plain>成功按钮</tiny-button>
|
||||
<tiny-button type="info" :disabled="disabled" plain>信息按钮</tiny-button>
|
||||
<tiny-button type="warning" :disabled="disabled" plain>警告按钮</tiny-button>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ test('测试禁用状态是否生效', async ({ page }) => {
|
|||
await expect(demo.locator('.tiny-button').first()).toHaveCSS('background-color', 'rgb(245, 245, 246)')
|
||||
await expect(demo.locator('.tiny-button').first()).toHaveCSS('color', 'rgb(173, 176, 184)')
|
||||
await expect(demo.locator('.tiny-button').first()).toHaveCSS('border-bottom-color', 'rgb(223, 225, 230)')
|
||||
await expect(demo.getByRole('button', { name: '默认按钮' }).first()).toBeDisabled()
|
||||
await expect(demo.getByRole('button', { name: '次要按钮' }).first()).toBeDisabled()
|
||||
await expect(demo.getByRole('button', { name: '主要按钮' }).first()).toBeDisabled()
|
||||
await expect(demo.getByRole('button', { name: '成功按钮' }).first()).toBeDisabled()
|
||||
await expect(ghostBtn).toHaveCSS('color', 'rgb(173, 176, 184)')
|
||||
|
|
@ -22,7 +22,7 @@ test('测试禁用状态是否生效', async ({ page }) => {
|
|||
|
||||
await switchBtn.click()
|
||||
await expect(demo.locator('.tiny-button').first()).not.toBeDisabled()
|
||||
await expect(demo.getByRole('button', { name: '默认按钮' }).first()).not.toBeDisabled()
|
||||
await expect(demo.getByRole('button', { name: '次要按钮' }).first()).not.toBeDisabled()
|
||||
await expect(demo.getByRole('button', { name: '主要按钮' }).first()).not.toBeDisabled()
|
||||
await expect(demo.getByRole('button', { name: '成功按钮' }).first()).not.toBeDisabled()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<tiny-layout>
|
||||
<tiny-row> 是否禁用：<tiny-switch v-model="disabled"></tiny-switch> </tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-button :disabled="disabled">默认按钮</tiny-button>
|
||||
<tiny-button type="primary" :disabled="disabled">主要按钮</tiny-button>
|
||||
<tiny-button :disabled="disabled">次要按钮</tiny-button>
|
||||
<tiny-button type="success" :disabled="disabled">成功按钮</tiny-button>
|
||||
<tiny-button type="info" :disabled="disabled">信息按钮</tiny-button>
|
||||
<tiny-button type="warning" :disabled="disabled">警告按钮</tiny-button>
|
||||
|
|
@ -11,8 +11,8 @@
|
|||
</tiny-row>
|
||||
|
||||
<tiny-row>
|
||||
<tiny-button :disabled="disabled" plain>朴素按钮</tiny-button>
|
||||
<tiny-button type="primary" :disabled="disabled" plain>主要按钮</tiny-button>
|
||||
<tiny-button :disabled="disabled" plain>次要按钮</tiny-button>
|
||||
<tiny-button type="success" :disabled="disabled" plain>成功按钮</tiny-button>
|
||||
<tiny-button type="info" :disabled="disabled" plain>信息按钮</tiny-button>
|
||||
<tiny-button type="warning" :disabled="disabled" plain>警告按钮</tiny-button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="gray-bg">
|
||||
<tiny-button ghost reset-time="0">幽灵按钮</tiny-button>
|
||||
<tiny-button ghost type="primary" reset-time="0">主要按钮</tiny-button>
|
||||
<tiny-button ghost reset-time="0">次要按钮</tiny-button>
|
||||
<tiny-button ghost type="success" reset-time="0">成功按钮</tiny-button>
|
||||
<tiny-button ghost type="info" reset-time="0">信息按钮</tiny-button>
|
||||
<tiny-button ghost type="warning" reset-time="0">告警按钮</tiny-button>
|
||||
|
|
|
|||
|
|
@ -7,28 +7,28 @@ test('幽灵按钮', async ({ page }) => {
|
|||
const demo = page.locator('#ghost')
|
||||
const getGhostBtn = (index: number) => demo.locator('.tiny-button').nth(index)
|
||||
|
||||
// 默认幽灵按钮
|
||||
await page.waitForTimeout(1000)
|
||||
await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(37, 43, 58)')
|
||||
await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
|
||||
await page.waitForTimeout(100)
|
||||
await getGhostBtn(0).click()
|
||||
await page.waitForTimeout(100)
|
||||
// 主要幽灵按钮
|
||||
await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(94, 124, 224)')
|
||||
await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
|
||||
await page.waitForTimeout(100)
|
||||
await getGhostBtn(0).click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(getGhostBtn(0)).toHaveCSS('color', 'rgb(118, 147, 245)')
|
||||
await expect(getGhostBtn(0)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(0)).toHaveCSS('border-bottom-color', 'rgb(118, 147, 245)')
|
||||
|
||||
// 主要幽灵按钮
|
||||
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
|
||||
// 默认幽灵按钮
|
||||
await page.waitForTimeout(1000)
|
||||
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(37, 43, 58)')
|
||||
await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
|
||||
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
|
||||
await page.waitForTimeout(100)
|
||||
await getGhostBtn(1).click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(118, 147, 245)')
|
||||
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(94, 124, 224)')
|
||||
await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(118, 147, 245)')
|
||||
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(94, 124, 224)')
|
||||
|
||||
// 成功幽灵按钮
|
||||
await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(80, 212, 171)')
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="gray-bg">
|
||||
<tiny-button ghost reset-time="0">幽灵按钮</tiny-button>
|
||||
<tiny-button ghost reset-time="0" type="primary">主要按钮</tiny-button>
|
||||
<tiny-button ghost reset-time="0">次要按钮</tiny-button>
|
||||
<tiny-button ghost reset-time="0" type="success">成功按钮</tiny-button>
|
||||
<tiny-button ghost reset-time="0" type="info">信息按钮</tiny-button>
|
||||
<tiny-button ghost reset-time="0" type="warning">告警按钮</tiny-button>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-button :icon="TinyIconSearch"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="primary" :icon="TinyIconEdit"> 图标按钮 </tiny-button>
|
||||
<tiny-button :icon="TinyIconSearch"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="success" :icon="TinyIconYes"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="info" :icon="TinyIconMail"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="warning" :icon="TinyIconStarO"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="danger" :icon="TinyIconDel"> 图标按钮 </tiny-button>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-button :icon="TinyIconSearch"> </tiny-button>
|
||||
<tiny-button type="primary" :icon="TinyIconEdit"> </tiny-button>
|
||||
<tiny-button :icon="TinyIconSearch"> </tiny-button>
|
||||
<tiny-button type="success" :icon="TinyIconYes"> </tiny-button>
|
||||
<tiny-button type="info" :icon="TinyIconMail"></tiny-button>
|
||||
<tiny-button type="warning" :icon="TinyIconStarO"></tiny-button>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div>
|
||||
<tiny-layout>
|
||||
<tiny-row>
|
||||
<tiny-button :icon="IconSearch"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="primary" :icon="IconEdit"> 图标按钮 </tiny-button>
|
||||
<tiny-button :icon="IconSearch"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="success" :icon="IconYes"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="info" :icon="IconMail"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="warning" :icon="IconStarO"> 图标按钮 </tiny-button>
|
||||
<tiny-button type="danger" :icon="IconDel"> 图标按钮 </tiny-button>
|
||||
</tiny-row>
|
||||
<tiny-row>
|
||||
<tiny-button :icon="IconSearch"> </tiny-button>
|
||||
<tiny-button type="primary" :icon="IconEdit"> </tiny-button>
|
||||
<tiny-button :icon="IconSearch"> </tiny-button>
|
||||
<tiny-button type="success" :icon="IconYes"> </tiny-button>
|
||||
<tiny-button type="info" :icon="IconMail"></tiny-button>
|
||||
<tiny-button type="warning" :icon="IconStarO"></tiny-button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button loading>加载中</tiny-button>
|
||||
<tiny-button type="primary" loading>加载中</tiny-button>
|
||||
<tiny-button loading>加载中</tiny-button>
|
||||
<tiny-button type="success" loading>加载中</tiny-button>
|
||||
<tiny-button type="info" loading>加载中</tiny-button>
|
||||
<tiny-button type="warning" loading>加载中</tiny-button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button loading>加载中</tiny-button>
|
||||
<tiny-button type="primary" loading>加载中</tiny-button>
|
||||
<tiny-button loading>加载中</tiny-button>
|
||||
<tiny-button type="success" loading>加载中</tiny-button>
|
||||
<tiny-button type="info" loading>加载中</tiny-button>
|
||||
<tiny-button type="warning" loading>加载中</tiny-button>
|
||||
|
|
|
|||
|
|
@ -3,27 +3,27 @@ import { test, expect } from '@playwright/test'
|
|||
test('事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('calendar-view#calendar-event')
|
||||
const timeInput = page.locator('.tiny-filter-box').locator('.value')
|
||||
const timeBtn = page.getByText('2023 年 05 月')
|
||||
const timeInput = page.locator('.tiny-calendar-view').locator('.tiny-input__inner')
|
||||
const timeBtn = page.getByRole('textbox', { name: '年 05 月' })
|
||||
const leftYear = page.getByRole('button', { name: '前一年' })
|
||||
const month6 = page.getByText('六月')
|
||||
const leftSvg = page.locator('.header-left > .tiny-svg')
|
||||
const rightSvg = page.locator('.header-right > .tiny-svg')
|
||||
const mode = page.locator('label').nth(2)
|
||||
const modalVal = page.getByText('模式切换事件: timeline')
|
||||
const modalVal = page.getByText('模式切换事件: schedule')
|
||||
await timeBtn.click()
|
||||
await page.waitForTimeout(100)
|
||||
await leftYear.click()
|
||||
await page.waitForTimeout(100)
|
||||
await month6.click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(timeInput).toHaveText('2022 年 06 月')
|
||||
await expect(timeInput).toHaveAttribute('title', '2022 年 06 月')
|
||||
await leftSvg.click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(timeInput).toHaveText('2022 年 05 月')
|
||||
await expect(timeInput).toHaveAttribute('title', '2022 年 05 月')
|
||||
await rightSvg.click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(timeInput).toHaveText('2022 年 06 月')
|
||||
await expect(timeInput).toHaveAttribute('title', '2022 年 06 月')
|
||||
await mode.click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(modalVal).toBeVisible()
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import { test, expect } from '@playwright/test'
|
|||
test('显示模式', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('calendar-view#calendar-mode')
|
||||
const monthBtn = page.locator('label').nth(1)
|
||||
const timelineBtn = page.locator('label').nth(2)
|
||||
const scheduleBtn = page.locator('label').nth(3)
|
||||
const monthBtn = page.getByLabel('示例', { exact: true }).locator('label').first()
|
||||
const timelineBtn = page.getByLabel('示例', { exact: true }).locator('label').nth(1)
|
||||
const scheduleBtn = page.getByLabel('示例', { exact: true }).locator('label').nth(2)
|
||||
const dmonthDom = page.locator('.tiny-calendar-view-month__main')
|
||||
const timelineDom = page.locator('.tiny-calendar-view-week__timeline')
|
||||
const scheduleDom = page.locator('.tiny-calendar-view-week__schedule')
|
||||
|
|
|
|||
|
|
@ -3,8 +3,10 @@ import { test, expect } from '@playwright/test'
|
|||
test('自定义头部显示', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('calendar-view#custom-header')
|
||||
const timelineBtn = page.locator('label').nth(3)
|
||||
const customHeader = page.getByText('2023-5-3 周三')
|
||||
|
||||
const demo = page.locator('#custom-header')
|
||||
const timelineBtn = page.getByLabel('示例', { exact: true }).locator('label').nth(2)
|
||||
const customHeader = demo.getByText('2023-5-3 周三')
|
||||
await timelineBtn.click()
|
||||
await page.waitForTimeout(200)
|
||||
await expect(customHeader).toBeVisible()
|
||||
|
|
|
|||
|
|
@ -62,17 +62,17 @@ const dataArr = ref([
|
|||
{
|
||||
title: 'TinyVue',
|
||||
content: '^15.0.01',
|
||||
imageSrc: ''
|
||||
imageSrc: 'https://res.hc-cdn.com/tinyui-design/1.0.7.20240711104855/home/images/tinyvue.svg'
|
||||
},
|
||||
{
|
||||
title: 'TinyNG',
|
||||
content: '^16.0.01',
|
||||
imageSrc: ''
|
||||
imageSrc: 'https://res.hc-cdn.com/tinyui-design/1.0.7.20240711104855/home/images/tinyng.svg'
|
||||
},
|
||||
{
|
||||
title: 'TinyEngine',
|
||||
content: '^14.0.01',
|
||||
imageSrc: '',
|
||||
imageSrc: 'https://res.hc-cdn.com/tinyui-design/1.0.7.20240711104855/home/images/tinyengine.svg',
|
||||
selectVal: 'TinyVue',
|
||||
options: [
|
||||
{ value: 'TinyVue', label: 'TinyVue' },
|
||||
|
|
@ -128,6 +128,9 @@ const dataArr = ref([
|
|||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #2f5bea;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
.card-text {
|
||||
margin-left: 16px;
|
||||
|
|
|
|||
|
|
@ -69,17 +69,17 @@ export default {
|
|||
{
|
||||
title: 'TinyVue',
|
||||
content: '^15.0.01',
|
||||
imageSrc: ''
|
||||
imageSrc: 'https://res.hc-cdn.com/tinyui-design-common/1.0.7.20240711104855/assets/tinyvue.svg'
|
||||
},
|
||||
{
|
||||
title: 'TinyNG',
|
||||
content: '^16.0.01',
|
||||
imageSrc: ''
|
||||
imageSrc: 'https://res.hc-cdn.com/tinyui-design/1.0.7.20240711104855/home/images/tinyng.svg'
|
||||
},
|
||||
{
|
||||
title: 'TinyEngine',
|
||||
content: '^14.0.01',
|
||||
imageSrc: '',
|
||||
imageSrc: 'https://res.hc-cdn.com/tinyui-design/1.0.7.20240711104855/home/images/tinyengine.svg',
|
||||
selectVal: 'TinyVue',
|
||||
options: [
|
||||
{ value: 'TinyVue', label: 'TinyVue' },
|
||||
|
|
@ -138,6 +138,9 @@ export default {
|
|||
display: block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #2f5bea;
|
||||
border-radius: 4px;
|
||||
padding: 4px;
|
||||
}
|
||||
.card-text {
|
||||
margin-left: 16px;
|
||||
|
|
|
|||
|
|
@ -63,12 +63,12 @@ const dataArr = ref([
|
|||
{
|
||||
title: 'TinyVue',
|
||||
content: '^15.0.01',
|
||||
imageSrc: ''
|
||||
imageSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
|
||||
},
|
||||
{
|
||||
title: 'TinyNG',
|
||||
content: '^16.0.01',
|
||||
imageSrc: ''
|
||||
imageSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet2.jpg`
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -69,12 +69,12 @@ export default {
|
|||
{
|
||||
title: 'TinyVue',
|
||||
content: '^15.0.01',
|
||||
imageSrc: ''
|
||||
imageSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
|
||||
},
|
||||
{
|
||||
title: 'TinyNG',
|
||||
content: '^16.0.01',
|
||||
imageSrc: ''
|
||||
imageSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet2.jpg`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,24 +7,12 @@ test('自动切换', async ({ page }) => {
|
|||
await page.waitForTimeout(100)
|
||||
const preview = page.locator('#autoplay')
|
||||
const carousel = preview.locator('.tiny-carousel')
|
||||
const carouselItems = preview.locator('.tiny-carousel__item')
|
||||
const carouselItems = carousel.locator('.tiny-carousel__item')
|
||||
// 默认显示第一张幻灯片
|
||||
await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
||||
|
||||
// 这里需要等待幻灯片在3秒后切换
|
||||
// 这里需要等待幻灯片在3秒后切换,注意： 此测试用例只需要关注自动切换即可
|
||||
await page.waitForTimeout(3000)
|
||||
// 当前应该显示第二张幻灯片
|
||||
await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
||||
|
||||
await carousel.hover()
|
||||
await page.waitForTimeout(100)
|
||||
// 点击下一张按钮
|
||||
await preview.locator('button:nth-child(2)').click()
|
||||
// 当前应该显示第三张幻灯片
|
||||
await expect(carouselItems.nth(2)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
||||
|
||||
// 点击上一张按钮
|
||||
await page.locator('.tiny-carousel__arrow').first().click()
|
||||
// 当前应该显示第二张幻灯片
|
||||
await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
:src="child.cardSrc"
|
||||
custom-class="card-demo"
|
||||
@click="curIndex = childIndex"
|
||||
:status="curIndex === childIndex ? 'success' : ''"
|
||||
>
|
||||
<div>{{ child.content }}</div>
|
||||
</tiny-card>
|
||||
|
|
@ -51,6 +50,12 @@ const state = reactive({
|
|||
cardType: 'logo',
|
||||
cardSrc: `${userHead.value}`,
|
||||
content: '1-3-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '1-4',
|
||||
cardType: 'logo',
|
||||
cardSrc: `${userHead.value}`,
|
||||
content: '1-4-content'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -83,16 +88,15 @@ const state = reactive({
|
|||
<style scoped>
|
||||
.card-dsp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
padding: 0 4px 0 12px;
|
||||
}
|
||||
.mb {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-demo {
|
||||
width: 30%;
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
.card-demo:hover {
|
||||
border-color: #1476ff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@
|
|||
:src="child.cardSrc"
|
||||
custom-class="card-demo"
|
||||
@click="curIndex = childIndex"
|
||||
:status="curIndex === childIndex ? 'success' : ''"
|
||||
>
|
||||
<div>{{ child.content }}</div>
|
||||
</tiny-card>
|
||||
|
|
@ -55,6 +54,12 @@ export default {
|
|||
cardType: 'logo',
|
||||
cardSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
|
||||
content: '1-3-content'
|
||||
},
|
||||
{
|
||||
cardTitle: '1-4',
|
||||
cardType: 'logo',
|
||||
cardSrc: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
|
||||
content: '1-4-content'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -89,16 +94,15 @@ export default {
|
|||
<style scoped>
|
||||
.card-dsp {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
padding: 0 4px 0 12px;
|
||||
}
|
||||
.mb {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.card-demo {
|
||||
width: 30%;
|
||||
width: 25%;
|
||||
height: 300px;
|
||||
}
|
||||
.card-demo:hover {
|
||||
border-color: #1476ff;
|
||||
margin-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ test('动态加载 lazyload', async ({ page }) => {
|
|||
const svg = page.locator('.tiny-cascader-node__postfix > path')
|
||||
await expect(svg).toHaveAttribute(
|
||||
'd',
|
||||
'M7 21c.2 0 .5-.1.6-.2l9.9-8c.2-.2.4-.5.4-.8 0-.3-.1-.6-.4-.8L7.6 3.3c-.4-.4-1.1-.3-1.4.2-.4.4-.3 1.1.2 1.4l8.9 7.2-8.9 7.2c-.4.4-.5 1-.2 1.4.2.2.5.3.8.3z'
|
||||
'M5.44 1.23a.9.9 0 0 0-1.19 0c-.3.27-.33.69-.1.99l.1.11 6.02 5.56c.05.04.06.11.03.17l-.04.05-6.02 5.56c-.33.3-.33.8 0 1.1.29.27.75.3 1.07.09l.12-.09 6.02-5.56c.67-.62.72-1.61.14-2.28l-.14-.15-6.01-5.55z'
|
||||
)
|
||||
await page.getByRole('menuitem', { name: '选项1' }).click()
|
||||
const loadingSvg = page.getByRole('menuitem', { name: '选项1' }).locator('path')
|
||||
|
|
|
|||
|
|
@ -21,5 +21,7 @@ const checked = ref(false)
|
|||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ test('带边框复选框', async ({ page }) => {
|
|||
const checkbox = demo.locator('.tiny-checkbox')
|
||||
const label = demo.locator('.tiny-checkbox__label > div').first()
|
||||
|
||||
await expect(checkbox).toHaveCSS('width', '156px')
|
||||
await expect(checkbox).toHaveCSS('width', '158px')
|
||||
await expect(checkbox).toHaveCSS('height', '40px')
|
||||
await expect(checkbox).toHaveCSS('border-left-color', 'rgb(173, 176, 184)')
|
||||
await expect(checkbox).toHaveCSS('border-bottom-color', 'rgb(173, 176, 184)')
|
||||
|
|
|
|||
|
|
@ -30,5 +30,7 @@ export default {
|
|||
white-space: nowrap;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue