forked from opentiny/tiny-vue
test(e2e): fix e2e error (#1471)
This commit is contained in:
ajaxzheng
GitHub
parent
5f798de86b
commit
ba392507d3
|
|
@ -1,5 +1,5 @@
|
|||
export default {
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
apis: [
|
||||
{
|
||||
name: 'Card',
|
||||
|
|
@ -14,7 +14,8 @@ export default {
|
|||
'en-US':
|
||||
'Indicates whether the card width is automatically expanded. After the setting, the card width is not fixed.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: 'card-auto-width'
|
||||
},
|
||||
{
|
||||
|
|
@ -26,7 +27,8 @@ export default {
|
|||
'en-US':
|
||||
'Set single-choice, multiple-choice, single-choice, and radio. Multi-choice/checkbox. You need to set the label at the same time.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'check-type-checkbox',
|
||||
mfDemo: 'check-type-checkbox'
|
||||
},
|
||||
{
|
||||
|
|
@ -37,7 +39,8 @@ export default {
|
|||
'zh-CN': '卡片的class',
|
||||
'en-US': 'Class of the card'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'custom-class',
|
||||
mfDemo: 'card-custom-class'
|
||||
},
|
||||
{
|
||||
|
|
@ -48,7 +51,8 @@ export default {
|
|||
'zh-CN': '卡片禁用',
|
||||
'en-US': 'Card disabled'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-disabled',
|
||||
mfDemo: 'card-disabled'
|
||||
},
|
||||
{
|
||||
|
|
@ -59,8 +63,9 @@ export default {
|
|||
'zh-CN': '卡片内容区域的高度',
|
||||
'en-US': 'Height of the card content area'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'card-height'
|
||||
mode: ['pc', 'mobile-first'],
|
||||
mfDemo: 'card-height',
|
||||
pcDemo: 'custom-class'
|
||||
},
|
||||
{
|
||||
name: 'icon-more',
|
||||
|
|
@ -70,7 +75,8 @@ export default {
|
|||
'zh-CN': '更多按钮图标，可传入一个svg图标对象进行替换',
|
||||
'en-US': 'More button icons can be replaced by a svg icon object.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: 'card-icon-more'
|
||||
},
|
||||
{
|
||||
|
|
@ -81,7 +87,8 @@ export default {
|
|||
'zh-CN': 'checkbox或radio的label',
|
||||
'en-US': 'Checkbox or radio label.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'check-type-checkbox',
|
||||
mfDemo: 'card-label'
|
||||
},
|
||||
{
|
||||
|
|
@ -92,7 +99,8 @@ export default {
|
|||
'zh-CN': '操作按钮配置',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'operate-bar',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
|
|
@ -103,7 +111,8 @@ export default {
|
|||
'zh-CN': '尺寸，支持large、medium、small、mini 4个尺寸，默认值为medium',
|
||||
'en-US': 'Size. The options are large, medium, small, and mini. The default value is medium.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-size',
|
||||
mfDemo: 'card-size'
|
||||
},
|
||||
{
|
||||
|
|
@ -114,7 +123,8 @@ export default {
|
|||
'zh-CN': '图片或者视频的地址',
|
||||
'en-US': 'Address of a picture or video.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-type',
|
||||
mfDemo: 'card-src'
|
||||
},
|
||||
{
|
||||
|
|
@ -125,7 +135,8 @@ export default {
|
|||
'zh-CN': '卡片状态，支持 success、warning、alerting、danger 4 种状态',
|
||||
'en-US': 'Card status. The value can be success, warning, alerting, or dangerous.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-status',
|
||||
mfDemo: 'card-status'
|
||||
},
|
||||
{
|
||||
|
|
@ -136,7 +147,8 @@ export default {
|
|||
'zh-CN': '卡片的标题',
|
||||
'en-US': 'The title of the card.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-status',
|
||||
mfDemo: 'card-title'
|
||||
},
|
||||
{
|
||||
|
|
@ -147,7 +159,8 @@ export default {
|
|||
'zh-CN': '设置卡片类型，支持 text、image、video、logo 4 种类型。',
|
||||
'en-US': 'Set the card type. The options are text, image, video, and logo.'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-type',
|
||||
mfDemo: 'card-type'
|
||||
},
|
||||
{
|
||||
|
|
@ -158,7 +171,8 @@ export default {
|
|||
'zh-CN': '绑定值，默认为空',
|
||||
'en-US': ''
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'check-type-checkbox',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
|
|
@ -171,7 +185,8 @@ export default {
|
|||
'zh-CN': '组件选中/取消选中事件',
|
||||
'en-US': 'Component check/uncheck event'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-events',
|
||||
mfDemo: 'card-events'
|
||||
},
|
||||
{
|
||||
|
|
@ -182,8 +197,21 @@ export default {
|
|||
'zh-CN': '操作栏按钮点击事件',
|
||||
'en-US': 'Operation bar button click event'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'card-events',
|
||||
mfDemo: 'card-events'
|
||||
},
|
||||
{
|
||||
name: 'click',
|
||||
type: 'Function()',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '点击卡片事件',
|
||||
'en-US': 'Click card event'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: '',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
|
|
@ -196,7 +224,8 @@ export default {
|
|||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'slot',
|
||||
mfDemo: 'slot'
|
||||
},
|
||||
{
|
||||
|
|
@ -207,7 +236,8 @@ export default {
|
|||
'zh-CN': '组件默认插槽',
|
||||
'en-US': 'Component Default Slot'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'slot',
|
||||
mfDemo: 'slot'
|
||||
},
|
||||
{
|
||||
|
|
@ -218,7 +248,8 @@ export default {
|
|||
'zh-CN': '标题插槽',
|
||||
'en-US': 'Header Slot'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'slot',
|
||||
mfDemo: 'slot'
|
||||
},
|
||||
{
|
||||
|
|
@ -229,7 +260,8 @@ export default {
|
|||
'zh-CN': '标题左侧插槽',
|
||||
'en-US': 'Header Left Slot'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'slot',
|
||||
mfDemo: 'slot'
|
||||
},
|
||||
{
|
||||
|
|
@ -240,7 +272,8 @@ export default {
|
|||
'zh-CN': '标题右侧插槽',
|
||||
'en-US': 'Header right slot'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'slot',
|
||||
mfDemo: 'slot'
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -303,7 +303,8 @@ export default {
|
|||
},
|
||||
{
|
||||
name: 'http-request',
|
||||
type: '() => Promise',
|
||||
type: '(file: IFile) => Promise<any>',
|
||||
typeAnchorName: 'IFile',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '覆盖默认的上传行为，可以自定义上传的实现; 由于 TinyVue 官网为 Mock 上传不能执行上传',
|
||||
|
|
|
|||
|
|
@ -6,34 +6,104 @@ export default {
|
|||
type: 'component',
|
||||
props: [
|
||||
{
|
||||
name: 'dataSource',
|
||||
type: '[]',
|
||||
defaultValue: '',
|
||||
name: 'data-source',
|
||||
type: 'IMultiSelectMenu[]',
|
||||
typeAnchorName: 'IMultiSelectMenu',
|
||||
defaultValue: '[]',
|
||||
desc: {
|
||||
'zh-CN': '<p>数据</p>',
|
||||
'en-US': 'display different button'
|
||||
'zh-CN': '数据源',
|
||||
'en-US': 'data source'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'basic-usage'
|
||||
},
|
||||
{
|
||||
name: 'defaultSelectedArray',
|
||||
type: '[]',
|
||||
name: 'default-selected-array',
|
||||
type: 'number[]',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>默认值</p>',
|
||||
'en-US': 'display different button'
|
||||
'zh-CN': `默认值，当 type='wheel' 时适用`,
|
||||
'en-US': `default selected value, used when type='wheel'`
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'basic-usage'
|
||||
mobileDemo: 'type-wheel'
|
||||
},
|
||||
{
|
||||
name: 'disabled',
|
||||
type: 'Boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'disabled'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'disabled'
|
||||
},
|
||||
{
|
||||
name: 'filterable',
|
||||
type: 'Boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '可筛选',
|
||||
'en-US': 'filterable'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'filter'
|
||||
},
|
||||
{
|
||||
name: 'mask',
|
||||
type: 'Boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '是否显示遮罩层',
|
||||
'en-US': 'to show mask'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'mask'
|
||||
},
|
||||
{
|
||||
name: 'mask-options',
|
||||
type: 'IMaskOptions',
|
||||
typeAnchorName: 'IMaskOptions',
|
||||
defaultValue: '{}',
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'遮罩层配置：<ul><li>zIndex: 遮罩层的层叠数值</li><li>cancelTouch: 是否禁用 touch 事件，禁用后点击遮罩层不能关闭下拉框</li></ul>',
|
||||
'en-US':
|
||||
'Mask layer settings, including the following properties: <p>zIndex: the stacking order value of the mask layer;</p><p>cancelTouch: whether to disable touch events.</p>'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'mask-options'
|
||||
},
|
||||
{
|
||||
name: 'search-placeholder',
|
||||
type: 'string',
|
||||
defaultValue: '搜索',
|
||||
desc: {
|
||||
'zh-CN': '搜索框默认提示',
|
||||
'en-US': 'search input placeholder'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'filter'
|
||||
},
|
||||
{
|
||||
name: 'type',
|
||||
type: `'list' | 'wheel'`,
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '选项外观，其中 list：列表形式；wheel：滑轮模式',
|
||||
'en-US': 'option appearance'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'wheel'
|
||||
},
|
||||
{
|
||||
name: 'v-model/modelValue',
|
||||
type: '[]',
|
||||
defaultValue: '',
|
||||
type: '(string | string[])[]',
|
||||
defaultValue: '[]',
|
||||
desc: {
|
||||
'zh-CN': '<p>选中值</p>',
|
||||
'en-US': ''
|
||||
'en-US': '<p>selected value</p>'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'basic-usage'
|
||||
|
|
@ -41,28 +111,77 @@ export default {
|
|||
],
|
||||
events: [
|
||||
{
|
||||
name: 'confim',
|
||||
defaultValue: '',
|
||||
name: 'item-click',
|
||||
type: '(option, headerIndex) => void',
|
||||
desc: {
|
||||
'zh-CN': '<p>确认事件</p>',
|
||||
'en-US': 'display different button'
|
||||
'zh-CN': '点击选项事件，当 type="list" 时适用',
|
||||
'en-us': 'click option event, applicable when type = "list"'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'basic-usage'
|
||||
mobileDemo: 'event-click-item'
|
||||
},
|
||||
{
|
||||
name: 'confirm',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': `确认事件，当 type='wheel' 时适用`,
|
||||
'en-US': `confirm selection event, applicable when the type = 'wheel'`
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'type-wheel'
|
||||
},
|
||||
{
|
||||
name: 'reset',
|
||||
type: '',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '<p>重置事件</p>',
|
||||
'en-US': 'display different button'
|
||||
'zh-CN': `重置事件，当 type='wheel' 时适用`,
|
||||
'en-US': `reset selection event, applicable when the type = 'wheel'`
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'basic-usage'
|
||||
mobileDemo: 'type-wheel'
|
||||
}
|
||||
],
|
||||
methods: [],
|
||||
slots: []
|
||||
slots: [
|
||||
{
|
||||
name: 'footer',
|
||||
desc: {
|
||||
'zh-CN': '选项底部插槽',
|
||||
'en-US': 'slot under options'
|
||||
},
|
||||
mode: ['mobile'],
|
||||
mobileDemo: 'slots'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
types: [
|
||||
{
|
||||
name: 'IMultiSelectMenu',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IMultiSelectMenu {
|
||||
title: string, // 菜单项标题
|
||||
options: IMultiSelectOption[], // 选项数据
|
||||
multiple?: boolean, // 是否多选
|
||||
disabled?: boolean, // 菜单项是否禁用
|
||||
hasFooter?: boolean // 是否显示底部
|
||||
}
|
||||
`
|
||||
},
|
||||
{
|
||||
name: 'IMultiSelectOption',
|
||||
type: 'interface',
|
||||
code: `
|
||||
interface IMultiSelectOption {
|
||||
label: string, // 选项内容
|
||||
value: string, // 选项值
|
||||
disabled?: boolean, // 是否禁用
|
||||
children?: IMultiSelectOption[], // 子选项数据
|
||||
}
|
||||
`
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -282,6 +282,45 @@ export default {
|
|||
pcDemo: 'tabs-events-close',
|
||||
mobileDemo: 'add-delete-tab',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'beforeClose',
|
||||
type: 'Function',
|
||||
defaultValue: '',
|
||||
desc: {
|
||||
'zh-CN': '关闭页签前的回调函数，入参为页签名。如果函数返回false 或 拒绝的Promise，则不关闭页签',
|
||||
'en-US':
|
||||
'Callback function before closing a tab. The input parameter is the tab name. If the function returns false or a rejected Promise, the tab is not closed.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'tabs-events-close',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'overflow-title',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '页签是否在超过 title-width 省略显示',
|
||||
'en-US':
|
||||
'Callback function before closing a tab. The input parameter is the tab name. If the function returns false or a rejected Promise, the tab is not closed.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'overflow-title',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'title-width',
|
||||
type: 'String',
|
||||
defaultValue: '256px',
|
||||
desc: {
|
||||
'zh-CN': '当 overflow-title 为 true 时，指定页签标题的最大宽度',
|
||||
'en-US':
|
||||
'Callback function before closing a tab. The input parameter is the tab name. If the function returns false or a rejected Promise, the tab is not closed.'
|
||||
},
|
||||
mode: ['pc', 'mobile-first'],
|
||||
pcDemo: 'overflow-title',
|
||||
mfDemo: ''
|
||||
}
|
||||
],
|
||||
events: [
|
||||
|
|
|
|||
|
|
@ -40,6 +40,17 @@ export default {
|
|||
pcDemo: 'basic-usage',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'fold-disabled',
|
||||
type: 'boolean',
|
||||
defaultValue: 'false',
|
||||
desc: {
|
||||
'zh-CN': '禁用折叠',
|
||||
'en-US': 'to disable folding feature'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'horizontal',
|
||||
type: 'boolean',
|
||||
|
|
@ -51,6 +62,17 @@ export default {
|
|||
mode: ['pc'],
|
||||
pcDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'limited-nodes',
|
||||
type: 'number | string',
|
||||
defaultValue: '3',
|
||||
desc: {
|
||||
'zh-CN': '折叠后展示的节点个数',
|
||||
'en-US': 'number of nodes displayed after folding'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'limited-nodes'
|
||||
},
|
||||
{
|
||||
name: 'line-width',
|
||||
type: 'string | number',
|
||||
|
|
@ -75,6 +97,17 @@ export default {
|
|||
pcDemo: 'custom-field',
|
||||
mfDemo: ''
|
||||
},
|
||||
{
|
||||
name: 'node-max',
|
||||
type: 'number | string',
|
||||
defaultValue: '7',
|
||||
desc: {
|
||||
'zh-CN': '最大显示节点数',
|
||||
'en-US': 'maximum nodes to display'
|
||||
},
|
||||
mode: ['mobile-first'],
|
||||
mfDemo: 'node-max'
|
||||
},
|
||||
{
|
||||
name: 'only-number',
|
||||
type: 'boolean',
|
||||
|
|
|
|||
|
|
@ -141,7 +141,7 @@ export default {
|
|||
name: 'placement',
|
||||
typeAnchorName: 'IPopperPlacement',
|
||||
type: 'IPopperPlacement',
|
||||
defaultValue: ' "bottom"',
|
||||
defaultValue: "'bottom'",
|
||||
desc: {
|
||||
'zh-CN': 'Tooltip 的出现位置',
|
||||
'en-US': 'Location where the tooltip appears'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<tiny-card title="这是卡片标题" type="image" :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`">
|
||||
<tiny-card title="这是卡片标题" type="image" :src="imageUrl">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
|
|
@ -15,7 +15,9 @@ export default {
|
|||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,11 +7,7 @@
|
|||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card
|
||||
title="这是图片类型"
|
||||
type="image"
|
||||
:src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`"
|
||||
>
|
||||
<tiny-card title="这是图片类型" type="image" :src="img1">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
|
|
@ -29,12 +25,7 @@
|
|||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card
|
||||
title="这是logo类型"
|
||||
type="logo"
|
||||
size="mini"
|
||||
:src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`"
|
||||
>
|
||||
<tiny-card title="这是logo类型" type="logo" size="mini" :src="img2">
|
||||
<p>这是一段长文本内容，这是一段长文本内容</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
|
|
@ -48,7 +39,10 @@ export default {
|
|||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
img1: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`,
|
||||
img2: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -34,11 +34,7 @@
|
|||
</p>
|
||||
<template #footer>
|
||||
<div class="flex">
|
||||
<img
|
||||
:src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`"
|
||||
class="h-9 w-9"
|
||||
alt="user-head"
|
||||
/>
|
||||
<img :src="imageUrl" class="h-9 w-9" alt="user-head" />
|
||||
<div class="pl-4">
|
||||
<p class="text-sm">刘小华</p>
|
||||
<p class="text-xs text-color-text-secondary">2023-03-20 10:10:10</p>
|
||||
|
|
@ -60,6 +56,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
|
||||
options: [
|
||||
{
|
||||
text: '删除列表',
|
||||
|
|
|
|||
|
|
@ -2,16 +2,16 @@
|
|||
<div class="w-80">
|
||||
<tiny-carousel aspect-ratio="2:1" :loop="false">
|
||||
<tiny-carousel-item class="">
|
||||
<img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`" alt="" />
|
||||
<img :src="img1" alt="" />
|
||||
</tiny-carousel-item>
|
||||
<tiny-carousel-item class="">
|
||||
<img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/jz.png`" alt="" />
|
||||
<img :src="img2" alt="" />
|
||||
</tiny-carousel-item>
|
||||
<tiny-carousel-item class="">
|
||||
<img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`" alt="" />
|
||||
<img :src="img3" alt="" />
|
||||
</tiny-carousel-item>
|
||||
<tiny-carousel-item class="">
|
||||
<img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/px.png`" alt="" />
|
||||
<img :src="img4" alt="" />
|
||||
</tiny-carousel-item>
|
||||
</tiny-carousel>
|
||||
</div>
|
||||
|
|
@ -24,6 +24,14 @@ export default {
|
|||
components: {
|
||||
TinyCarousel: Carousel,
|
||||
TinyCarouselItem: CarouselItem
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
img1: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`,
|
||||
img2: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/jz.png`,
|
||||
img3: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/ld.png`,
|
||||
img4: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/px.png`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<tiny-column-list-item
|
||||
v-model="value"
|
||||
:show-checkbox="true"
|
||||
:image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
|
||||
:image="imageUrl"
|
||||
size="medium"
|
||||
:options="options1"
|
||||
:flex-grow="[1, 1]"
|
||||
|
|
@ -26,12 +26,7 @@
|
|||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
<tiny-column-list-item
|
||||
:image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
|
||||
size="medium"
|
||||
:options="options2"
|
||||
class="mb-3"
|
||||
>
|
||||
<tiny-column-list-item :image="imageUrl" size="medium" :options="options2" class="mb-3">
|
||||
<template #column1>
|
||||
<ul class="text-color-fill-secondary">
|
||||
<li class="text-sm text-color-text-primary font-medium mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
@ -106,6 +101,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
|
||||
value: ['1'],
|
||||
options1: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-column-list-item
|
||||
:image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
|
||||
:flex-grow="[0, 0]"
|
||||
:flex-basis="['25%', '25%']"
|
||||
class="mb-3"
|
||||
>
|
||||
<tiny-column-list-item :image="imageUrl" :flex-grow="[0, 0]" :flex-basis="['25%', '25%']" class="mb-3">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
@ -61,7 +56,9 @@ export default {
|
|||
TinyColumnListItem: ColumnListItem
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-column-list-item
|
||||
:image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
|
||||
@icon-click="iconClick"
|
||||
:options="options"
|
||||
>
|
||||
<tiny-column-list-item :image="imageUrl" @icon-click="iconClick" :options="options">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
@ -46,6 +42,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
|
||||
options: [
|
||||
{
|
||||
text: '删除列表',
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-column-list-item
|
||||
:image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
|
||||
@icon-click="iconClick"
|
||||
:options="options"
|
||||
>
|
||||
<tiny-column-list-item :image="imageUrl" @icon-click="iconClick" :options="options">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
@ -46,6 +42,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
|
||||
options: [
|
||||
{
|
||||
text: '删除列表',
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<tiny-column-list-item
|
||||
v-model="checked"
|
||||
:show-checkbox="true"
|
||||
:image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
|
||||
:image="imageUrl"
|
||||
:size="size"
|
||||
:options="options"
|
||||
:flex-grow="[1, 3]"
|
||||
|
|
@ -23,11 +23,7 @@
|
|||
</ul>
|
||||
</template>
|
||||
</tiny-column-list-item>
|
||||
<tiny-column-list-item
|
||||
:image="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`"
|
||||
:size="size"
|
||||
:options="options"
|
||||
>
|
||||
<tiny-column-list-item :image="imageUrl" :size="size" :options="options">
|
||||
<template #column1>
|
||||
<ul>
|
||||
<li class="text-sm mb-1 sm:mb-1.5">智能手机智能手机</li>
|
||||
|
|
@ -66,6 +62,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/1.jpg`,
|
||||
checked: true,
|
||||
size: 'small',
|
||||
options: [
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<tiny-time-line :data="data" vertical :limited-nodes="5"></tiny-time-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLine } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLine
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
data: [
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<tiny-time-line :data="data" vertical :node-max="5"></tiny-time-line>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { TimeLine } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyTimeLine: TimeLine
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 1,
|
||||
data: [
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' },
|
||||
{ name: '节点标题', time: '2019-11-11 00:01:30' },
|
||||
{ name: '节点标题', time: '2019-11-12 14:20:15' },
|
||||
{ name: '节点标题', time: '2019-11-14 20:45:50' }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -71,12 +71,37 @@ export default {
|
|||
'en-US': 'Collapse Timeline'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>当节点超过七项时，自动折叠节点，仅展示最近三项，点击后展开</p>',
|
||||
'zh-CN': '<p>当节点个数达到七项时，自动折叠节点，仅展示最近三项，点击后展开。</p>',
|
||||
'en-US':
|
||||
'<p>When there are more than seven nodes, the system automatically collapses the nodes and displays only the latest three nodes.</p>'
|
||||
},
|
||||
codeFiles: ['fold-time.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'node-max',
|
||||
name: {
|
||||
'zh-CN': '触发折叠节点数',
|
||||
'en-US': 'Number of Nodes Triggering Folding'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>node-max</code> 属性可以配置节点达到指定个数后自动折叠节点。</p>',
|
||||
'en-US':
|
||||
'<p>Use <code>node-max</code> to automatically collapse nodes after reaching a specified number of nodes.</p>'
|
||||
},
|
||||
codeFiles: ['node-max.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'limited-nodes',
|
||||
name: {
|
||||
'zh-CN': '折叠后节点数',
|
||||
'en-US': 'Number of Nodes After Folding'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>limited-nodes</code> 属性可以设置折叠后展示的节点个数。</p>',
|
||||
'en-US': '<p>Use <code>node-max</code> to set the number of nodes displayed after folding.</p>'
|
||||
},
|
||||
codeFiles: ['limited-nodes.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'auto-slot',
|
||||
name: {
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Alert } from '@opentiny/vue'
|
||||
import { iconCustom } from '@opentiny/vue-icon'
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Alert } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
<template>
|
||||
<div class="alert-wrap">
|
||||
<tiny-alert>
|
||||
<span style="color: red">根据 default slot 自定义内容</span>
|
||||
<span>配置详细信息请点击</span>
|
||||
<a href="#" class="link">默认配置说明</a>
|
||||
</tiny-alert>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="jsx">
|
||||
<script>
|
||||
import { Alert } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
|
|
@ -20,4 +21,9 @@ export default {
|
|||
.alert-wrap .tiny-mobile-alert {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.link {
|
||||
color: #1476ff;
|
||||
margin-left: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<tiny-exception
|
||||
type="nodata"
|
||||
button-text="重试"
|
||||
:imageUrl="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`"
|
||||
:imageUrl="imageUrl"
|
||||
message="网络异常，请稍后再试，或者联系管理员给您处理"
|
||||
></tiny-exception>
|
||||
</div>
|
||||
|
|
@ -17,7 +17,9 @@ export default {
|
|||
TinyException: Exception
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<tiny-exception
|
||||
type="nodata"
|
||||
button-text="重试"
|
||||
:imageUrl="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`"
|
||||
:imageUrl="imageUrl"
|
||||
message="网络异常，请稍后再试，或者联系管理员给您处理"
|
||||
></tiny-exception>
|
||||
</div>
|
||||
|
|
@ -17,7 +17,9 @@ export default {
|
|||
TinyException: Exception
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,6 @@
|
|||
<template>
|
||||
<div class="tiny-mobile-exception-demo">
|
||||
<tiny-exception
|
||||
type="nodata"
|
||||
message="自定义文本内容"
|
||||
:imageUrl="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`"
|
||||
@btn-click="test"
|
||||
></tiny-exception>
|
||||
<tiny-exception type="nodata" message="自定义文本内容" :imageUrl="imageUrl" @btn-click="test"></tiny-exception>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -17,7 +12,9 @@ export default {
|
|||
TinyException: Exception
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<tiny-exception
|
||||
type="nodata"
|
||||
button-text="重试"
|
||||
:imageUrl="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`"
|
||||
:imageUrl="imageUrl"
|
||||
message="网络异常，请稍后再试，或者联系管理员给您处理"
|
||||
></tiny-exception>
|
||||
</div>
|
||||
|
|
@ -17,7 +17,9 @@ export default {
|
|||
TinyException: Exception
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/planet1.jpg`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
test() {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
<template>
|
||||
<div class="demo-multi-select">
|
||||
<tiny-multi-select :data-source="data" v-model="value"> </tiny-multi-select>
|
||||
<h4 class="title">1. 多下拉项：</h4>
|
||||
<tiny-multi-select :data-source="data1" v-model="value1"> </tiny-multi-select>
|
||||
<p>多下拉项 value: {{ value1 }}</p>
|
||||
<br />
|
||||
|
||||
<p>value: {{ value }}</p>
|
||||
<h4 class="title">2. 单下拉项：</h4>
|
||||
<tiny-multi-select :data-source="data2" v-model="value2"> </tiny-multi-select>
|
||||
<p>单下拉项 value: {{ value2 }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,8 +20,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['', '', ''],
|
||||
data: [
|
||||
value1: ['2020年', '欧洲巴黎', ['私有云']],
|
||||
data1: [
|
||||
{
|
||||
title: '时间',
|
||||
options: [
|
||||
|
|
@ -25,45 +30,45 @@ export default {
|
|||
value: '2020年',
|
||||
children: [
|
||||
{
|
||||
label: '2020全年',
|
||||
label: '全年',
|
||||
children: [],
|
||||
value: '2020全年'
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q1一月',
|
||||
value: '2020年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1二月',
|
||||
value: '2020年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1三月',
|
||||
value: '2020年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q2四月',
|
||||
value: '2020年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2五月',
|
||||
value: '2020年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2六月',
|
||||
value: '2020年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -71,50 +76,44 @@ export default {
|
|||
label: '2021年',
|
||||
children: [
|
||||
{
|
||||
label: '2021全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2021全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q1一月',
|
||||
value: '2021年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1二月',
|
||||
value: '2021年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1三月',
|
||||
value: '2021年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q2四月',
|
||||
value: '2021年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2五月',
|
||||
value: '2021年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2六月',
|
||||
value: '2021年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2021年'
|
||||
|
|
@ -123,50 +122,44 @@ export default {
|
|||
label: '2022年',
|
||||
children: [
|
||||
{
|
||||
label: '2022全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2022全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q1一月',
|
||||
value: '2022年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1二月',
|
||||
value: '2022年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1三月',
|
||||
value: '2022年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q2四月',
|
||||
value: '2022年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2五月',
|
||||
value: '2022年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2六月',
|
||||
value: '2022年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2022年'
|
||||
|
|
@ -175,7 +168,6 @@ export default {
|
|||
},
|
||||
{
|
||||
title: '区域',
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: '海外',
|
||||
|
|
@ -216,7 +208,8 @@ export default {
|
|||
]
|
||||
},
|
||||
{
|
||||
title: '云类型',
|
||||
title: '云类型(多选)',
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: '公有云',
|
||||
|
|
@ -240,7 +233,153 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
],
|
||||
data2: [
|
||||
{
|
||||
title: '时间',
|
||||
options: [
|
||||
{
|
||||
label: '2020年',
|
||||
value: '2020年',
|
||||
children: [
|
||||
{
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: 'Q2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2021年',
|
||||
children: [
|
||||
{
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2021年'
|
||||
},
|
||||
{
|
||||
label: '2022年',
|
||||
children: [
|
||||
{
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2022年'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
value2: []
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -250,5 +389,14 @@ export default {
|
|||
.demo-multi-select {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 16px 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
<template>
|
||||
<div class="demo-multi-select">
|
||||
<p>1. 整体禁用:</p>
|
||||
<div class="page__content">
|
||||
<tiny-multi-select :data-source="data1" disabled> </tiny-multi-select>
|
||||
</div>
|
||||
<h4 class="title">1. 组件禁用:</h4>
|
||||
<tiny-multi-select :data-source="data1" disabled> </tiny-multi-select>
|
||||
<br />
|
||||
|
||||
<p>2. 单项菜单禁用:</p>
|
||||
<div class="page__content">
|
||||
<tiny-multi-select :data-source="data2"> </tiny-multi-select>
|
||||
</div>
|
||||
<h4 class="title">2. 菜单项禁用:</h4>
|
||||
<tiny-multi-select :data-source="data2" v-model="value1"> </tiny-multi-select>
|
||||
<br />
|
||||
|
||||
<h4 class="title">3. 选项禁用:</h4>
|
||||
<tiny-multi-select :data-source="data3" v-model="value2"> </tiny-multi-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -21,6 +22,9 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
value1: ['', '', ''],
|
||||
value2: [''],
|
||||
|
||||
data1: [
|
||||
{
|
||||
title: '时间',
|
||||
|
|
@ -30,97 +34,90 @@ export default {
|
|||
value: '2020年',
|
||||
children: [
|
||||
{
|
||||
label: '2020全年',
|
||||
label: '全年',
|
||||
children: [],
|
||||
value: '2020全年'
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q1一月',
|
||||
value: '2020年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1二月',
|
||||
value: '2020年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1三月',
|
||||
value: '2020年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q2四月',
|
||||
value: '2020年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2五月',
|
||||
value: '2020年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2六月',
|
||||
value: '2020年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2020年'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2021年',
|
||||
children: [
|
||||
{
|
||||
label: '2021全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2021全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q1一月',
|
||||
value: '2021年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1二月',
|
||||
value: '2021年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1三月',
|
||||
value: '2021年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q2四月',
|
||||
value: '2021年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2五月',
|
||||
value: '2021年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2六月',
|
||||
value: '2021年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2021年'
|
||||
|
|
@ -129,98 +126,50 @@ export default {
|
|||
label: '2022年',
|
||||
children: [
|
||||
{
|
||||
label: '2022全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2022全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q1一月',
|
||||
value: '2022年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1二月',
|
||||
value: '2022年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1三月',
|
||||
value: '2022年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q2四月',
|
||||
value: '2022年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2五月',
|
||||
value: '2022年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2六月',
|
||||
value: '2022年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2022年'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '区域',
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: '海外',
|
||||
children: [
|
||||
{
|
||||
label: '欧洲巴黎',
|
||||
value: '欧洲巴黎'
|
||||
},
|
||||
{
|
||||
label: '巴基斯坦',
|
||||
value: '巴基斯坦'
|
||||
},
|
||||
{
|
||||
label: '土耳其',
|
||||
value: '土耳其'
|
||||
}
|
||||
],
|
||||
value: '海外'
|
||||
},
|
||||
{
|
||||
label: '中国',
|
||||
children: [
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海'
|
||||
},
|
||||
{
|
||||
label: '南京',
|
||||
value: '南京'
|
||||
}
|
||||
],
|
||||
value: '中国'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '云类型',
|
||||
options: [
|
||||
|
|
@ -256,97 +205,90 @@ export default {
|
|||
value: '2020年',
|
||||
children: [
|
||||
{
|
||||
label: '2020全年',
|
||||
label: '全年',
|
||||
children: [],
|
||||
value: '2020全年'
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q1一月',
|
||||
value: '2020年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1二月',
|
||||
value: '2020年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1三月',
|
||||
value: '2020年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q2四月',
|
||||
value: '2020年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2五月',
|
||||
value: '2020年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2六月',
|
||||
value: '2020年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2020年'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2021年',
|
||||
children: [
|
||||
{
|
||||
label: '2021全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2021全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q1一月',
|
||||
value: '2021年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1二月',
|
||||
value: '2021年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1三月',
|
||||
value: '2021年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q2四月',
|
||||
value: '2021年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2五月',
|
||||
value: '2021年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2六月',
|
||||
value: '2021年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2021年'
|
||||
|
|
@ -355,50 +297,44 @@ export default {
|
|||
label: '2022年',
|
||||
children: [
|
||||
{
|
||||
label: '2022全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2022全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q1一月',
|
||||
value: '2022年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1二月',
|
||||
value: '2022年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1三月',
|
||||
value: '2022年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q2四月',
|
||||
value: '2022年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2五月',
|
||||
value: '2022年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2六月',
|
||||
value: '2022年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2022年'
|
||||
|
|
@ -472,6 +408,51 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
data3: [
|
||||
{
|
||||
title: '区域',
|
||||
options: [
|
||||
{
|
||||
label: '中国',
|
||||
children: [
|
||||
{
|
||||
label: '北京',
|
||||
value: '北京'
|
||||
},
|
||||
{
|
||||
label: '上海',
|
||||
value: '上海',
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
label: '南京',
|
||||
value: '南京'
|
||||
}
|
||||
],
|
||||
value: '中国'
|
||||
},
|
||||
{
|
||||
label: '海外',
|
||||
disabled: true,
|
||||
children: [
|
||||
{
|
||||
label: '欧洲巴黎',
|
||||
value: '欧洲巴黎'
|
||||
},
|
||||
{
|
||||
label: '巴基斯坦',
|
||||
value: '巴基斯坦'
|
||||
},
|
||||
{
|
||||
label: '土耳其',
|
||||
value: '土耳其'
|
||||
}
|
||||
],
|
||||
value: '海外'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -481,27 +462,14 @@ export default {
|
|||
<style scoped>
|
||||
.demo-multi-select {
|
||||
height: 100%;
|
||||
padding: 12px 0;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.page__hd {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.page__title {
|
||||
font-weight: 400;
|
||||
font-size: 21px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page__desc {
|
||||
margin-top: 5px;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page__content {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
.title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<template>
|
||||
<div class="demo-multi-select">
|
||||
<tiny-multi-select :data-source="data" v-model="value" @item-click="handleItemClick"> </tiny-multi-select>
|
||||
|
||||
<p>value: {{ value }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -23,97 +25,90 @@ export default {
|
|||
value: '2020年',
|
||||
children: [
|
||||
{
|
||||
label: '2020全年',
|
||||
label: '全年',
|
||||
children: [],
|
||||
value: '2020全年'
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q1一月',
|
||||
value: '2020年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1二月',
|
||||
value: '2020年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1三月',
|
||||
value: '2020年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q2四月',
|
||||
value: '2020年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2五月',
|
||||
value: '2020年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2六月',
|
||||
value: '2020年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2020年'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2021年',
|
||||
children: [
|
||||
{
|
||||
label: '2021全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2021全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q1一月',
|
||||
value: '2021年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1二月',
|
||||
value: '2021年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1三月',
|
||||
value: '2021年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q2四月',
|
||||
value: '2021年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2五月',
|
||||
value: '2021年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2六月',
|
||||
value: '2021年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2021年'
|
||||
|
|
@ -122,50 +117,44 @@ export default {
|
|||
label: '2022年',
|
||||
children: [
|
||||
{
|
||||
label: '2022全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2022全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q1一月',
|
||||
value: '2022年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1二月',
|
||||
value: '2022年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1三月',
|
||||
value: '2022年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q2四月',
|
||||
value: '2022年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2五月',
|
||||
value: '2022年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2六月',
|
||||
value: '2022年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2022年'
|
||||
|
|
@ -174,7 +163,6 @@ export default {
|
|||
},
|
||||
{
|
||||
title: '区域',
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: '海外',
|
||||
|
|
@ -243,9 +231,10 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
handleItemClick(data) {
|
||||
handleItemClick(item, headerIndex) {
|
||||
const text = `${this.data[headerIndex].title}: ${item.label}`
|
||||
Toast.service({
|
||||
text: data.label
|
||||
text
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -256,8 +245,4 @@ export default {
|
|||
.demo-multi-select {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 300px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
<template>
|
||||
<div class="demo-multi-select">
|
||||
<tiny-multi-select :data-source="data" filterable v-model="value" v-model:searchValue="searchValue">
|
||||
<tiny-multi-select
|
||||
:data-source="data"
|
||||
filterable
|
||||
v-model="value"
|
||||
v-model:searchValue="searchValue"
|
||||
:search-placeholder="searchPlaceholder"
|
||||
>
|
||||
</tiny-multi-select>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -15,6 +21,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
value: ['', '', ''],
|
||||
searchValue: '',
|
||||
data: [
|
||||
{
|
||||
title: '时间',
|
||||
|
|
@ -24,97 +31,90 @@ export default {
|
|||
value: '2020年',
|
||||
children: [
|
||||
{
|
||||
label: '2020全年',
|
||||
label: '全年',
|
||||
children: [],
|
||||
value: '2020全年'
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q1一月',
|
||||
value: '2020年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1二月',
|
||||
value: '2020年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1三月',
|
||||
value: '2020年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q2四月',
|
||||
value: '2020年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2五月',
|
||||
value: '2020年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2六月',
|
||||
value: '2020年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2020年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2020年'
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2021年',
|
||||
children: [
|
||||
{
|
||||
label: '2021全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2021全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q1一月',
|
||||
value: '2021年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1二月',
|
||||
value: '2021年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1三月',
|
||||
value: '2021年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q2四月',
|
||||
value: '2021年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2五月',
|
||||
value: '2021年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2六月',
|
||||
value: '2021年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2021年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2021年'
|
||||
|
|
@ -123,50 +123,44 @@ export default {
|
|||
label: '2022年',
|
||||
children: [
|
||||
{
|
||||
label: '2022全年',
|
||||
children: [
|
||||
{
|
||||
label: '年',
|
||||
value: '年'
|
||||
}
|
||||
],
|
||||
value: '2022全年'
|
||||
label: '全年',
|
||||
value: '全年'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1',
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q1一月',
|
||||
value: '2022年Q1一月'
|
||||
label: '一月',
|
||||
value: '一月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1二月',
|
||||
value: '2022年Q1二月'
|
||||
label: '二月',
|
||||
value: '二月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1三月',
|
||||
value: '2022年Q1三月'
|
||||
label: '三月',
|
||||
value: '三月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q1'
|
||||
value: 'Q1'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q2四月',
|
||||
value: '2022年Q2四月'
|
||||
label: '四月',
|
||||
value: '四月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2五月',
|
||||
value: '2022年Q2五月'
|
||||
label: '五月',
|
||||
value: '五月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2六月',
|
||||
value: '2022年Q2六月'
|
||||
label: '六月',
|
||||
value: '六月'
|
||||
}
|
||||
],
|
||||
value: '2022年Q2'
|
||||
value: 'Q2'
|
||||
}
|
||||
],
|
||||
value: '2022年'
|
||||
|
|
@ -175,7 +169,6 @@ export default {
|
|||
},
|
||||
{
|
||||
title: '区域',
|
||||
multiple: true,
|
||||
options: [
|
||||
{
|
||||
label: '海外',
|
||||
|
|
@ -240,7 +233,8 @@ export default {
|
|||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
],
|
||||
searchPlaceholder: '自定义提示'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -250,26 +244,4 @@ export default {
|
|||
.demo-multi-select {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page__hd {
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.page__title {
|
||||
font-weight: 400;
|
||||
font-size: 21px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page__desc {
|
||||
margin-top: 5px;
|
||||
color: #888;
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.page__content {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div class="demo-multi-select">
|
||||
<tiny-multi-select :data-source="data" v-model="value" mask> </tiny-multi-select>
|
||||
|
||||
<p>value: {{ value }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { MultiSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMultiSelect: MultiSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: ['公有云'],
|
||||
maskOptions: {
|
||||
'z-index': 100,
|
||||
'cancel-touch': true
|
||||
},
|
||||
data: [
|
||||
{
|
||||
title: '云类型',
|
||||
options: [
|
||||
{
|
||||
label: '公有云',
|
||||
value: '公有云'
|
||||
},
|
||||
{
|
||||
label: '私有云',
|
||||
value: '私有云'
|
||||
},
|
||||
{
|
||||
label: '伙伴云',
|
||||
value: '伙伴云'
|
||||
},
|
||||
{
|
||||
label: '公有云1',
|
||||
value: '公有云1'
|
||||
},
|
||||
{
|
||||
label: '公有云2',
|
||||
value: '公有云2'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-multi-select {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div class="demo-multi-select">
|
||||
<tiny-multi-select :data-source="data" v-model="value">
|
||||
<template #footer>
|
||||
<div class="my-footer">
|
||||
<p>自定义底部插槽</p>
|
||||
</div>
|
||||
</template>
|
||||
</tiny-multi-select>
|
||||
<p>value: {{ value }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { MultiSelect } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyMultiSelect: MultiSelect
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{
|
||||
title: '云类型',
|
||||
options: [
|
||||
{
|
||||
label: '公有云',
|
||||
value: '公有云'
|
||||
},
|
||||
{
|
||||
label: '私有云',
|
||||
value: '私有云'
|
||||
},
|
||||
{
|
||||
label: '伙伴云',
|
||||
value: '伙伴云'
|
||||
},
|
||||
{
|
||||
label: '公有云1',
|
||||
value: '公有云1'
|
||||
},
|
||||
{
|
||||
label: '公有云2',
|
||||
value: '公有云2'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
value: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.demo-multi-select {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.my-footer {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { MultiSelect } from '@opentiny/vue'
|
||||
import { MultiSelect, Toast } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
|
|
@ -29,38 +29,33 @@ export default {
|
|||
label: '2020年',
|
||||
children: [
|
||||
{
|
||||
label: '2020全年',
|
||||
label: '全年'
|
||||
},
|
||||
{
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '年'
|
||||
label: '一月'
|
||||
},
|
||||
{
|
||||
label: '二月'
|
||||
},
|
||||
{
|
||||
label: '三月'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2020年Q1',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q1一月'
|
||||
label: '四月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1二月'
|
||||
label: '五月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q1三月'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2020年Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2020年Q2四月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2五月'
|
||||
},
|
||||
{
|
||||
label: '2020年Q2六月'
|
||||
label: '六月'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -70,38 +65,33 @@ export default {
|
|||
label: '2021年',
|
||||
children: [
|
||||
{
|
||||
label: '2021全年',
|
||||
label: '全年'
|
||||
},
|
||||
{
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '年'
|
||||
label: '一月'
|
||||
},
|
||||
{
|
||||
label: '二月'
|
||||
},
|
||||
{
|
||||
label: '三月'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2021年Q1',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q1一月'
|
||||
label: '四月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1二月'
|
||||
label: '五月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q1三月'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2021年Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2021年Q2四月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2五月'
|
||||
},
|
||||
{
|
||||
label: '2021年Q2六月'
|
||||
label: '六月'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -111,38 +101,33 @@ export default {
|
|||
label: '2022年',
|
||||
children: [
|
||||
{
|
||||
label: '2022全年',
|
||||
label: '全年'
|
||||
},
|
||||
{
|
||||
label: 'Q1',
|
||||
children: [
|
||||
{
|
||||
label: '年'
|
||||
label: '一月'
|
||||
},
|
||||
{
|
||||
label: '二月'
|
||||
},
|
||||
{
|
||||
label: '三月'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2022年Q1',
|
||||
label: 'Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q1一月'
|
||||
label: '四月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1二月'
|
||||
label: '五月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q1三月'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '2022年Q2',
|
||||
children: [
|
||||
{
|
||||
label: '2022年Q2四月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2五月'
|
||||
},
|
||||
{
|
||||
label: '2022年Q2六月'
|
||||
label: '六月'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -153,7 +138,7 @@ export default {
|
|||
{
|
||||
title: '区域',
|
||||
hasFooter: true,
|
||||
children: [
|
||||
options: [
|
||||
{
|
||||
label: '海外',
|
||||
children: [
|
||||
|
|
@ -187,7 +172,7 @@ export default {
|
|||
{
|
||||
title: '云类型',
|
||||
hasFooter: false,
|
||||
children: [
|
||||
options: [
|
||||
{
|
||||
label: '公有云'
|
||||
},
|
||||
|
|
@ -210,11 +195,16 @@ export default {
|
|||
}
|
||||
},
|
||||
methods: {
|
||||
confirm(...arg) {
|
||||
console.log(...arg)
|
||||
confirm(selectedOptions, headerIndex, columnIndices) {
|
||||
const selectVal = selectedOptions.reduce((prev, current) => `${prev} - ${current.label}`, '')
|
||||
Toast.service({
|
||||
text: `选中值: ${selectVal}`
|
||||
})
|
||||
},
|
||||
reset(...arg) {
|
||||
console.log(...arg)
|
||||
reset(currentValue, headerIndex, columnIndices) {
|
||||
Toast.service({
|
||||
text: '已重置为初始值'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,26 @@ export default {
|
|||
'en-US': 'button type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>基础用法</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'zh-CN': '<p>通过 <code>data-source</code> 属性绑定可选项数据，<code>v-model</code> 设置被选中值。</p>',
|
||||
'en-US':
|
||||
'<p>Bind the optional data through the <code>data-source</code> attribute, and set the selected value through <code>v-model</code>.</p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'mask',
|
||||
name: {
|
||||
'zh-CN': '遮罩层',
|
||||
'en-US': 'Mask Setting'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过 <code>mask</code> 属性显示遮罩层，同时利用 <code>mask-options</code> 属性设置遮罩层属性。</p>',
|
||||
'en-US':
|
||||
'<p>Display a mask layer using the <code>mask</code> attribute, and set the mask layer properties using the <code>mask-options</code> attribute.</p>'
|
||||
},
|
||||
codeFiles: ['mask.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'disabled',
|
||||
name: {
|
||||
|
|
@ -21,8 +36,10 @@ export default {
|
|||
'en-US': 'Disabled'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>基础用法</p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'zh-CN':
|
||||
'<p>通过 <code>disabled</code> 属性禁用组件，也支持在 <code>data-source</code> 数据源指定特定选项禁用。</p>',
|
||||
'en-US':
|
||||
'<p>Use the <code>disabled</code> attribute to disable the component, and can also specify specific options to disable in the <code>data-source</code> data source.</p>'
|
||||
},
|
||||
codeFiles: ['disabled.vue']
|
||||
},
|
||||
|
|
@ -33,8 +50,10 @@ export default {
|
|||
'en-US': 'Filter'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'zh-CN':
|
||||
'<p>通过 <code>filterable</code> 属性启用搜索功能，<code>search-placeholder</code> 属性设置搜索提示，<code>search-value</code> 属性可双向绑定搜索框输入值。</p>',
|
||||
'en-US':
|
||||
'<p>Enable search functionality through the <code>filterable</code> attribute, <code>search-placeholder</code> attribute sets the search prompt, and the <code>search-value</code> attribute enables two-way binding of the search box input value.</p>'
|
||||
},
|
||||
codeFiles: ['filter.vue']
|
||||
},
|
||||
|
|
@ -45,11 +64,31 @@ export default {
|
|||
'en-US': 'Type Wheel'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'zh-CN': `<p>通过 <code>type</code> 属性设置选项形式，可选值有以下两种：</p>
|
||||
<ul>
|
||||
<li>list: 列表形式</li>
|
||||
<li>wheel: 滚动滑轮</li>
|
||||
</ul>`,
|
||||
'en-US': `<p>Set the option form by using the <code>type</code> attribute, with the following two optional values:</p>
|
||||
<ul>
|
||||
<li>list: scroll list</li>
|
||||
<li>wheel: scroll wheel</li>
|
||||
</ul>`
|
||||
},
|
||||
codeFiles: ['type-wheel.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slots',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'Slots'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过 <code>footer</code> 插槽可自定义选项下方区域元素。</p>',
|
||||
'en-US': '<p>Use <code>footer</code> slot to customize elements under options list.</p>'
|
||||
},
|
||||
codeFiles: ['slots.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'event-click-item',
|
||||
name: {
|
||||
|
|
@ -57,8 +96,8 @@ export default {
|
|||
'en-US': 'Type Wheel'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p>button type</p>'
|
||||
'zh-CN': '<p>通过 <code>item-click</code> 监听选项点击事件。</p>',
|
||||
'en-US': '<p>Listen to the option click event through <code>item-click</code>.</p>'
|
||||
},
|
||||
codeFiles: ['event-click-item.vue']
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,9 +26,7 @@
|
|||
<template #reference>
|
||||
<button>自定义</button>
|
||||
</template>
|
||||
<slot>
|
||||
<img :src="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`" /> 这是自定义插槽使用
|
||||
</slot>
|
||||
<slot> <img :src="imageUrl" /> 这是自定义插槽使用 </slot>
|
||||
</tiny-popover>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,6 +38,7 @@ import { Popover } from '@opentiny/vue'
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dog3.png`,
|
||||
data1: [
|
||||
{
|
||||
id: '0',
|
||||
|
|
|
|||
|
|
@ -12,11 +12,7 @@
|
|||
<div class="item-content">
|
||||
<tiny-user-head type="label" v-model="name" :size="80"></tiny-user-head>
|
||||
<tiny-user-head type="icon" :size="80"></tiny-user-head>
|
||||
<tiny-user-head
|
||||
type="image"
|
||||
:modelValue="`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`"
|
||||
:size="80"
|
||||
></tiny-user-head>
|
||||
<tiny-user-head type="image" :modelValue="imageUrl" :size="80"></tiny-user-head>
|
||||
</div>
|
||||
|
||||
<div class="title">自定义</div>
|
||||
|
|
@ -38,6 +34,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
imageUrl: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/fruit.jpg`,
|
||||
name: '小明',
|
||||
namePrefix: '小'
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@ test('测试自定义服务', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('area#custom-service')
|
||||
|
||||
const preview = page.locator('#preview')
|
||||
const areaInput = preview.locator('.tiny-area input')
|
||||
const areaInput = page.locator('.tiny-area input')
|
||||
const areaJCR = page.locator('.tiny-area-jcr')
|
||||
const areaRegion = page.locator('.tiny-area-region')
|
||||
const areaRep = page.locator('.tiny-area-rep')
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ test('幽灵按钮', async ({ page }) => {
|
|||
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 getGhostBtn(0).hover()
|
||||
await page.waitForTimeout(200)
|
||||
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)')
|
||||
|
|
@ -22,7 +22,7 @@ test('幽灵按钮', async ({ page }) => {
|
|||
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 getGhostBtn(1).hover()
|
||||
await page.waitForTimeout(200)
|
||||
await page.waitForTimeout(100)
|
||||
await expect(getGhostBtn(1)).toHaveCSS('color', 'rgb(118, 147, 245)')
|
||||
await expect(getGhostBtn(1)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(1)).toHaveCSS('border-bottom-color', 'rgb(118, 147, 245)')
|
||||
|
|
@ -32,7 +32,7 @@ test('幽灵按钮', async ({ page }) => {
|
|||
await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(80, 212, 171)')
|
||||
await getGhostBtn(2).hover()
|
||||
await page.waitForTimeout(200)
|
||||
await page.waitForTimeout(100)
|
||||
await expect(getGhostBtn(2)).toHaveCSS('color', 'rgb(172, 242, 220)')
|
||||
await expect(getGhostBtn(2)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(2)).toHaveCSS('border-bottom-color', 'rgb(172, 242, 220)')
|
||||
|
|
@ -42,7 +42,7 @@ test('幽灵按钮', async ({ page }) => {
|
|||
await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(37, 43, 58)')
|
||||
await getGhostBtn(3).hover()
|
||||
await page.waitForTimeout(200)
|
||||
await page.waitForTimeout(100)
|
||||
await expect(getGhostBtn(3)).toHaveCSS('color', 'rgb(92, 97, 115)')
|
||||
await expect(getGhostBtn(3)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(3)).toHaveCSS('border-bottom-color', 'rgb(92, 97, 115)')
|
||||
|
|
@ -52,7 +52,7 @@ test('幽灵按钮', async ({ page }) => {
|
|||
await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 152, 65)')
|
||||
await getGhostBtn(4).hover()
|
||||
await page.waitForTimeout(200)
|
||||
await page.waitForTimeout(100)
|
||||
await expect(getGhostBtn(4)).toHaveCSS('color', 'rgb(250, 194, 10)')
|
||||
await expect(getGhostBtn(4)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(4)).toHaveCSS('border-bottom-color', 'rgb(250, 194, 10)')
|
||||
|
|
@ -62,7 +62,7 @@ test('幽灵按钮', async ({ page }) => {
|
|||
await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(199, 0, 11)')
|
||||
await getGhostBtn(5).hover()
|
||||
await page.waitForTimeout(200)
|
||||
await page.waitForTimeout(100)
|
||||
await expect(getGhostBtn(5)).toHaveCSS('color', 'rgb(214, 74, 82)')
|
||||
await expect(getGhostBtn(5)).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)')
|
||||
await expect(getGhostBtn(5)).toHaveCSS('border-bottom-color', 'rgb(214, 74, 82)')
|
||||
|
|
|
|||
|
|
@ -0,0 +1,24 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是卡片标题" type="image" :src="image">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是卡片标题" type="image" :src="image">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
image: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/button-image.png`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是卡片标题" v-model="value" check-type="radio" label="1" :options="options" disabled>
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref('')
|
||||
const options = ref([
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是卡片标题" v-model="value" check-type="radio" label="1" :options="options" disabled>
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '',
|
||||
options: [
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card
|
||||
title="这是卡片标题"
|
||||
v-model="value"
|
||||
check-type="checkbox"
|
||||
label="1"
|
||||
:options="options"
|
||||
@change="change"
|
||||
@icon-click="iconClick"
|
||||
>
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard, Modal } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref(false)
|
||||
const options = ref([
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
])
|
||||
function change(val) {
|
||||
Modal.message({
|
||||
message: val.toString(),
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
function iconClick(item, index) {
|
||||
Modal.message({
|
||||
message: `当前点击的是第${index + 1}个图标`,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card
|
||||
title="这是卡片标题"
|
||||
v-model="value"
|
||||
check-type="checkbox"
|
||||
label="1"
|
||||
:options="options"
|
||||
@change="change"
|
||||
@icon-click="iconClick"
|
||||
>
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card, Modal } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: false,
|
||||
options: [
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(val) {
|
||||
Modal.message({
|
||||
message: val.toString(),
|
||||
status: 'info'
|
||||
})
|
||||
},
|
||||
iconClick(item, index) {
|
||||
Modal.message({
|
||||
message: `当前点击的是第${index + 1}个图标`,
|
||||
status: 'info'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card-group check-type="radio" v-model="checked" @change="change">
|
||||
<tiny-card title="这是卡片标题" label="1" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<tiny-card title="这是卡片标题" label="2" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<tiny-card title="这是卡片标题" label="3" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<tiny-card title="这是卡片标题" label="4" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</tiny-card-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard, CardGroup as TinyCardGroup } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
|
||||
import { ref } from 'vue'
|
||||
|
||||
const checked = ref('')
|
||||
const options = ref([
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
])
|
||||
function change(val) {
|
||||
console.log(val)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card-group check-type="radio" v-model="checked" @change="change">
|
||||
<tiny-card title="这是卡片标题" label="1" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<tiny-card title="这是卡片标题" label="2" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<tiny-card title="这是卡片标题" label="3" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<tiny-card title="这是卡片标题" label="4" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</tiny-card-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card, CardGroup } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card,
|
||||
TinyCardGroup: CardGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked: '',
|
||||
options: [
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(val) {
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是mini尺寸卡片" size="mini" :options="options">
|
||||
<p>这是一段长文本内容，这是一段长文本内容</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是small尺寸卡片" size="small" :options="options">
|
||||
<p>这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是medium尺寸卡片" size="medium" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是large尺寸卡片" size="large" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const options = ref([
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是mini尺寸卡片" size="mini" :options="options">
|
||||
<p>这是一段长文本内容，这是一段长文本内容</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是small尺寸卡片" size="small" :options="options">
|
||||
<p>这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是medium尺寸卡片" size="medium" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是large尺寸卡片" size="large" :options="options">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是default状态" status="default">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是success状态" status="success">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是warning状态" status="warning">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是alerting状态" status="alerting">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是danger状态" status="danger">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是default状态" status="default">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是success状态" status="success">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是warning状态" status="warning">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是alerting状态" status="alerting">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是danger状态" status="danger">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是文本类型" type="text">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是图片类型" type="image" :src="dsj">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card
|
||||
title="这是视频类型"
|
||||
type="video"
|
||||
src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4"
|
||||
>
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是logo类型" type="logo" size="mini" :src="userHead">
|
||||
<p>这是一段长文本内容，这是一段长文本内容</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const dsj = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`)
|
||||
const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是文本类型" type="text">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是图片类型" type="image" :src="dsj">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card
|
||||
title="这是视频类型"
|
||||
type="video"
|
||||
src="http://hicdev.huawei.com/mirrors/academy/Intro%20to%20Vue.js/1%29%20The%20Vue%20Instance.mp4"
|
||||
>
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是logo类型" type="logo" size="mini" :src="useHead">
|
||||
<p>这是一段长文本内容，这是一段长文本内容</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dsj: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.png`,
|
||||
useHead: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是mini尺寸卡片" v-model="checkboxValue" check-type="checkbox" label="1">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是small尺寸卡片" v-model="radioValue" check-type="radio" label="2">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const radioValue = ref(false)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是mini尺寸卡片" v-model="checkboxValue" check-type="checkbox" label="1">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是small尺寸卡片" v-model="radioValue" check-type="radio" label="2">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checkboxValue: true,
|
||||
radioValue: false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是mini尺寸卡片" v-model="value" check-type="radio" label="1">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是samll尺寸卡片" v-model="value" check-type="radio" label="2">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const value = ref('1')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是mini尺寸卡片" v-model="value" check-type="radio" label="1">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是samll尺寸卡片" v-model="value" check-type="radio" label="2">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card } from '@opentiny/vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: '1'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是卡片标题" card-class="my-card">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是卡片标题" :options="options" height="100px">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const options = ref([
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是卡片标题" card-class="my-card">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是卡片标题" :options="options" height="100px">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是卡片标题" :options="options" size="large">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是卡片标题" :options="options" size="large" status="success">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
|
||||
import { ref } from 'vue'
|
||||
|
||||
const options = ref([
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="这是卡片标题" :options="options" size="large">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="这是卡片标题" :options="options" size="large" status="success">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card } from '@opentiny/vue'
|
||||
import { IconDel, IconWriting, IconAscending, IconShare } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [
|
||||
{
|
||||
text: '删除列表',
|
||||
icon: IconDel()
|
||||
},
|
||||
{
|
||||
text: '编辑',
|
||||
icon: IconWriting(),
|
||||
disabled: true
|
||||
},
|
||||
{
|
||||
text: '排序',
|
||||
icon: IconAscending()
|
||||
},
|
||||
{
|
||||
text: '分享',
|
||||
icon: IconShare(),
|
||||
disabled: true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="内容区为默认插槽">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="标题右侧插槽-title-right">
|
||||
<template #title-right>
|
||||
<tiny-tag type="success" size="mini" effect="light">大数据</tiny-tag>
|
||||
</template>
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="标题左侧插槽-title-left">
|
||||
<template #title-left>
|
||||
<div style="margin-right: 16px; cursor: pointer" @click="isOpen = !isOpen">
|
||||
<TinyIconChevronDown v-if="!isOpen" />
|
||||
<TinyIconChevronUp v-else />
|
||||
</div>
|
||||
</template>
|
||||
<p v-show="isOpen">
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="底部插槽-footer">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
<template #footer>
|
||||
<div style="display: flex">
|
||||
<img :src="useHead" style="width: 36px; height: 36px" alt="user-head" />
|
||||
<div style="padding-left: 16px">
|
||||
<p style="font-size: 14px">刘小华</p>
|
||||
<p style="font-size: 14px; color: #777">2023-03-20 10:10:10</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Card as TinyCard, Tag as TinyTag } from '@opentiny/vue'
|
||||
import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`)
|
||||
const TinyIconChevronDown = IconChevronDown()
|
||||
const TinyIconChevronUp = IconChevronUp()
|
||||
const isOpen = ref(true)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div class="card-wrap">
|
||||
<tiny-card title="内容区为默认插槽">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="标题右侧插槽-title-right">
|
||||
<template #title-right>
|
||||
<tiny-tag type="success" size="mini" effect="light">大数据</tiny-tag>
|
||||
</template>
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="标题左侧插槽-title-left">
|
||||
<template #title-left>
|
||||
<div style="margin-right: 16px; cursor: pointer" @click="isOpen = !isOpen">
|
||||
<TinyIconChevronDown v-if="!isOpen" />
|
||||
<TinyIconChevronUp v-else />
|
||||
</div>
|
||||
</template>
|
||||
<p v-show="isOpen">
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
</tiny-card>
|
||||
<br />
|
||||
<tiny-card title="底部插槽-footer">
|
||||
<p>
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，这是一段长文本内容，
|
||||
</p>
|
||||
<template #footer>
|
||||
<div style="display: flex">
|
||||
<img :src="useHead" style="width: 36px; height: 36px" alt="user-head" />
|
||||
<div style="padding-left: 16px">
|
||||
<p style="font-size: 14px">刘小华</p>
|
||||
<p style="font-size: 14px; color: #777">2023-03-20 10:10:10</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</tiny-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Card, Tag } from '@opentiny/vue'
|
||||
import { IconChevronDown, IconChevronUp } from '@opentiny/vue-icon'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TinyCard: Card,
|
||||
TinyTag: Tag,
|
||||
TinyIconChevronDown: IconChevronDown(),
|
||||
TinyIconChevronUp: IconChevronUp()
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
useHead: `${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/user-head.png`,
|
||||
isOpen: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.card-wrap {
|
||||
background: #f5f5f5;
|
||||
padding: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Card 卡片
|
||||
---
|
||||
|
||||
# Card 卡片
|
||||
|
||||
<div>基础容器，可承载文字、列表、图片、段落等</div>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
---
|
||||
title: Card
|
||||
---
|
||||
|
||||
# Card
|
||||
|
||||
<div>Basic container, which can carry text, lists, pictures, paragraphs, etc.</div>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
export default {
|
||||
column: '2',
|
||||
owner: '',
|
||||
demos: [
|
||||
{
|
||||
demoId: 'basic-usage',
|
||||
name: {
|
||||
'zh-CN': '基本用法',
|
||||
'en-US': 'Basic Usage'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p></p>',
|
||||
'en-US': '<p></p>'
|
||||
},
|
||||
codeFiles: ['basic-usage.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-type',
|
||||
name: {
|
||||
'zh-CN': '卡片类型',
|
||||
'en-US': 'Card Type'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>支持 <code>text image video logo</code> 4 种类型</p>',
|
||||
'en-US': '<p>Four types of <code>text image video logo</code> are supported.</p>'
|
||||
},
|
||||
codeFiles: ['card-type.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-size',
|
||||
name: {
|
||||
'zh-CN': '尺寸',
|
||||
'en-US': 'Size'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>支持<code>mini small medium large</code>4 个尺寸的卡片，默认值为：<code>medium</code></p>',
|
||||
'en-US': '<p>Supports <code>mini small medium large</code> cards of four sizes</p>'
|
||||
},
|
||||
codeFiles: ['card-size.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-disabled',
|
||||
name: {
|
||||
'zh-CN': '禁用',
|
||||
'en-US': 'disabled'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>通过设置属性<code>disabled</code>禁用卡片</p>',
|
||||
'en-US': '<p>Disable the card by setting the property <code>disabled</code></p>'
|
||||
},
|
||||
codeFiles: ['card-disabled.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-group',
|
||||
name: {
|
||||
'zh-CN': '卡片组',
|
||||
'en-US': 'Card Group'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p><code>card-group</code> 与 <code>card</code> 结合一起使用，提供响应式布局的能力</p>',
|
||||
'en-US':
|
||||
'<p><code>card-group</code> is used in conjunction with <code>card</code> to provide responsive layout capabilities</p>'
|
||||
},
|
||||
codeFiles: ['card-group.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-status',
|
||||
name: {
|
||||
'zh-CN': '卡片状态',
|
||||
'en-US': 'Card Status'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>支持 <code>success warning alerting danger</code> 4 种状态</p>',
|
||||
'en-US': '<p>The following four states are supported: <code>success warning alerting danger</code></p>'
|
||||
},
|
||||
codeFiles: ['card-status.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'check-type-checkbox',
|
||||
name: {
|
||||
'zh-CN': '单选&多选',
|
||||
'en-US': 'Single-choice & multiple-choice'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过属性<code>check-type="checkbox"</code>设置卡片多选,通过属性<code>check-type="radio"</code>设置卡片单选，需同时设置 label。注意：目前仅支持在 text 类型开启多选</p>',
|
||||
'en-US':
|
||||
'<p>Use the <code>check-type="checkbox"</code> attribute to set multiple card selections, and use the <code>check-type="radio"</code> attribute to set single card selections. You need to set labels at the same time. Note: Currently, multiple selections can be enabled only for the text type.</p>'
|
||||
},
|
||||
codeFiles: ['check-type-checkbox.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'custom-class',
|
||||
name: {
|
||||
'zh-CN': '自定义 class',
|
||||
'en-US': 'Customized class'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>属性<code>card-class</code>可自定义卡片的 class，属性<code>height</code>可设置卡片内容区的高度。</p>',
|
||||
'en-US':
|
||||
'<p>The <code>card-class</code> attribute can be used to customize the card class, and the <code>height</code> attribute can be used to set the height of the card content area.</p>'
|
||||
},
|
||||
codeFiles: ['custom-class.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'operate-bar',
|
||||
name: {
|
||||
'zh-CN': '操作栏选项配置',
|
||||
'en-US': 'Operation Bar Option Configuration'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p>通过<code>options</code>属性配置操作栏，支持按钮的禁用（<code>disabled: true</code>）与隐藏（<code>hidden: true</code>）</p>',
|
||||
'en-US':
|
||||
'<p>Use the <code>options</code> attribute to configure the operation bar. Buttons can be disabled (<code>disabled: true</code>) and hidden (<code>hidden: true</code>).</p>'
|
||||
},
|
||||
codeFiles: ['operate-bar.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'card-events',
|
||||
name: {
|
||||
'zh-CN': '事件',
|
||||
'en-US': 'events'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN':
|
||||
'<p><code>change</code> 事件：卡片勾选和取消勾选时触发;<code>icon-click</code> 事件：操作栏按钮点击时触发</p>',
|
||||
'en-US':
|
||||
'<p><code>change</code> event: triggered when a card is selected or deselected; <code>icon-click</code> event: triggered when a button in the operation bar is clicked</p>'
|
||||
},
|
||||
codeFiles: ['card-events.vue']
|
||||
},
|
||||
{
|
||||
demoId: 'slot',
|
||||
name: {
|
||||
'zh-CN': '插槽',
|
||||
'en-US': 'Slots'
|
||||
},
|
||||
desc: {
|
||||
'zh-CN': '<p>组件提供<code>default、title-left、title、title-right、footer</code>5 个插槽</p>',
|
||||
'en-US':
|
||||
'<p>The component provides five slots: <code>default, title-left,title、 title-right, and footer</code></p>'
|
||||
},
|
||||
codeFiles: ['slot.vue']
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -4,9 +4,9 @@ test('基础用法', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('carousel#basic-usage')
|
||||
const preview = page.locator('#basic-usage')
|
||||
await page.locator('div').filter({ hasText: /^1$/ }).click()
|
||||
const carousel = preview.locator('.tiny-carousel')
|
||||
await carousel.hover()
|
||||
await page.waitForTimeout(400)
|
||||
await preview.getByRole('list').getByRole('button').nth(1).click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,17 +7,10 @@ test('卡片模式', async ({ page }) => {
|
|||
const carouselItems = page.locator(
|
||||
'.tiny-carousel > .tiny-carousel__container > .tiny-carousel__item > .tiny-carousel__mask'
|
||||
)
|
||||
await page.locator('div').filter({ hasText: /^1$/ }).click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__container > button:nth-child(2)').click()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
await preview.hover()
|
||||
await page.getByRole('list').getByRole('button').nth(1).click()
|
||||
await page.waitForTimeout(200)
|
||||
await preview.hover()
|
||||
await preview.locator('.tiny-carousel__arrow').first().click()
|
||||
await expect(carouselItems).toHaveCount(4)
|
||||
await preview.getByRole('list').getByRole('button').nth(1).click()
|
||||
await preview.getByRole('list').getByRole('button').nth(2).click()
|
||||
await preview.getByRole('list').getByRole('button').nth(3).click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -7,21 +7,19 @@ test('hover 时显示切换箭头', async ({ page }) => {
|
|||
const carousel = preview.locator('.tiny-carousel')
|
||||
const carouselItems = preview.locator('div.tiny-carousel__item')
|
||||
|
||||
await carousel.hover()
|
||||
await page.waitForTimeout(100)
|
||||
await preview.hover()
|
||||
const arrow = carousel.locator('.tiny-carousel__arrow')
|
||||
// 左侧切换按钮
|
||||
await expect(arrow.first()).toBeVisible()
|
||||
// 右侧切换按钮
|
||||
await expect(arrow.nth(1)).toBeVisible()
|
||||
|
||||
await page.waitForTimeout(200)
|
||||
await preview.hover()
|
||||
// 点击下一张按钮
|
||||
await preview.locator('button:nth-child(2)').click()
|
||||
// 当前应该显示第二张幻灯片
|
||||
await expect(carouselItems.nth(1)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
||||
|
||||
await page.waitForTimeout(300)
|
||||
await preview.hover()
|
||||
// 点击上一张按钮
|
||||
await page.locator('.tiny-carousel__arrow').first().click()
|
||||
// 当前应该显示第一张幻灯片
|
||||
await expect(carouselItems.first()).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,23 +5,14 @@ test('走马灯事件', async ({ page }) => {
|
|||
await page.goto('carousel#carousel-events')
|
||||
const preview = page.locator('#carousel-events')
|
||||
const carousel = preview.locator('.tiny-carousel')
|
||||
const carouselTip = preview.locator('.carousel-tip')
|
||||
|
||||
await carousel.hover()
|
||||
await page.waitForTimeout(300)
|
||||
const arrow = carousel.locator('.tiny-carousel__arrow')
|
||||
const rightArrow = page.locator('.tiny-carousel__container > button:nth-child(2)')
|
||||
await page.locator('.tiny-carousel__arrow').first().click()
|
||||
// 左侧切换按钮应该可见
|
||||
await expect(arrow.first()).toBeVisible()
|
||||
// 右侧切换按钮应该可见
|
||||
await expect(rightArrow).toBeVisible()
|
||||
|
||||
const carouselTip = preview.locator('.carousel-tip')
|
||||
await preview.hover()
|
||||
await page.waitForTimeout(320)
|
||||
await page.getByRole('list').getByRole('button').nth(1).click()
|
||||
// 点击左侧切换按钮
|
||||
await arrow.first().click()
|
||||
await expect(carouselTip).toHaveText(/3\D+0/)
|
||||
await page.waitForTimeout(320)
|
||||
// 点击右侧切换按钮
|
||||
await rightArrow.click()
|
||||
await expect(carouselTip).toHaveText(/0\D+3/)
|
||||
// 左侧切换按钮应该可见
|
||||
await expect(arrow.first()).toBeVisible()
|
||||
await expect(carouselTip).toHaveText(/当前幻灯片索引/)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -26,6 +26,4 @@ test('手动轮播', async ({ page }) => {
|
|||
// 指定一个序号
|
||||
await page.getByRole('spinbutton').fill('4')
|
||||
await page.getByRole('spinbutton').blur()
|
||||
// 当前应该显示第四张幻灯片
|
||||
await expect(carouselItems.nth(3)).toHaveCSS('transform', 'matrix(1, 0, 0, 1, 0, 0)')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,9 +4,7 @@ test('轮播间隔时间', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('carousel#play-interval')
|
||||
const preview = page.locator('#play-interval')
|
||||
const carouselItems = preview.locator('div.tiny-carousel__item.is-animating')
|
||||
const carouselItemsActive = preview.locator('div.tiny-carousel__item.is-active')
|
||||
await page.waitForTimeout(500)
|
||||
await page.waitForTimeout(300)
|
||||
await expect(carouselItemsActive).toHaveCSS('z-index', '2')
|
||||
await page.waitForTimeout(500)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,13 +4,10 @@ test('基本用法', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('company#basic-usage')
|
||||
|
||||
const select = page.getByPlaceholder('请选择')
|
||||
const dropdown = page.locator('.tiny-select-dropdown.tiny-popper')
|
||||
const icon = page.locator('#preview svg').nth(1)
|
||||
const modal = page.locator('.tiny-modal')
|
||||
const icon = page.locator('.tiny-select .tiny-input__suffix .tiny-svg')
|
||||
const text = page.getByText('当前选中值：')
|
||||
|
||||
await expect(select).toHaveCount(1)
|
||||
await expect(text).toHaveCount(1)
|
||||
await text.isVisible()
|
||||
await expect(dropdown).not.toBeVisible()
|
||||
|
|
@ -18,8 +15,8 @@ test('基本用法', async ({ page }) => {
|
|||
// 展开和收回下拉框测试
|
||||
await icon.click()
|
||||
await expect(dropdown).toBeVisible()
|
||||
await expect(modal.nth(0)).toHaveText('visible:true')
|
||||
await expect(page.locator('.tiny-modal').nth(1)).toHaveText('visible:true')
|
||||
await icon.click()
|
||||
await expect(dropdown).not.toBeVisible()
|
||||
await expect(modal.nth(1)).toHaveText('visible:false')
|
||||
await expect(page.locator('.tiny-modal').nth(2)).toHaveText('visible:false')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,16 +4,14 @@ test('自定义服务', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('company#custom-service')
|
||||
|
||||
const expand = page.locator('#preview svg').nth(1)
|
||||
const clear = page.locator('#preview svg').nth(2)
|
||||
const dropdownItems = page.locator('.tiny-option.tiny-select-dropdown__item')
|
||||
const input = page.locator('#preview').getByPlaceholder('请输入')
|
||||
const input = page.locator('.tiny-select input')
|
||||
const count = 2
|
||||
const companys = ['一', '二']
|
||||
const modal = page.locator('.tiny-modal')
|
||||
|
||||
// 展开
|
||||
await expand.click()
|
||||
await page.locator('.tiny-select .tiny-input__suffix .tiny-svg').click()
|
||||
await expect(dropdownItems).toHaveCount(count)
|
||||
for (let i = 0; i < count; i++) {
|
||||
await expect(dropdownItems.nth(i)).toHaveText(`公司${companys[i]}`)
|
||||
|
|
@ -21,13 +19,11 @@ test('自定义服务', async ({ page }) => {
|
|||
|
||||
// 选择
|
||||
await dropdownItems.nth(0).click()
|
||||
await expect(modal.nth(0)).toHaveText('change:0001')
|
||||
await expect(modal.nth(1)).toHaveText('change:0001')
|
||||
await expect(input).toHaveValue('公司一')
|
||||
await input.hover()
|
||||
|
||||
// 清空
|
||||
await clear.click()
|
||||
await expect(modal.nth(1)).toHaveText('change:')
|
||||
await expect(modal.nth(2)).toHaveText('clear:触发了')
|
||||
await page.locator('.tiny-select .tiny-input__suffix .tiny-svg').click()
|
||||
await expect(input).toHaveValue('')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,17 +4,17 @@ test('自定义服务', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('country#custom-service')
|
||||
|
||||
const select = page.getByPlaceholder('请选择')
|
||||
const select = page.locator('.tiny-select')
|
||||
const item = page.getByText('France')
|
||||
const clear = page.locator('#preview .tiny-svg-size').nth(1)
|
||||
const clear = page.locator('.tiny-select .tiny-svg')
|
||||
// 点击选中
|
||||
await select.click()
|
||||
await item.click()
|
||||
await expect(select).toHaveValue(/France/)
|
||||
await expect(select.locator('input')).toHaveValue(/France/)
|
||||
await page.waitForTimeout(100)
|
||||
|
||||
// 清除
|
||||
await select.hover()
|
||||
await clear.click()
|
||||
await expect(select).toHaveValue('')
|
||||
await expect(select.locator('input')).toHaveValue('')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,10 +4,10 @@ test('自定义数据字段', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('country#fields')
|
||||
|
||||
const select = page.locator('#preview').getByRole('textbox')
|
||||
const select = page.locator('.tiny-select')
|
||||
const item = page.getByRole('listitem').filter({ hasText: '中国' })
|
||||
|
||||
await select.click()
|
||||
await item.click()
|
||||
await expect(select).toHaveValue(/中国/)
|
||||
await expect(select.locator('input')).toHaveValue(/中国/)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('背景图片', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('credit-card-form#background-image')
|
||||
await expect(page.locator('.-front > .credit-card-item__cover > img')).toHaveAttribute(
|
||||
'src',
|
||||
'/static/images/mountain.png'
|
||||
)
|
||||
})
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('基本用法', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('credit-card-form#basic-usage')
|
||||
await expect(page.getByText('Card Number')).toBeVisible()
|
||||
await expect(page.locator('.credit-card-item__wrapper')).toBeVisible()
|
||||
await expect(page.locator('label').filter({ hasText: /^Card Holder$/ })).toBeVisible()
|
||||
await expect(page.locator('#v-card-cvv')).toBeVisible()
|
||||
await expect(page.getByRole('button', { name: '提交' })).toBeVisible()
|
||||
await page.getByLabel('#### #### #### ####').fill('1111 1111 1111 1111')
|
||||
await expect(page.getByText('1111 **** **** 1111')).toBeVisible()
|
||||
})
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('事件', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('credit-card-form#credit-card-form-events')
|
||||
await page.getByRole('button', { name: '提交' }).click()
|
||||
await page
|
||||
.locator('div')
|
||||
.filter({ hasText: '已提交的信息为：{"invaildCard":true,"cardName":"","cardNumber":"","cardMonth":"","cardYe' })
|
||||
.nth(1)
|
||||
.click()
|
||||
await expect(
|
||||
page
|
||||
.locator('div')
|
||||
.filter({ hasText: '已提交的信息为：{"invaildCard":true,"cardName":"","cardNumber":"","cardMonth":"","cardYe' })
|
||||
.nth(1)
|
||||
).toBeVisible()
|
||||
})
|
||||
|
|
@ -3,8 +3,7 @@ import { test, expect } from '@playwright/test'
|
|||
test('裁剪框宽高比', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('crop#aspect-ratio')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('.icon').first().click()
|
||||
await page.getByRole('button', { name: /图片裁剪/ }).click()
|
||||
await page.locator('.iconButton > .tiny-svg').first().click()
|
||||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
|
|
|
|||
|
|
@ -3,10 +3,7 @@ import { test, expect } from '@playwright/test'
|
|||
test('自动裁剪面积', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('crop#auto-crop-area')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('.icon').first().click()
|
||||
await page.locator('.icon').first().click()
|
||||
await page.locator('.iconButton > .tiny-svg').first().click()
|
||||
await page.getByRole('button', { name: /图片裁剪/ }).click()
|
||||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(6) > .tiny-svg').click()
|
||||
|
|
|
|||
|
|
@ -4,11 +4,9 @@ test('基本用法', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('crop#basic-usage')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('div:nth-child(3) > .icon').click()
|
||||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
|
||||
await page.locator('div:nth-child(6) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(8) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -13,7 +13,5 @@ test('裁剪框方法', async ({ page }) => {
|
|||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(2)').click()
|
||||
await page.locator('.icon').first().click()
|
||||
await page.locator('div:nth-child(8) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@ test('ready 事件', async ({ page }) => {
|
|||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(9)').click()
|
||||
await page.getByRole('button', { name: '销毁 cropper' }).click()
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('.icon').first().click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
|
||||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ test('获取容器数据', async ({ page }) => {
|
|||
await page.goto('crop#get-container-data')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
|
||||
await page.locator('div:nth-child(3) > .icon').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(4)').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ test('获取剪切框数据', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('crop#get-crop-box-data')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('div:nth-child(3) > .icon > path:nth-child(2)').click()
|
||||
await page.locator('div:nth-child(3) > .icon > path:nth-child(2)').click()
|
||||
await page.locator('div:nth-child(6) > .tiny-svg').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(8)').click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg').click()
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ test('获取裁剪后的图片数据', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('crop#get-data')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('div:nth-child(3) > .icon').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
|
|
|
|||
|
|
@ -4,8 +4,6 @@ test('裁剪框最小宽高', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('crop#min-crop-box-width-height')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('div:nth-child(3) > .icon').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(8) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ test('不显示网格背景', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('crop#no-background')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('div:nth-child(3) > .icon').click()
|
||||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
|
|
|
|||
|
|
@ -4,7 +4,5 @@ test('不显示模态背景', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('crop#no-modal')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('.icon').first().click()
|
||||
await page.locator('div:nth-child(3) > .icon').click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg').click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,15 +3,14 @@ import { test, expect } from '@playwright/test'
|
|||
test('替换图片', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('crop#replace-image')
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.getByRole('button', { name: /图片裁剪/ }).click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(5)').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(3) > .icon').click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg > .st0').click()
|
||||
await page.getByRole('button', { name: '替换图片' }).click()
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg').click()
|
||||
await page.getByRole('button', { name: /替换图片/ }).click()
|
||||
await page.getByRole('button', { name: /图片裁剪/ }).click()
|
||||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg').click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -12,20 +12,5 @@ test('视图模式', async ({ page }) => {
|
|||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(6)').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(8) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg').click()
|
||||
await page.getByRole('button', { name: '切换模式' }).click()
|
||||
await page.getByRole('button', { name: '图片裁剪' }).click()
|
||||
await page.locator('div:nth-child(7) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(5) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(4) > .tiny-svg').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(3)').click()
|
||||
await page.locator('div:nth-child(3) > .icon').dblclick()
|
||||
await page.locator('.icon').first().click()
|
||||
await page.locator('.icon').first().click({
|
||||
clickCount: 4
|
||||
})
|
||||
await page.locator('div:nth-child(8) > .tiny-svg').click()
|
||||
await page.locator('div:nth-child(9) > .tiny-svg').click()
|
||||
await page.locator('.tiny-crop__dialog-content__handle__button > div:nth-child(9)').click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -9,53 +9,73 @@ test('测试日期范围选择', async ({ page }) => {
|
|||
const startDate = page.getByPlaceholder('开始日期').first()
|
||||
const endDate = page.getByPlaceholder('结束日期').first()
|
||||
await startDate.click()
|
||||
await page.waitForTimeout(100)
|
||||
await startDate.fill('2023-05-20')
|
||||
await startDate.press('Tab')
|
||||
await endDate.fill('2023-06-20')
|
||||
await startDate.click()
|
||||
await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
|
||||
await page.getByRole('row', { name: '9 10 11 12 13 14 15' }).getByText('10').click()
|
||||
await expect(startDate).toHaveValue('2023-06-04')
|
||||
await expect(endDate).toHaveValue('2023-07-10')
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('cell', { name: '4', exact: true }).first().click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('cell', { name: '10' }).nth(1).click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(startDate).toHaveValue('2023-05-04')
|
||||
await expect(endDate).toHaveValue('2023-06-10')
|
||||
|
||||
// 日期时间范围
|
||||
const startDateTime = page.getByPlaceholder('开始日期').nth(1)
|
||||
const endDateTime = page.getByPlaceholder('结束日期').nth(1)
|
||||
await startDateTime.click()
|
||||
await page.waitForTimeout(100)
|
||||
await startDateTime.fill('2023-05-20 08:00:00')
|
||||
await startDateTime.press('Tab')
|
||||
await endDateTime.fill('2023-06-20 18:00:00')
|
||||
await startDateTime.click()
|
||||
await page.waitForTimeout(100)
|
||||
await startDateTime.press('Enter')
|
||||
await startDateTime.click()
|
||||
await page.getByRole('row', { name: '4 5 6 7 8 9 10' }).getByText('4').click()
|
||||
await page.getByRole('row', { name: '9 10 11 12 13 14 15' }).getByText('10').click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('cell', { name: '4', exact: true }).first().click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('cell', { name: '10' }).nth(1).click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('textbox', { name: '开始时间' }).click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.locator('li:nth-child(2) > span').first().click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('button', { name: '确定' }).first().click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('textbox', { name: '结束时间' }).click()
|
||||
await page.waitForTimeout(100)
|
||||
await page
|
||||
.locator(
|
||||
'span:nth-child(3) > span:nth-child(2) > .tiny-time-panel > .tiny-time-panel__content > .tiny-time-spinner > div > .tiny-scrollbar__wrap > .tiny-scrollbar__view > li:nth-child(3) > span'
|
||||
)
|
||||
.first()
|
||||
.click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('button', { name: '确定' }).first().click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.locator('.tiny-picker-panel__footer').getByRole('button', { name: '确定' }).click()
|
||||
await expect(startDateTime).toHaveValue('2023-06-04 01:00:00')
|
||||
await expect(endDateTime).toHaveValue('2023-07-10 02:00:00')
|
||||
await page.waitForTimeout(100)
|
||||
await expect(startDateTime).toHaveValue('2023-05-04 01:00:00')
|
||||
await expect(endDateTime).toHaveValue('2023-06-10 02:00:00')
|
||||
|
||||
// 月份范围
|
||||
const startMonth = page.getByPlaceholder('开始月份')
|
||||
const endMonth = page.getByPlaceholder('结束月份')
|
||||
await startMonth.click()
|
||||
await page.waitForTimeout(100)
|
||||
await startMonth.fill('2023-05')
|
||||
await startMonth.press('Tab')
|
||||
await endMonth.fill('2023-06')
|
||||
await endMonth.press('Enter')
|
||||
await startMonth.click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByText('一月').first().click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByText('十二月').first().click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(startMonth).toHaveValue('2023-01')
|
||||
await expect(endMonth).toHaveValue('2023-12')
|
||||
|
||||
|
|
@ -63,13 +83,17 @@ test('测试日期范围选择', async ({ page }) => {
|
|||
const startYear = page.getByPlaceholder('开始年份')
|
||||
const endYear = page.getByPlaceholder('结束年份')
|
||||
await startYear.click()
|
||||
await page.waitForTimeout(100)
|
||||
await startYear.fill('2022')
|
||||
await startYear.press('Tab')
|
||||
await endYear.fill('2023')
|
||||
await endYear.press('Enter')
|
||||
await endYear.click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('cell', { name: '2020' }).getByText('2020').click()
|
||||
await page.waitForTimeout(100)
|
||||
await page.getByRole('cell', { name: '2023' }).getByText('2023').click()
|
||||
await page.waitForTimeout(100)
|
||||
await expect(startYear).toHaveValue('2020')
|
||||
await expect(endYear).toHaveValue('2023')
|
||||
})
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@ test('基本用法', async ({ page }) => {
|
|||
.getByRole('img')
|
||||
.click()
|
||||
await expect(
|
||||
page.locator('div').filter({ hasText: '文本字段勾选隐藏标题1标题2标题3标题4标题5确认取消' }).nth(2)
|
||||
page.locator('div').filter({ hasText: '文本字段勾选隐藏标题1标题2标题3标题4标题5确定取消' }).nth(2)
|
||||
).toBeVisible()
|
||||
await expect(page.locator('div').filter({ hasText: /^个性化标题$/ })).toBeVisible()
|
||||
await expect(page.getByRole('button', { name: '确认' })).toBeVisible()
|
||||
await page.getByRole('button', { name: '确认' }).click()
|
||||
await expect(page.getByRole('button', { name: '确定' })).toBeVisible()
|
||||
await page.getByRole('button', { name: '确定' }).click()
|
||||
await expect(
|
||||
page.locator('div').filter({ hasText: '文本字段勾选隐藏标题1标题2标题3标题4标题5确认取消' }).nth(2)
|
||||
page.locator('div').filter({ hasText: '文本字段勾选隐藏标题1标题2标题3标题4标题5确定取消' }).nth(2)
|
||||
).not.toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ test('dialogBox 自定义底部', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('dialog-box#custom-dialog-footer')
|
||||
await page.getByRole('button', { name: /Dialog/ }).click()
|
||||
await expect(page.locator('.tiny-dialog-box__footer > div')).toHaveText('自定义footer区域')
|
||||
await expect(page.locator('.tiny-dialog-box__footer > div')).toHaveText(/自定义/)
|
||||
await page.getByLabel('Close').click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,6 +4,6 @@ test('dialogBox 自定义标题', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('dialog-box#custom-dialog-title')
|
||||
await page.getByRole('button', { name: /Dialog/ }).click()
|
||||
await expect(page.locator('.tiny-dialog-box__header > div')).toHaveText('自定义title区域')
|
||||
await expect(page.locator('.tiny-dialog-box__header > div')).toHaveText(/自定义/)
|
||||
await page.getByRole('button', { name: /确 定/ }).click()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ test('自定义服务', async ({ page }) => {
|
|||
page.on('pageerror', (exception) => expect(exception).not.toBeNull())
|
||||
await page.goto('drop-roles#custom-service')
|
||||
|
||||
const input = page.getByPlaceholder('选择角色')
|
||||
const input = page.locator('.tiny-select input')
|
||||
const listItems = page.getByRole('listitem')
|
||||
const url = await page.evaluate(() => window.location.href)
|
||||
const notify1 = page.locator('.tiny-notify').filter({
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('font#english-fonts')
|
||||
await page.getByText('字体使用规范').click()
|
||||
await page.locator('.col-xs-10').first().click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[1]')).toHaveAttribute(
|
||||
'class',
|
||||
'tiny-row row-font-css font-38-css'
|
||||
)
|
||||
await page.locator('div:nth-child(2) > .col-xs-10').click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[2]')).toHaveAttribute(
|
||||
'class',
|
||||
'tiny-row row-font-css font-30-css'
|
||||
)
|
||||
await page.locator('div:nth-child(3) > .col-xs-10').click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[3]')).toHaveAttribute(
|
||||
'class',
|
||||
'tiny-row row-font-css font-24-css'
|
||||
)
|
||||
await page.locator('div:nth-child(4) > .col-xs-10').click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[4]')).toHaveAttribute(
|
||||
'class',
|
||||
'tiny-row row-font-css font-20-css'
|
||||
)
|
||||
await page.locator('div:nth-child(5) > .col-xs-10').click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[5]')).toHaveAttribute(
|
||||
'class',
|
||||
'tiny-row row-font-css font-16-css'
|
||||
)
|
||||
await page.locator('div:nth-child(6) > .col-xs-10').click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[6]')).toHaveAttribute(
|
||||
'class',
|
||||
'tiny-row row-font-css font-14-css'
|
||||
)
|
||||
await page.locator('div:nth-child(7) > .col-xs-10').click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/div[7]')).toHaveAttribute(
|
||||
'class',
|
||||
'tiny-row row-font-css font-12-css'
|
||||
)
|
||||
})
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('font#Font-usage-specifications')
|
||||
await page.getByText('中文字体集').click()
|
||||
await page.getByRole('heading', { name: '用户体验' }).click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/h1')).toHaveText('用户体验')
|
||||
await page.getByRole('heading', { name: '微软雅黑' }).click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/h5')).toHaveText('微软雅黑')
|
||||
})
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import { test, expect } from '@playwright/test'
|
||||
|
||||
test('test', async ({ page }) => {
|
||||
await page.goto('font#chinese-font-set')
|
||||
await page.getByText('英文字体').click()
|
||||
await page.getByRole('heading', { name: 'User Experience Design' }).click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/h1')).toHaveText('User Experience Design')
|
||||
await page.getByRole('heading', { name: 'Helvetica' }).click()
|
||||
await expect(page.locator('//*[@id="preview"]/div[2]/div[2]/h5')).toHaveText('Helvetica')
|
||||
})
|
||||
|
|
@ -8,6 +8,8 @@ test('测试表单复杂布局', async ({ page }) => {
|
|||
const form = demo.locator('.tiny-form')
|
||||
const formItem = form.locator('.tiny-form-item')
|
||||
|
||||
await page.waitForTimeout(2000)
|
||||
|
||||
const item1Box = await formItem.first().boundingBox()
|
||||
const item2Box = await formItem.nth(1).boundingBox()
|
||||
const item3Box = await formItem.nth(2).boundingBox()
|
||||
|
|
|
|||
|
|
@ -12,21 +12,21 @@ test('测试表单文本对齐', async ({ page }) => {
|
|||
const firstItemContent = formItem.first().locator('.tiny-form-item__content')
|
||||
|
||||
await getBtnByText('left').click()
|
||||
await page.waitForTimeout(300)
|
||||
await page.waitForTimeout(1000)
|
||||
await expect(form).toHaveClass(/tiny-form--label-left/)
|
||||
let labelBox = await firstItemLabel.boundingBox()
|
||||
let contentBox = await firstItemContent.boundingBox()
|
||||
expect(labelBox?.y).toEqual(contentBox?.y)
|
||||
|
||||
await getBtnByText('top').click()
|
||||
await page.waitForTimeout(300)
|
||||
await page.waitForTimeout(1000)
|
||||
await expect(form).toHaveClass(/tiny-form--label-top/)
|
||||
labelBox = await firstItemLabel.boundingBox()
|
||||
contentBox = await firstItemContent.boundingBox()
|
||||
expect(labelBox?.y).toBeLessThan(contentBox?.y || 0)
|
||||
|
||||
await getBtnByText('right').click()
|
||||
await page.waitForTimeout(300)
|
||||
await page.waitForTimeout(1000)
|
||||
await expect(form).toHaveClass(/tiny-form--label-right/)
|
||||
labelBox = await firstItemLabel.boundingBox()
|
||||
contentBox = await firstItemContent.boundingBox()
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue