zhoujunyu
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

doc(components): demo and api docs optimize (#860)

This commit is contained in:
gimmyhehe 2023-11-17 02:33:38 -08:00 committed by GitHub
parent e748f3c41d
commit a4cb006a44
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
122 changed files with 1671 additions and 1600 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/alert/size-composition-api.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<tiny-alert size="normal" description="size 为 normal"></tiny-alert>
<tiny-alert size="large" title="size 为 large"></tiny-alert>
<tiny-alert size="large" title="size 为 large" description="size 为 large"></tiny-alert>
</div>
</template>

2
examples/sites/demos/pc/app/alert/size.vue
View File

@ -1,7 +1,7 @@
<template>
<div>
<tiny-alert size="normal" description="size 为 normal"></tiny-alert>
<tiny-alert size="large" title="size 为 large"></tiny-alert>
<tiny-alert size="large" title="size 为 large" description="size 为 large"></tiny-alert>
</div>
</template>

12
examples/sites/demos/pc/app/alert/title-composition-api.vue
View File

@ -1,18 +1,18 @@
<template>
<div>
<tiny-alert size="large" title="通过属性设置自定义 title"></tiny-alert>
<tiny-alert size="large" title="通过属性设置自定义 title" description="描述内容"></tiny-alert>
<br />
<tiny-alert size="large">
<tiny-alert size="large" description="描述内容">
<template #title>通过 slot 设置自定义 title</template>
</tiny-alert>
<br />
<tiny-alert size="large"></tiny-alert>
<tiny-alert size="large" description="描述内容"></tiny-alert>
<br />
<tiny-alert size="large" type="success"></tiny-alert>
<tiny-alert size="large" type="success" description="描述内容"></tiny-alert>
<br />
<tiny-alert size="large" type="error"></tiny-alert>
<tiny-alert size="large" type="error" description="描述内容"></tiny-alert>
<br />
<tiny-alert size="large" type="warning"></tiny-alert>
<tiny-alert size="large" type="warning" description="描述内容"></tiny-alert>
</div>
</template>

12
examples/sites/demos/pc/app/alert/title.vue
View File

@ -1,18 +1,18 @@
<template>
<div>
<tiny-alert size="large" title="通过属性设置自定义 title"></tiny-alert>
<tiny-alert size="large" title="通过属性设置自定义 title" description="描述内容"></tiny-alert>
<br />
<tiny-alert size="large">
<tiny-alert size="large" description="描述内容">
<template #title>通过 slot 设置自定义 title</template>
</tiny-alert>
<br />
<tiny-alert size="large"></tiny-alert>
<tiny-alert size="large" description="描述内容"></tiny-alert>
<br />
<tiny-alert size="large" type="success"></tiny-alert>
<tiny-alert size="large" type="success" description="描述内容"></tiny-alert>
<br />
<tiny-alert size="large" type="error"></tiny-alert>
<tiny-alert size="large" type="error" description="描述内容"></tiny-alert>
<br />
<tiny-alert size="large" type="warning"></tiny-alert>
<tiny-alert size="large" type="warning" description="描述内容"></tiny-alert>
</div>
</template>

2
examples/sites/demos/pc/app/alert/webdoc/alert.cn.md
View File

@ -4,4 +4,4 @@ title: Alert 警告
# Alert 警告
<div>Alert 警告,提供 warning、error、info、success 四种类型显示不同类别的信息。</div>
<div>Alert 警告，非浮层的静态展现形式，始终展现，不会自动消失，用户可以点击关闭。</div>

2
examples/sites/demos/pc/app/alert/webdoc/alert.en.md
View File

@ -4,4 +4,4 @@ title: Alert
# Alert
<div>Alert alarms, including warning, error, info, and success.</div>
<div>Alert alarms, The static display form of non floating layer is always displayed and will not automatically disappear. Users can click to close it.</div>

40
examples/sites/demos/pc/app/alert/webdoc/alert.js
View File

@ -17,7 +17,7 @@ export default {
'demoId': 'size',
'name': { 'zh-CN': '尺寸', 'en-US': 'Size' },
'desc': {
'zh-CN': '<p>通过 <code>size</code> 设置不同的尺寸，可选值： <code>normal、large</code> 。</p>',
'zh-CN': '<p>通过 <code>size</code> 设置不同的尺寸，可选值： <code>normal</code> 、<code>large</code> 。</p>',
'en-US':
'<p>Set different sizes through <code>size</code> , with optional values: <code>normal, large</code> . </p>'
},
@ -105,7 +105,7 @@ export default {
'type': 'boolean',
'defaultValue': 'true',
'desc': {
'zh-CN': '设置警告是否可以关闭',
'zh-CN': '警告是否可以关闭',
'en-US': 'Set whether alarms can be disabled.'
},
'demoId': 'custom-close'
@ -113,7 +113,7 @@ export default {
{
'name': 'close-text',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '关闭按钮自定义文本',
'en-US': 'Customized text of the close button'
@ -123,17 +123,17 @@ export default {
{
'name': 'description',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置警告的提示内容',
'zh-CN': '警告的提示内容',
'en-US': 'Set the warning prompt content'
},
'demoId': 'basic-usage'
},
{
'name': 'icon',
'type': 'Component',
'defaultValue': '',
'type': 'VueComponent',
'defaultValue': '--',
'desc': {
'zh-CN': '传入图标组件自定义警告的图标，默认会根据 type 值自动使用对应图标',
'en-US':
@ -153,10 +153,10 @@ export default {
},
{
'name': 'size',
'type': 'normal | large',
'defaultValue': 'normal',
'type': "'normal' | 'large'",
'defaultValue': "'normal'",
'desc': {
'zh-CN': '设置警告的大小',
'zh-CN': '警告的尺寸大小',
'en-US': 'Set the size of the warning'
},
'demoId': 'size'
@ -164,9 +164,9 @@ export default {
{
'name': 'title',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置警告的标题，在 size 为 large 时有效，默认会根据 type 自动设置',
'zh-CN': '警告的标题，在 size 为 large 时有效，默认会根据 type 自动设置',
'en-US':
'Set the warning title. This parameter is valid only when size is set to large. By default, the alarm title is automatically set based on type.'
},
@ -174,10 +174,10 @@ export default {
},
{
'name': 'type',
'type': 'success | warning | info | error',
'defaultValue': 'success',
'type': "'success' | 'warning' | 'info' | 'error'",
'defaultValue': "'info'",
'desc': {
'zh-CN': '设置警告的类型',
'zh-CN': '警告的类型',
'en-US': 'Set the alarm type'
},
'demoId': 'basic-usage'
@ -187,7 +187,7 @@ export default {
{
'name': 'close',
'type': '() => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '关闭 alert 时触发的事件',
'en-US': 'Event triggered when the alert function is disabled'
@ -199,7 +199,7 @@ export default {
{
'name': 'close',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '自定义关闭内容，当 closable 属性为 false 时有效',
'en-US': ''
@ -209,7 +209,7 @@ export default {
{
'name': 'default',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '组件默认插槽，当 size 设置为 large 后有效',
'en-US': 'The default slot for the component is valid when size is set to large'
@ -219,7 +219,7 @@ export default {
{
'name': 'description',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '提示内容',
'en-US': 'Prompt Content'
@ -229,7 +229,7 @@ export default {
{
'name': 'title',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '标题的内容，当 size 设置为 large 后有效',
'en-US': 'The content of the title is valid when size is set to large'

4
examples/sites/demos/pc/app/badge/offset-composition-api.vue
View File

@ -1,7 +1,7 @@
<template>
<p>使用字符串 offset=['0', '-50%']</p>
<p>使用字符串：</p>
<tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
<p>使用数字 offset=[0, -10]</p>
<p>使用数字：</p>
<tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
</template>

4
examples/sites/demos/pc/app/badge/offset.vue
View File

@ -1,7 +1,7 @@
<template>
<p>使用字符串 offset=['0', '-50%']</p>
<p>使用字符串：</p>
<tiny-badge :value="2" :offset="['0', '-50%']">我的待办</tiny-badge>
<p>使用数字 offset=[0, -10]</p>
<p>使用数字：</p>
<tiny-badge :value="2" :offset="[0, -10]">我的待办</tiny-badge>
</template>

8
examples/sites/demos/pc/app/badge/slot-default-composition-api.vue
View File

@ -1,7 +1,7 @@
<template>
<tiny-badge :value="2">
<template #default>
<span style="color: red">自定义默认插槽</span>
<span class="warning">自定义默认插槽</span>
</template>
</tiny-badge>
</template>
@ -9,3 +9,9 @@
<script setup>
import { Badge as TinyBadge } from '@opentiny/vue'
</script>
<style scoped>
.warning {
color: #fa9841;
}
</style>

8
examples/sites/demos/pc/app/badge/slot-default.vue
View File

@ -1,7 +1,7 @@
<template>
<tiny-badge :value="2">
<template #default>
<span style="color: red">自定义默认插槽</span>
<span class="warning">自定义默认插槽</span>
</template>
</tiny-badge>
</template>
@ -15,3 +15,9 @@ export default {
}
}
</script>
<style scoped>
.warning {
color: #fa9841;
}
</style>

76
examples/sites/demos/pc/app/badge/webdoc/badge.js
View File

@ -6,9 +6,9 @@ export default {
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '<p>通过 <code> data</code> 设置文本内容， <code> value</code> 设置标记内容。</p>\n',
'zh-CN': '<p>通过 <code>data</code> 设置文本内容， <code>value</code> 设置标记内容。</p>\n',
'en-US':
'<p>Set the text content through <code> data</code> , and set the tag content through <code> value</code> </p>\n'
'<p>Set the text content through <code>data</code> , and set the tag content through <code>value</code> </p>\n'
},
'codeFiles': ['basic-usage.vue']
},
@ -17,9 +17,9 @@ export default {
'name': { 'zh-CN': '主題样式', 'en-US': 'Theme Style' },
'desc': {
'zh-CN':
'<p>通过 <code> type</code> 设置显示主题，可选值： <code> primary、success、warning、danger、info</code> 默认值：danger。</p>\n',
'<p>通过 <code>type</code> 设置显示主题，可选值： <code>primary</code> 、<code>success</code> 、<code>warning</code> 、<code>danger</code> 、<code>info</code>。</p>\n',
'en-US':
'<p>Set the display theme through <code> type</code> . Optional values: <code> primary, success, warning, danger, info</code> Default value: danger.</p>\n'
'<p>Set the display theme through <code>type</code> . Optional values: <code>primary, success, warning, danger</code>.</p>\n'
},
'codeFiles': ['type.vue']
},
@ -27,8 +27,8 @@ export default {
'demoId': 'is-dot',
'name': { 'zh-CN': '小圆点标记', 'en-US': 'Small dot mark' },
'desc': {
'zh-CN': '<p>通过 <code> is-dot</code> 设置显示小圆点标记。</p>\n',
'en-US': '<p>Set the display of small dot markers through <code> is dot</code> settings.</p>\n'
'zh-CN': '<p>通过 <code>is-dot</code> 设置显示小圆点标记。</p>\n',
'en-US': '<p>Set the display of small dot markers through <code>is dot</code> settings.</p>\n'
},
'codeFiles': ['is-dot.vue']
},
@ -36,9 +36,9 @@ export default {
'demoId': 'max',
'name': { 'zh-CN': '计数最大值', 'en-US': 'Maximum count value' },
'desc': {
'zh-CN': "<p>通过 <code> max</code> 设置最大值，超过最大值会显示 '{max}+'。</p>\n",
'zh-CN': "<p>通过 <code>max</code> 设置最大值，超过最大值会显示 '{max}+'。</p>\n",
'en-US':
"<p>By setting the maximum value through <code> max</code> , exceeding the maximum value will display '{max}+'.</p>"
"<p>By setting the maximum value through <code>max</code> , exceeding the maximum value will display '{max}+'.</p>"
},
'codeFiles': ['max.vue']
},
@ -47,9 +47,9 @@ export default {
'name': { 'zh-CN': '跳转链接', 'en-US': 'Link' },
'desc': {
'zh-CN':
'<p>通过 <code> href</code> 设置跳转链接， <code> target</code> 设置跳转方式，同 <code> a</code> 标签的 <code> target</code> 属性。</p>\n',
'<p>通过 <code>href</code> 设置跳转链接， <code>target</code> 设置跳转方式，同 <code>a</code> 标签的 <code>target</code> 属性。</p>\n',
'en-US':
'<p>Set the jump link through <code> href</code> , and set the jump method using the <code> target</code> attribute of the <code> a</code> tag.</p>\n'
'<p>Set the jump link through <code>href</code> , and set the jump method using the <code>target</code> attribute of the <code>a</code> tag.</p>\n'
},
'codeFiles': ['link.vue']
},
@ -57,8 +57,8 @@ export default {
'demoId': 'badge-class',
'name': { 'zh-CN': '自定义类名', 'en-US': 'Custom Class Name' },
'desc': {
'zh-CN': '<p>通过 <code> badge-class</code> 设置自定义类名。</p>\n',
'en-US': '<p>Set custom class names through <code> bag class</code> .</p>\n'
'zh-CN': '<p>通过 <code>badge-class</code> 设置自定义类名。</p>\n',
'en-US': '<p>Set custom class names through <code>bag class</code> .</p>\n'
},
'codeFiles': ['badge-class.vue']
},
@ -66,8 +66,8 @@ export default {
'demoId': 'slot-default',
'name': { 'zh-CN': '自定义文本内容', 'en-US': 'Badge text content' },
'desc': {
'zh-CN': '<p>通过 <code> default slot</code> 自定义文本内容。</p>\n',
'en-US': '<p> <code> default slot</code> Tag Content Custom.</p>\n'
'zh-CN': '<p>通过 <code>default</code> 插槽自定义文本内容。</p>\n',
'en-US': '<p> <code>default slot</code> Tag Content Custom.</p>\n'
},
'codeFiles': ['slot-default.vue']
},
@ -75,8 +75,8 @@ export default {
'demoId': 'slot-content',
'name': { 'zh-CN': '自定义标记内容', 'en-US': 'Customized badge content' },
'desc': {
'zh-CN': '<p>通过 <code> content slot</code> 自定义标记内容。</p>\n',
'en-US': '<p> <code> content slot</code> Custom Prompt Content.</p>\n'
'zh-CN': '<p>通过 <code>content</code> 插槽自定义标记内容。</p>\n',
'en-US': '<p> <code>content slot</code> Custom Prompt Content.</p>\n'
},
'codeFiles': ['slot-content.vue']
},
@ -84,8 +84,8 @@ export default {
'demoId': 'dynamic-hidden',
'name': { 'zh-CN': '消息已读动态隐藏标记', 'en-US': 'Dynamic hiding flag of read messages' },
'desc': {
'zh-CN': '<p>通过 <code> hidden</code> 设置是否隐藏标记。</p>\n',
'en-US': '<p>Set whether to hide tags by <code> hidden</code> .</p>\n'
'zh-CN': '<p>通过 <code>hidden</code> 设置是否隐藏标记。</p>\n',
'en-US': '<p>Set whether to hide tags by <code>hidden</code> .</p>\n'
},
'codeFiles': ['dynamic-hidden.vue']
},
@ -93,8 +93,8 @@ export default {
'demoId': 'offset',
'name': { 'zh-CN': '标记的位置', 'en-US': 'Tag Offset' },
'desc': {
'zh-CN': '<p>通过 <code> offset</code> 调整标记的位置。</p>\n',
'en-US': '<p> <code> offset</code> Custom Tag Offset.</p>\n'
'zh-CN': '<p>通过 <code>offset</code> 调整标记的位置。</p>\n',
'en-US': '<p> <code>offset</code> Custom Tag Offset.</p>\n'
},
'codeFiles': ['offset.vue']
}
@ -107,7 +107,7 @@ export default {
{
'name': 'badge-class',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '自定义标记的类名',
'en-US': 'Class name for custom tags'
@ -117,9 +117,9 @@ export default {
{
'name': 'data',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置文本内容',
'zh-CN': '文本内容',
'en-US': 'Set Text Content'
},
'demoId': 'basic-usage'
@ -137,7 +137,7 @@ export default {
{
'name': 'href',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '指定跳转的目标页面地址',
'en-US': 'Specify the URL of the target page.'
@ -149,7 +149,7 @@ export default {
'type': 'boolean',
'defaultValue': 'false',
'desc': {
'zh-CN': '设置是否以小圆点的形式来显示标记',
'zh-CN': '是否以小圆点的形式来显示标记',
'en-US': 'Set whether to display the badge in the form of small dots'
},
'demoId': 'is-dot'
@ -157,10 +157,10 @@ export default {
{
'name': 'max',
'type': 'number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN':
'指定徽章显示的最大值,如果实际获取的徽章值超过该最大值，则以最大值后接一个"+"的形式显示徽章数;要求 value 是 number 类型',
"指定徽章显示的最大值,如果实际获取的徽章值超过该最大值，则以最大值后接一个 '+' 的形式显示徽章数，要求 value 是 number 类型",
'en-US':
'Specifies the maximum number of badges to be displayed. If the actual badge value exceeds the maximum value, the number of badges is displayed in the format of "+". The value must be of the number type.'
},
@ -169,9 +169,9 @@ export default {
{
'name': 'offset',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置标记位置的偏移量，详见demo',
'zh-CN': '设置标记位置的偏移量',
'en-US': 'Set the offset of the marker position, see demo for details'
},
'demoId': 'offset'
@ -179,9 +179,9 @@ export default {
{
'name': 'target',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置点击标记时链接到目标页面的跳转方式，仅在 href 属性存在时使用',
'zh-CN': '点击标记时链接到目标页面的跳转方式，仅在 href 属性存在时使用',
'en-US':
'Set the jump method for linking to the target page when clicking on the tag, only used when the href attribute exists'
},
@ -189,10 +189,10 @@ export default {
},
{
'name': 'type',
'type': 'primary | success | warning | danger | info',
'defaultValue': 'danger',
'type': "'primary' | 'success' | 'warning' | 'danger' | 'info'",
'defaultValue': "'danger'",
'desc': {
'zh-CN': '设置标记的类型',
'zh-CN': '标记的类型',
'en-US': 'Set the type of badge'
},
'demoId': 'type'
@ -200,9 +200,9 @@ export default {
{
'name': 'value',
'type': 'number | string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置相关数据条目数',
'zh-CN': '相关数据条目数',
'en-US': 'Set the number of related data entries'
},
'demoId': 'basic-usage'
@ -213,7 +213,7 @@ export default {
{
'name': 'content',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '消息提示内容',
'en-US': 'Message Content'
@ -223,7 +223,7 @@ export default {
{
'name': 'default',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '默认插槽，有data属性时，默认插槽不生效',
'en-US': 'Default slot. When there is a data attribute, the default slot is not valid'

2
examples/sites/demos/pc/app/button-group/change-event-composition-api.vue
View File

@ -16,6 +16,6 @@ const groupData = ref([
])
function handleChange(val) {
Modal.message('change事件触发了')
Modal.message(`change事件触发了，选中值为${val}`)
}
</script>

2
examples/sites/demos/pc/app/button-group/change-event.vue
View File

@ -23,7 +23,7 @@ export default {
},
methods: {
handleChange(val) {
Modal.message('change事件触发了')
Modal.message(`change事件触发了，选中值为${val}`)
}
}
}

4
examples/sites/demos/pc/app/button-group/size-composition-api.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="button-group-demo">
<tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="medium" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
</div>
</template>

4
examples/sites/demos/pc/app/button-group/size.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="button-group-demo">
<tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="medium" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="small" :data="groupData" v-model="checkedVal"></tiny-button-group>
<tiny-button-group size="mini" :data="groupData" v-model="checkedVal"></tiny-button-group>
</div>
</template>

12
examples/sites/demos/pc/app/button-group/sup-composition-api.vue
View File

@ -23,8 +23,8 @@ const groupData = ref([
text: 'Button1',
value: 'Button1',
sup: {
class: ['disabled-bg', 'disabled-text'],
text: '售罄'
class: ['success-bg'],
text: '特惠'
}
},
{
@ -56,12 +56,10 @@ const groupData = ref([
</script>
<style scoped>
.tiny-button-group :deep(.disabled-bg) {
background-color: #ccc;
}
.tiny-button-group :deep(.disabled-tex)t {
color: #000;
.tiny-button-group :deep(.success-bg) {
background-color: #52c41a;
}
.tiny-button-group :deep(.sup-slot) {
line-height: 1;
padding: 0 4px;

12
examples/sites/demos/pc/app/button-group/sup.vue
View File

@ -29,8 +29,8 @@ export default {
text: 'Button1',
value: 'Button1',
sup: {
class: ['disabled-bg', 'disabled-text'],
text: '售罄'
class: ['success-bg'],
text: '特惠'
}
},
{
@ -65,12 +65,10 @@ export default {
</script>
<style scoped>
.tiny-button-group :deep(.disabled-bg) {
background-color: #ccc;
}
.tiny-button-group :deep(.disabled-tex)t {
color: #000;
.tiny-button-group :deep(.success-bg) {
background-color: #52c41a;
}
.tiny-button-group :deep(.sup-slot) {
line-height: 1;
padding: 0 4px;

62
examples/sites/demos/pc/app/button-group/webdoc/button-group.js
View File

@ -7,9 +7,9 @@ export default {
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN':
'<p>通过 <code>data</code> 设置按钮组数据，类型为<a href="#IButtonGroupData">IButtonGroupData</a>，通过 <code>v-model</code> 设置绑定值。</p>',
'<p>通过 <code>data</code> 设置按钮组数据，类型为 <a href="#IButtonGroupData">IButtonGroupData</a> ，通过 <code>v-model</code> 设置绑定值。</p>',
'en-US':
'<p>Set the button group data to type<a="# IButtonGroupData">IButtonGroupData</a>through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
'<p>Set the button group data to type <a="# IButtonGroupData">IButtonGroupData</a> through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
},
'codeFiles': ['basic-usage.vue']
},
@ -18,7 +18,7 @@ export default {
'name': { 'zh-CN': '设置组件尺寸大小', 'en-US': 'Set Component Size' },
'desc': {
'zh-CN':
'<p>通过 <code>size</code> 设置尺寸大小，可选值为： <code>medium</code> ， <code>small</code> ， <code>mini</code> 。</p>',
'<p>通过 <code>size</code> 设置尺寸大小，可选值有 <code>medium</code> 、<code>small</code> 、<code>mini</code> 。</p>',
'en-US':
'<p>Set the size through <code>size</code> . The optional values are: <code>medium</code> , <code>small</code> , <code>mini</code> .</p>'
},
@ -49,7 +49,7 @@ export default {
'name': { 'zh-CN': '数据字段映射', 'en-US': 'Data Field Mapping' },
'desc': {
'zh-CN':
'<p>若按钮组数据对象中的字段不是默认的 text 和 value ，则可通过 <code>text-field</code> 、 <code>value-field</code> 属性进行映射。</p>',
'<p>若按钮组数据对象中的字段不是默认的 <code>text</code> 和 <code>value</code> ，则可通过 <code>text-field</code> 、<code>value-field</code> 属性进行映射。</p>',
'en-US':
'<p>If the fields in the button group data object are not the default text and value, the <code>text-field</code> and <code>value-field</code> attributes can be used for mapping. </p>'
},
@ -76,21 +76,12 @@ export default {
},
'codeFiles': ['show-edit.vue']
},
{
'demoId': 'change-event',
'name': { 'zh-CN': 'change事件', 'en-US': 'Change Event' },
'desc': {
'zh-CN': '<p>当选中按钮发生改变时触发 <code>change</code> 事件。</p>',
'en-US': '<p>The <code>change</code> event is triggered when the selected button is changed. </p>'
},
'codeFiles': ['change-event.vue']
},
{
'demoId': 'slot-default',
'name': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
'desc': {
'zh-CN':
'<p>使用默认插槽自定义按钮组，使用默认插槽后， <code>button-group</code> 的 <code>data、text-field、value-field、value / v-model、size</code> 属性对插槽中的按钮将不再生效。</p>',
'<p>使用默认插槽自定义按钮组，使用默认插槽后， <code>button-group</code> 的 <code>data</code> 、<code>text-field</code> 、<code>value-field</code> 、<code>value / v-model</code> 、<code>size</code> 属性对插槽中的按钮将不再生效。</p>',
'en-US':
'<p>When the default slot mode is used, the <code>data, text-field, value-field, v-model, and size</code> attributes of the ButtonGroup do not take effect for buttons in the slot. </p>'
},
@ -120,10 +111,19 @@ export default {
'name': { 'zh-CN': '选块角标', 'en-US': '' },
'desc': {
'zh-CN':
'<p>通过 <code>data</code> 的 <code>sup</code> 属性配置选块角标。详见<a href="IButtonGroupData">IButtonGroupData</a></p>',
'<p>通过 <code>data</code> 的 <code>sup</code> 属性配置选块角标，详见 <a href="IButtonGroupData">IButtonGroupData</a> 。</p>',
'en-US': ''
},
'codeFiles': ['sup.vue']
},
{
'demoId': 'change-event',
'name': { 'zh-CN': '事件', 'en-US': 'Change Event' },
'desc': {
'zh-CN': '<p>当选中按钮发生改变时触发 <code>change</code> 事件。</p>',
'en-US': '<p>The <code>change</code> event is triggered when the selected button is changed. </p>'
},
'codeFiles': ['change-event.vue']
}
],
apis: [
@ -145,7 +145,7 @@ export default {
'name': 'data',
'type': 'IButtonGroupData[]',
'typeAnchorName': 'IButtonGroupData',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '按钮组数据',
'en-US': 'button group data'
@ -157,7 +157,7 @@ export default {
'type': 'boolean',
'defaultValue': 'false',
'desc': {
'zh-CN': '设置按钮组是否被禁用',
'zh-CN': '是否被禁用按钮组',
'en-US': 'Sets whether the button group is disabled'
},
'demoId': 'disabled'
@ -165,7 +165,7 @@ export default {
{
'name': 'modelValue / v-model',
'type': 'number | string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '默认选中按钮的值',
'en-US': 'Default value of the selected button'
@ -196,19 +196,19 @@ export default {
{
'name': 'show-more',
'type': 'number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置超过多少个显示更多按钮',
'en-US': 'Set the number of more buttons to be displayed'
'zh-CN': '当超过给定的按钮数量时显示更多按钮',
'en-US': 'Show more buttons when the given number of buttons is exceeded'
},
'demoId': 'show-more'
},
{
'name': 'size',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置组件大小',
'zh-CN': '按钮组尺寸大小',
'en-US': 'Set the component size'
},
'demoId': 'size'
@ -216,7 +216,7 @@ export default {
{
'name': 'text-field',
'type': 'string',
'defaultValue': 'text',
'defaultValue': "'text'",
'desc': {
'zh-CN': '按钮显示文字的字段值',
'en-US': 'Field value of the button displayed text'
@ -226,9 +226,9 @@ export default {
{
'name': 'value-field',
'type': 'string',
'defaultValue': 'value',
'defaultValue': "'value'",
'desc': {
'zh-CN': '按钮值的字段值',
'zh-CN': '按钮选中值的字段值',
'en-US': 'Field value of the button value'
},
'demoId': 'text-value-field'
@ -238,9 +238,9 @@ export default {
{
'name': 'change',
'type': '(value: string | number) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '当选中按钮发生改变时触发的回调函数',
'zh-CN': '当选中按钮发生改变时触发',
'en-US': 'Set the callback function triggered when the selected button is changed'
},
'demoId': 'change-event'
@ -248,9 +248,9 @@ export default {
{
'name': 'edit',
'type': '() => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '当编辑按钮被点击时触发的回调函数',
'zh-CN': '当编辑按钮被点击时触发',
'en-US': 'Set the callback function triggered when the edit button is clicked'
},
'demoId': 'show-edit'
@ -260,7 +260,7 @@ export default {
{
'name': 'default',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '默认插槽，自定义按钮组内容',
'en-US': 'button group content'

44
examples/sites/demos/pc/app/button/size-composition-api.vue
View File

@ -1,46 +1,48 @@
<template>
<tiny-layout>
<tiny-row>
<div class="title">常规按钮尺寸</div>
<tiny-button> 默认按钮 </tiny-button>
<div class="title">常规按钮尺寸：</div>
<tiny-button size="large"> 超大按钮 </tiny-button>
<tiny-button size="medium"> 中等按钮 </tiny-button>
<tiny-button size="small"> 小型按钮 </tiny-button>
<tiny-button> 默认按钮 </tiny-button>
<tiny-button size="mini"> 超小按钮 </tiny-button>
</tiny-row>
<tiny-row>
<div class="title">朴素按钮尺寸</div>
<tiny-button type="primary" plain> 默认按钮 </tiny-button>
<div class="title">朴素按钮尺寸：</div>
<tiny-button type="primary" size="large" plain> 超大按钮 </tiny-button>
<tiny-button type="primary" size="medium" plain> 中等按钮 </tiny-button>
<tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
<tiny-button type="primary" plain> 默认按钮 </tiny-button>
<tiny-button type="primary" size="mini" plain> 超小按钮 </tiny-button>
</tiny-row>
<tiny-row>
<div class="title">圆角按钮尺寸</div>
<tiny-button type="success" round> 默认按钮 </tiny-button>
<div class="title">圆角按钮尺寸：</div>
<tiny-button type="success" size="large" round> 超大按钮 </tiny-button>
<tiny-button type="success" size="medium" round> 中等按钮 </tiny-button>
<tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
<tiny-button type="success" round> 默认按钮 </tiny-button>
<tiny-button type="success" size="mini" round> 超小按钮 </tiny-button>
</tiny-row>
<tiny-row>
<div class="title">圆形按钮尺寸</div>
<tiny-button type="warning" :icon="TinyIconEdit" circle></tiny-button>
<tiny-button type="warning" size="large" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" size="medium" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" size="small" :icon="TinyIconEdit" circle> </tiny-button>
<tiny-button type="warning" size="mini" :icon="TinyIconEdit" circle> </tiny-button>
<div class="title">圆形按钮尺寸：</div>
<tiny-button type="warning" size="large" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" size="medium" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" size="small" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" :icon="IconEdit" circle></tiny-button>
<tiny-button type="warning" size="mini" :icon="IconEdit" circle> </tiny-button>
</tiny-row>
<tiny-row>
<div class="title">纯图标按钮尺寸</div>
<tiny-button :icon="TinyIconDel" type="text" />
<tiny-button :icon="TinyIconDel" type="text" size="large" />
<tiny-button :icon="TinyIconDel" type="text" size="medium" />
<tiny-button :icon="TinyIconDel" type="text" size="small" />
<tiny-button :icon="TinyIconDel" type="text" size="mini" />
<div class="title">纯图标按钮尺寸：</div>
<tiny-button :icon="IconDel" type="text" size="large" />
<tiny-button :icon="IconDel" type="text" size="medium" />
<tiny-button :icon="IconDel" type="text" size="small" />
<tiny-button :icon="IconDel" type="text" />
<tiny-button :icon="IconDel" type="text" size="mini" />
</tiny-row>
</tiny-layout>
</template>
@ -55,8 +57,10 @@ const TinyIconEdit = iconEdit()
<style scoped>
.title {
font-size: 18px;
margin-bottom: 10px;
font-size: 16px;
margin-top: 10px;
margin-bottom: 14px;
font-weight: bold;
}
.tiny-row {
margin-bottom: 20px;

28
examples/sites/demos/pc/app/button/size.vue
View File

@ -1,45 +1,47 @@
<template>
<tiny-layout>
<tiny-row>
<div class="title">常规按钮尺寸</div>
<tiny-button> 默认按钮 </tiny-button>
<div class="title">常规按钮尺寸：</div>
<tiny-button size="large"> 超大按钮 </tiny-button>
<tiny-button size="medium"> 中等按钮 </tiny-button>
<tiny-button size="small"> 小型按钮 </tiny-button>
<tiny-button> 默认按钮 </tiny-button>
<tiny-button size="mini"> 超小按钮 </tiny-button>
</tiny-row>
<tiny-row>
<div class="title">朴素按钮尺寸</div>
<tiny-button type="primary" plain> 默认按钮 </tiny-button>
<div class="title">朴素按钮尺寸：</div>
<tiny-button type="primary" size="large" plain> 超大按钮 </tiny-button>
<tiny-button type="primary" size="medium" plain> 中等按钮 </tiny-button>
<tiny-button type="primary" size="small" plain> 小型按钮 </tiny-button>
<tiny-button type="primary" plain> 默认按钮 </tiny-button>
<tiny-button type="primary" size="mini" plain> 超小按钮 </tiny-button>
</tiny-row>
<tiny-row>
<div class="title">圆角按钮尺寸</div>
<tiny-button type="success" round> 默认按钮 </tiny-button>
<div class="title">圆角按钮尺寸：</div>
<tiny-button type="success" size="large" round> 超大按钮 </tiny-button>
<tiny-button type="success" size="medium" round> 中等按钮 </tiny-button>
<tiny-button type="success" size="small" round> 小型按钮 </tiny-button>
<tiny-button type="success" round> 默认按钮 </tiny-button>
<tiny-button type="success" size="mini" round> 超小按钮 </tiny-button>
</tiny-row>
<tiny-row>
<div class="title">圆形按钮尺寸</div>
<tiny-button type="warning" :icon="IconEdit" circle></tiny-button>
<div class="title">圆形按钮尺寸：</div>
<tiny-button type="warning" size="large" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" size="medium" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" size="small" :icon="IconEdit" circle> </tiny-button>
<tiny-button type="warning" :icon="IconEdit" circle></tiny-button>
<tiny-button type="warning" size="mini" :icon="IconEdit" circle> </tiny-button>
</tiny-row>
<tiny-row>
<div class="title">纯图标按钮尺寸</div>
<tiny-button :icon="IconDel" type="text" />
<div class="title">纯图标按钮尺寸：</div>
<tiny-button :icon="IconDel" type="text" size="large" />
<tiny-button :icon="IconDel" type="text" size="medium" />
<tiny-button :icon="IconDel" type="text" size="small" />
<tiny-button :icon="IconDel" type="text" />
<tiny-button :icon="IconDel" type="text" size="mini" />
</tiny-row>
</tiny-layout>
@ -66,8 +68,10 @@ export default {
<style scoped>
.title {
font-size: 18px;
margin-bottom: 10px;
font-size: 16px;
margin-top: 10px;
margin-bottom: 14px;
font-weight: bold;
}
.tiny-row {
margin-bottom: 20px;

32
examples/sites/demos/pc/app/button/text-composition-api.vue
View File

@ -1,17 +1,16 @@
<template>
<div>
<div>
<tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
<tiny-button type="text" :icon="TinyIconMail" disabled> </tiny-button>
</div>
<div>
<tiny-button type="text" text="文本按钮"> </tiny-button>
<tiny-button type="text" text="文本按钮" disabled></tiny-button>
</div>
<div>
<tiny-button type="text" :icon="TinyIconMail" text="图标加文字"> </tiny-button>
<tiny-button type="text" :icon="TinyIconMail" text="图标加文字" disabled> </tiny-button>
</div>
<div class="title">纯图标按钮：</div>
<tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
<tiny-button type="text" :icon="TinyIconMail" disabled> </tiny-button>
<div class="title">纯文本按钮：</div>
<tiny-button type="text" text="文本按钮"> </tiny-button>
<tiny-button type="text" text="文本按钮" disabled></tiny-button>
<div class="title">图标加文字按钮：</div>
<tiny-button type="text" :icon="TinyIconMail" text="图标加文字"> </tiny-button>
<tiny-button type="text" :icon="TinyIconMail" text="图标加文字" disabled> </tiny-button>
</div>
</template>
@ -21,3 +20,12 @@ import { Button as TinyButton } from '@opentiny/vue'
const TinyIconMail = iconMail()
</script>
<style scoped>
.title {
margin-top: 16px;
padding: 10px 0 6px 10px;
font-size: 16px;
font-weight: bold;
}
</style>

32
examples/sites/demos/pc/app/button/text.vue
View File

@ -1,17 +1,16 @@
<template>
<div>
<div>
<tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
<tiny-button type="text" :icon="TinyIconMail" disabled> </tiny-button>
</div>
<div>
<tiny-button type="text" text="文本按钮"> </tiny-button>
<tiny-button type="text" text="文本按钮" disabled></tiny-button>
</div>
<div>
<tiny-button type="text" :icon="TinyIconMail" text="图标加文字"> </tiny-button>
<tiny-button type="text" :icon="TinyIconMail" text="图标加文字" disabled> </tiny-button>
</div>
<div class="title">纯图标按钮：</div>
<tiny-button type="text" :icon="TinyIconMail"> </tiny-button>
<tiny-button type="text" :icon="TinyIconMail" disabled> </tiny-button>
<div class="title">纯文本按钮：</div>
<tiny-button type="text" text="文本按钮"> </tiny-button>
<tiny-button type="text" text="文本按钮" disabled></tiny-button>
<div class="title">图标加文字按钮：</div>
<tiny-button type="text" :icon="TinyIconMail" text="图标加文字"> </tiny-button>
<tiny-button type="text" :icon="TinyIconMail" text="图标加文字" disabled> </tiny-button>
</div>
</template>
@ -30,3 +29,12 @@ export default {
}
}
</script>
<style scoped>
.title {
margin-top: 16px;
padding: 10px 0 6px 10px;
font-size: 16px;
font-weight: bold;
}
</style>

32
examples/sites/demos/pc/app/button/webdoc/button.js
View File

@ -67,7 +67,7 @@ export default {
'name': { 'zh-CN': '尺寸', 'en-US': 'Dimension' },
'desc': {
'zh-CN':
'<p>通过 <code>size</code> 设置按钮尺寸，可选值为 <code>large</code> 、 <code>medium</code> 、 <code>small</code> 、 <code>mini</code> 。不设置时为默认尺寸。</p>',
'<p>通过 <code>size</code> 设置按钮尺寸，可选值为 <code>large</code> 、<code>medium</code> 、<code>small</code> 、<code>mini</code> 。不设置时为默认尺寸。</p>',
'en-US':
'<p>Set the button size through <code>size</code> , with optional values of <code>large</code> , <code>medium</code> , <code>small</code> , <code>mini</code> . Default size when not set.</p>'
},
@ -134,17 +134,17 @@ export default {
'type': 'boolean',
'defaultValue': 'false',
'desc': {
'zh-CN': '按钮是否被禁用',
'zh-CN': '是否被禁用按钮',
'en-US': 'Sets whether the button is disabled'
},
'demoId': 'dynamic-disabled'
},
{
'name': 'icon',
'type': 'Component',
'defaultValue': '',
'type': 'VueComponent',
'defaultValue': '--',
'desc': {
'zh-CN': '按钮展示的图标，接收为Icon组件',
'zh-CN': '按钮左侧展示的图标，接收为Icon组件',
'en-US': 'The icon displayed by the button is received as an Icon component'
},
'demoId': 'icon'
@ -161,8 +161,8 @@ export default {
},
{
'name': 'native-type',
'type': 'button | submit | reset',
'defaultValue': 'button',
'type': "'button' | 'submit' | 'reset'",
'defaultValue': "'button'",
'desc': {
'zh-CN': '对应按钮原生 type 属性',
'en-US': 'Set the button native type attribute'
@ -201,8 +201,8 @@ export default {
},
{
'name': 'size',
'type': 'large | medium | small | mini',
'defaultValue': '',
'type': "'large' | 'medium' | 'small' | 'mini'",
'defaultValue': '--',
'desc': {
'zh-CN': '定义按钮尺寸',
'en-US': 'Define the button size'
@ -212,17 +212,17 @@ export default {
{
'name': 'text',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置按钮显示的文本',
'zh-CN': '按钮显示的文本',
'en-US': 'Set the text displayed by the button'
},
'demoId': 'text'
},
{
'name': 'type',
'type': 'primary | success | warning | danger | info | text',
'defaultValue': '',
'type': "'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'",
'defaultValue': '--',
'desc': {
'zh-CN': '展示按钮不同的状态，设置为text则展示为文本按钮',
'en-US': 'Display different states of buttons, set to text to display as text buttons'
@ -234,7 +234,7 @@ export default {
{
'name': 'click',
'type': '(event: PointEvent) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '当按钮被点击时触发的回调函数',
'en-US': 'Sets the callback function triggered when a button is clicked'
@ -246,9 +246,9 @@ export default {
{
'name': 'default',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '默认插槽',
'zh-CN': '默认插槽，自定义按钮展示内容',
'en-US': 'Default slot'
},
'demoId': 'image'

2
examples/sites/demos/pc/app/checkbox/border-composition-api.vue
View File

@ -1,6 +1,6 @@
<template>
<tiny-checkbox v-model="checked" border>
<tiny-tooltip content="备选项1 提示文字 提示文字" effect="light" placement="top">
<tiny-tooltip content="备选项1 提示文字 提示文字">
<div class="content-overflow">备选项1 提示文字 提示文字</div>
</tiny-tooltip>
</tiny-checkbox>

2
examples/sites/demos/pc/app/checkbox/border.vue
View File

@ -1,6 +1,6 @@
<template>
<tiny-checkbox v-model="checked" border>
<tiny-tooltip content="备选项1 提示文字 提示文字" effect="light" placement="top">
<tiny-tooltip content="备选项1 提示文字 提示文字">
<div class="content-overflow">备选项1 提示文字 提示文字</div>
</tiny-tooltip>
</tiny-checkbox>

21
examples/sites/demos/pc/app/checkbox/checkbox-button-composition-api.vue
View File

@ -1,24 +1,13 @@
<template>
<div>
<div>
自定义背景：
<tiny-switch v-model="isCustom"></tiny-switch>
</div>
<tiny-checkbox-group v-model="checked" :fill="isCustom ? '#409EFF' : ''">
<tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
<tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
</tiny-checkbox-group>
</div>
<tiny-checkbox-group v-model="checked">
<tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
<tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
</tiny-checkbox-group>
</template>
<script setup>
import { ref } from 'vue'
import {
CheckboxButton as TinyCheckboxButton,
CheckboxGroup as TinyCheckboxGroup,
Switch as TinySwitch
} from '@opentiny/vue'
import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
const checked = ref(['复选框1'])
const isCustom = ref(false)
</script>

8
examples/sites/demos/pc/app/checkbox/checkbox-button-multiple-composition-api.vue
View File

@ -1,9 +1,7 @@
<template>
<div style="margin-top: 20px">
<tiny-checkbox-group v-model="checkboxGroup" size="small">
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
</div>
<tiny-checkbox-group v-model="checkboxGroup" size="small">
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
</template>
<script setup>

8
examples/sites/demos/pc/app/checkbox/checkbox-button-multiple.vue
View File

@ -1,9 +1,7 @@
<template>
<div style="margin-top: 20px">
<tiny-checkbox-group v-model="checkboxGroup" size="small">
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
</div>
<tiny-checkbox-group v-model="checkboxGroup" size="small">
<tiny-checkbox-button v-for="city in cities" :label="city" :key="city">{{ city }}</tiny-checkbox-button>
</tiny-checkbox-group>
</template>
<script>

22
examples/sites/demos/pc/app/checkbox/checkbox-button.vue
View File

@ -1,29 +1,21 @@
<template>
<div>
<div>
自定义背景：
<tiny-switch v-model="isCustom"></tiny-switch>
</div>
<tiny-checkbox-group v-model="checked" :fill="isCustom ? '#409EFF' : ''">
<tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
<tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
</tiny-checkbox-group>
</div>
<tiny-checkbox-group v-model="checked">
<tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
<tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
</tiny-checkbox-group>
</template>
<script>
import { CheckboxButton, CheckboxGroup, Switch } from '@opentiny/vue'
import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
export default {
components: {
TinyCheckboxButton: CheckboxButton,
TinyCheckboxGroup: CheckboxGroup,
TinySwitch: Switch
TinyCheckboxGroup: CheckboxGroup
},
data() {
return {
checked: ['复选框1'],
isCustom: false
checked: ['复选框1']
}
}
}

3
examples/sites/demos/pc/app/checkbox/checkbox-events-composition-api.vue
View File

@ -4,7 +4,6 @@
<tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
<tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
</tiny-checkbox-group>
{{ logger }}
</div>
</template>
@ -16,6 +15,6 @@ const checked = ref(['复选框1'])
const logger = ref('')
function valueChange(val) {
logger.value = `当前选择：${JSON.stringify(val)}`
Modal.message(`change 事件触发了，选中值为：${val}`)
}
</script>

15
examples/sites/demos/pc/app/checkbox/checkbox-events.vue
View File

@ -1,15 +1,12 @@
<template>
<div>
<tiny-checkbox-group v-model="checked" @change="valueChange">
<tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
<tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
</tiny-checkbox-group>
{{ logger }}
</div>
<tiny-checkbox-group v-model="checked" @change="valueChange">
<tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
<tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
</tiny-checkbox-group>
</template>
<script>
import { CheckboxButton, CheckboxGroup } from '@opentiny/vue'
import { CheckboxButton, CheckboxGroup, Modal } from '@opentiny/vue'
export default {
components: {
@ -24,7 +21,7 @@ export default {
},
methods: {
valueChange(val) {
this.logger = `当前选择：${JSON.stringify(val)}`
Modal.message(`change 事件触发了，选中值为：${val}`)
}
}
}

13
examples/sites/demos/pc/app/checkbox/checkbox-slot-composition-api.vue
View File

@ -2,12 +2,12 @@
<tiny-checkbox-group v-model="checked">
<tiny-checkbox label="复选框1">
<template #default>
<span style="color: red">复选框1</span>
<span class="primary-bg">复选框1</span>
</template>
</tiny-checkbox>
<tiny-checkbox label="复选框2">
<template #default>
<span style="color: blue">复选框2</span>
<span class="warning-bg">复选框2</span>
</template>
</tiny-checkbox>
</tiny-checkbox-group>
@ -19,3 +19,12 @@ import { Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup } from '@o
const checked = ref(['复选框1'])
</script>
<style scoped>
.primary-bg {
color: #5e7ce0;
}
.warning-bg {
color: #fa9841;
}
</style>

13
examples/sites/demos/pc/app/checkbox/checkbox-slot.vue
View File

@ -2,12 +2,12 @@
<tiny-checkbox-group v-model="checked">
<tiny-checkbox label="复选框1">
<template #default>
<span style="color: red">复选框1</span>
<span class="primary-bg">复选框1</span>
</template>
</tiny-checkbox>
<tiny-checkbox label="复选框2">
<template #default>
<span style="color: blue">复选框2</span>
<span class="warning-bg">复选框2</span>
</template>
</tiny-checkbox>
</tiny-checkbox-group>
@ -28,3 +28,12 @@ export default {
}
}
</script>
<style scoped>
.primary-bg {
color: #5e7ce0;
}
.warning-bg {
color: #fa9841;
}
</style>

13
examples/sites/demos/pc/app/checkbox/custom-color-composition-api.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<tiny-checkbox-group v-model="checked" fill="#fa9841" text-color="#eee">
<tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
<tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
</tiny-checkbox-group>
</template>
<script setup>
import { ref } from 'vue'
import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGroup } from '@opentiny/vue'
const checked = ref(['复选框1'])
</script>

23
examples/sites/demos/pc/app/checkbox/custom-color.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<tiny-checkbox-group v-model="checked" fill="#fa9841" text-color="#eee">
<tiny-checkbox-button label="复选框1"></tiny-checkbox-button>
<tiny-checkbox-button label="复选框2"></tiny-checkbox-button>
</tiny-checkbox-group>
</template>
<script>
import { CheckboxButton, CheckboxGroup, Switch } from '@opentiny/vue'
export default {
components: {
TinyCheckboxButton: CheckboxButton,
TinyCheckboxGroup: CheckboxGroup,
TinySwitch: Switch
},
data() {
return {
checked: ['复选框1']
}
}
}
</script>

10
examples/sites/demos/pc/app/checkbox/indeterminate-composition-api.vue
View File

@ -1,8 +1,8 @@
<template>
<div>
<div style="margin: 16px 0">全部禁用 <tiny-switch v-model="isDisabled"></tiny-switch></div>
<div class="mb-16">全部禁用 <tiny-switch v-model="isDisabled"></tiny-switch></div>
<tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll" :disabled="isDisabled"> 全选 </tiny-checkbox>
<div style="margin: 16px 0"></div>
<div class="mb-16"></div>
<tiny-checkbox-group v-model="checkboxGroup" :disabled="isDisabled">
<tiny-checkbox v-for="(city, index) in cities" :label="city" :key="index">
{{ city }}
@ -36,3 +36,9 @@ const checkAll = computed({
}
})
</script>
<style scoped>
.mb-16 {
margin-bottom: 16px;
}
</style>

10
examples/sites/demos/pc/app/checkbox/indeterminate.vue
View File

@ -1,8 +1,8 @@
<template>
<div>
<div style="margin: 16px 0">全部禁用 <tiny-switch v-model="isDisabled"></tiny-switch></div>
<div class="mb-16">全部禁用 <tiny-switch v-model="isDisabled"></tiny-switch></div>
<tiny-checkbox :indeterminate="isIndeterminate" v-model="checkAll" :disabled="isDisabled"> 全选 </tiny-checkbox>
<div style="margin: 16px 0"></div>
<div class="mb-16"></div>
<tiny-checkbox-group v-model="checkboxGroup" :disabled="isDisabled">
<tiny-checkbox v-for="(city, index) in cities" :label="city" :key="index">
{{ city }}
@ -48,3 +48,9 @@ export default {
}
}
</script>
<style scoped>
.mb-16 {
margin-bottom: 16px;
}
</style>

8
examples/sites/demos/pc/app/checkbox/size-composition-api.vue
View File

@ -12,6 +12,12 @@ import { CheckboxButton as TinyCheckboxButton, CheckboxGroup as TinyCheckboxGrou
import { number } from 'echarts'
const cities = ref(['上海', '北京', '广州', '深圳'])
const sizeList = ref(['', 'medium', 'small', 'mini'])
const sizeList = ref(['medium', '', 'small', 'mini'])
const checkboxGroup = ref(['上海'])
</script>
<style scoped>
.tiny-checkbox-group {
margin-bottom: 16px;
}
</style>

8
examples/sites/demos/pc/app/checkbox/size.vue
View File

@ -17,9 +17,15 @@ export default {
data() {
return {
cities: ['上海', '北京', '广州', '深圳'],
sizeList: ['', 'medium', 'small', 'mini'],
sizeList: ['medium', '', 'small', 'mini'],
checkboxGroup: ['上海']
}
}
}
</script>
<style scoped>
.tiny-checkbox-group {
margin-bottom: 16px;
}
</style>

174
examples/sites/demos/pc/app/checkbox/webdoc/checkbox.js
View File

@ -5,7 +5,10 @@ export default {
{
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': { 'zh-CN': '<p>详细用法参考如下示例。</p>', 'en-US': '<p>For details, see the following example.</p>' },
'desc': {
'zh-CN': '<p>通过 <code>v-model</code> 设置绑定值，<code>name</code> 设置原生属性。</p>',
'en-US': '<p>For details, see the following example.</p>'
},
'codeFiles': ['basic-usage.vue']
},
{
@ -13,9 +16,9 @@ export default {
'name': { 'zh-CN': '复选框组', 'en-US': 'Checkbox group' },
'desc': {
'zh-CN':
'<p> <code>checkbox-group</code> 可以将多个 <code>checkbox</code> 元素管理为一组，在 <code>checkbox-group</code> 中使用 <code>v-model</code> 绑定 Array 类型的变量即可实现双向绑定。 <code>checkbox</code> 的 <code>label</code> 属性是其对应的值，若该标签中无内容，则该属性也充当 <code>checkbox</code> 的描述文本。 <code>label</code> 与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>\n',
'<p><code>checkbox-group</code> 可以将多个 <code>checkbox</code> 元素管理为一组，在 <code>checkbox-group</code> 中使用 <code>v-model</code> 绑定选中值。<code>checkbox</code> 的 <code>label</code> 与 <code>checkbox-group</code> 的绑定值相对应，如果存在指定的值则为选中状态，否则为不选中。</p>',
'en-US':
'<p>Manages multiple <code>checkbox</code> elements into a group through the <code>checkbox-group</code> element. In <code>checkbox-group</code> , use <code>v-model</code> to bind variables of the Array type to implement bidirectional binding. The <code>label</code> attribute of the <code>checkbox</code> is its corresponding value. If there is no content in the tag, the attribute also serves as the introduction after the checkbox. <code>label</code> corresponds to the element value in the array. If the specified value exists, the value is selected. Otherwise, the value is not selected. </p>\n'
'<p><code>checkbox-group</code> can manage multiple<code>checkbox</code>elements into a group and use<code>v model</code>to bind selected values in<code>checkbox group</code>< The<code>label</code>of code>checkbox</code>corresponds to the binding value of<code>checkbox group</code>. If a specified value exists, it is selected, otherwise it is not selected.</p>'
},
'codeFiles': ['checkbox-group.vue']
},
@ -23,30 +26,20 @@ export default {
'demoId': 'checkbox-button',
'name': { 'zh-CN': '复选框按钮', 'en-US': 'Checkbox button' },
'desc': {
'zh-CN':
'<p>通过 <code>checkbox-button</code> 以按钮的形式展示复选框,用法与 <code>checkbox</code> 相似。复选框按钮组可以通过 <code>fill</code> 自定义选中时背景颜色。</p>\n',
'zh-CN': '<p>通过 <code>checkbox-button</code> 以按钮的形式展示复选框，用法与 <code>checkbox</code> 相似。</p>',
'en-US':
'<p> <code>checkbox button</code> Display checkboxes in the form of buttons, similar in usage to <code>checkbox</code> .The checkbox button group can customize the background color when selected through <code>fill</code> .</p>\n'
'<p> <code>checkbox button</code> Display checkboxes in the form of buttons, similar in usage to <code>checkbox</code> .</p>'
},
'codeFiles': ['checkbox-button.vue']
},
{
'demoId': 'checkbox-events',
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
'desc': {
'zh-CN': '<p>勾选值改变后将触发 <code>change</code> 事件。</p>\n',
'en-US': '<p>The <code>change</code> event is triggered when the value of the check box is changed. </p>\n'
},
'codeFiles': ['checkbox-events.vue']
},
{
'demoId': 'group-options',
'name': { 'zh-CN': '配置式复选框组', 'en-US': 'Profile Checkbox Group' },
'desc': {
'zh-CN':
'<p>通过 <code>options</code> 配置显示多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。 <code>options</code> 的类型为<a href="#ICheckboxGroupOptions">ICheckboxGroupOptions[]</a>。 <code>type</code> 属性配合 <code>options</code> 属性一起使用，将 <code>type</code> 配置为 <code>button</code> ，复选框组将以按钮的形式展示。</p>\n',
'<p>通过 <code>options</code> 配置显示多选框组。使用该属性后，可以不用再在标签中以插槽的形式插入 <code>checkbox</code> 或 <code>checkbox-button</code> 元素。 <code>options</code> 的类型为 <a href="#ICheckboxGroupOptions">ICheckboxGroupOptions[]</a> 。 <code>type</code> 属性配合 <code>options</code> 属性一起使用，将 <code>type</code> 配置为 <code>button</code> ，复选框组将以按钮的形式展示。</p>',
'en-US':
'<p>Configure the display of multiple selection box groups through <code>options</code> . After using this attribute, you no longer need to insert <code>checkbox</code> or <code>checkbox button</code> elements in the label as slots. The type of <code>options</code> is<a="# ICheckboxGroupOptions">ICheckboxGroupOptions[]</a>< The code>type</code> attribute is used in conjunction with the <code>options</code> attribute to configure the <code>type</code> as <code>button</code> , and the checkbox group will be displayed in the form of a button.</p>\n'
'<p>Configure the display of multiple selection box groups through <code>options</code> . After using this attribute, you no longer need to insert <code>checkbox</code> or <code>checkbox button</code> elements in the label as slots. The type of <code>options</code> is <a="# ICheckboxGroupOptions">ICheckboxGroupOptions[]</a> .The <code>type</code> attribute is used in conjunction with the <code>options</code> attribute to configure the <code>type</code> as <code>button</code> , and the checkbox group will be displayed in the form of a button.</p>'
},
'codeFiles': ['group-options.vue']
},
@ -55,7 +48,7 @@ export default {
'name': { 'zh-CN': '描述文本', 'en-US': 'Description text' },
'desc': {
'zh-CN':
'<p>复选框和复现框按钮的描述文本，有三种方式可以提供，优先级依次为 <code>默认插槽</code> 、 <code>text</code> 、 <code>label</code> 。</p>',
'<p>复选框或复现框按钮的描述文本，有三种方式可以提供，优先级依次为 <code>默认插槽</code> 、<code>text</code> 、<code>label</code> 。</p>',
'en-US':
'<p>There are three ways to provide the description text for the checkbox or checkbox button, with priority being <code>default slot</code> , <code>text</code> , and <code>label</code> .<p>'
},
@ -66,9 +59,9 @@ export default {
'name': { 'zh-CN': '全选与半选', 'en-US': 'All and Half' },
'desc': {
'zh-CN':
'<p>在 <code>checkbox</code> 元素中配置 <code>indeterminate</code> 属性为 true 后，勾选框将展示为半选的样式。</p>\n',
'<p>在 <code>checkbox</code> 元素中配置 <code>indeterminate</code> 属性为 true 后，勾选框将展示为半选的样式。</p>',
'en-US':
'<p>After the <code>indeterminate</code> attribute is set to true in the <code>checkbox</code> element, the check box is displayed as half-selected. </p>\n'
'<p>After the <code>indeterminate</code> attribute is set to true in the <code>checkbox</code> element, the check box is displayed as half-selected. </p>'
},
'codeFiles': ['indeterminate.vue']
},
@ -77,9 +70,9 @@ export default {
'name': { 'zh-CN': '可选数量限制', 'en-US': 'Quantity Limit' },
'desc': {
'zh-CN':
'<p>在 <code>checkbox-group</code> 上可通过 <code>min</code> 、 <code>max</code> 属性指定可勾选项目的最小、最大值。</p>\n',
'<p>在 <code>checkbox-group</code> 上可通过 <code>min</code> 、 <code>max</code> 属性指定可勾选项目的最小、最大值。</p>',
'en-US':
'<p>On the <code>checkbox-group</code> , the <code>min</code> and <code>max</code> attributes can be used to specify the minimum and maximum values of the options that can be selected. </p>\n'
'<p>On the <code>checkbox-group</code> , the <code>min</code> and <code>max</code> attributes can be used to specify the minimum and maximum values of the options that can be selected. </p>'
},
'codeFiles': ['min-max.vue']
},
@ -88,9 +81,9 @@ export default {
'name': { 'zh-CN': '是否默认勾选', 'en-US': 'Default selected' },
'desc': {
'zh-CN':
'<p> <code>check-group</code> 上绑定的v-model可以配置默认选中， <code>checked</code> 同样可以配置默认选中。</p>\n',
'<p> <code>checkbox-group</code> 上绑定的 <code>v-model</code> 可以配置默认选中， <code>checked</code> 同样可以配置默认选中。</p>',
'en-US':
'<p>The v-model bound on <code>check group</code> can be configured with default selection, and <code>checked</code> can also be configured with default selection.</p>\n'
'<p>The v-model bound on <code>check group</code> can be configured with default selection, and <code>checked</code> can also be configured with default selection.</p>'
},
'codeFiles': ['checked.vue']
},
@ -99,9 +92,9 @@ export default {
'name': { 'zh-CN': '垂直布局', 'en-US': 'vertical layout' },
'desc': {
'zh-CN':
'<p>在 <code>checkbox-group</code> 元素上设置 <code>vertical</code> 为 true，则其管理的 <code>checkbox-button</code> 或 <code>checkbox</code> 将展示为垂直布局。</p>\n',
'<p>在 <code>checkbox-group</code> 元素上设置 <code>vertical</code> 为 true，则其管理的 <code>checkbox-button</code> 或 <code>checkbox</code> 将展示为垂直布局。</p>',
'en-US':
'<p>Set <code>vertical</code> to true on the <code>checkbox-group</code> element, The <code>checkbox-button</code> or <code>checkbox</code> managed by it is displayed as a vertical layout. </p>\n'
'<p>Set <code>vertical</code> to true on the <code>checkbox-group</code> element, The <code>checkbox-button</code> or <code>checkbox</code> managed by it is displayed as a vertical layout. </p>'
},
'codeFiles': ['vertical-checkbox.vue']
},
@ -110,9 +103,9 @@ export default {
'name': { 'zh-CN': '带边框复选框', 'en-US': 'Checkbox border' },
'desc': {
'zh-CN':
'<p> <code>checkbox</code> 上配置 <code>border</code> ，可显示边框。若复选框后的描述文本超出时，可以通过 Tooltip 组件增加提示信息，鼠标悬停时可提示所有内容。</p>\n',
'<p> <code>checkbox</code> 上配置 <code>border</code> ，可显示边框。若复选框后的描述文本超出时，可以通过 <code>tooltip</code> 组件增加提示信息，鼠标悬停时可提示所有内容。</p>',
'en-US':
'<p>Configure <code>border</code> on <code>checkbox</code> to display borders. If the description text after the check box exceeds, a prompt message can be added through the Tooltip component, and all content can be prompted when the mouse hovers.</p>\n'
'<p>Configure <code>border</code> on <code>checkbox</code> to display borders. If the description text after the check box exceeds, a prompt message can be added through the Tooltip component, and all content can be prompted when the mouse hovers.</p>'
},
'codeFiles': ['border.vue']
},
@ -120,9 +113,9 @@ export default {
'demoId': 'text',
'name': { 'zh-CN': '状态对应的值', 'en-US': 'Text' },
'desc': {
'zh-CN': '<p>通过 <code>true-label</code> 设置选中的值， <code>false-label</code> 设置未选中的值。</p>\n',
'zh-CN': '<p>通过 <code>true-label</code> 设置选中的值， <code>false-label</code> 设置未选中的值。</p>',
'en-US':
'<p>Use <code>true-label</code> to set the selected value, and <code>false-label</code> to set the unselected value. </p>\n'
'<p>Use <code>true-label</code> to set the selected value, and <code>false-label</code> to set the unselected value. </p>'
},
'codeFiles': ['text.vue']
},
@ -131,18 +124,29 @@ export default {
'name': { 'zh-CN': '尺寸', 'en-US': 'Dimension' },
'desc': {
'zh-CN':
'<p>当复选框为按钮形式时， <code>size</code> 属性可以设置尺寸，可选项有 <code>medium、small、mini</code> 不设置则为默认样式。</p>',
'<p>当复选框为按钮形式时， <code>size</code> 属性可以设置尺寸，可选项有 <code>medium</code> 、<code>small</code> 、<code>mini</code>，不设置则为默认样式。</p>',
'en-US':
'<p>When the check box is a button, you can set the size of the button through the <code>size</code> attribute. The options are medium, small, and mini. \n\n Setting the <code>disabled</code> property on <code>checkbox-button</code> will disable a check button. If the <code>disabled</code> attribute is configured on the <code>checkbox-group</code> tab, all check buttons are disabled. </p>\n'
'<p>When the check box is a button, you can set the size of the button through the <code>size</code> attribute. The options are medium, small, and mini. \n\n Setting the <code>disabled</code> property on <code>checkbox-button</code> will disable a check button. If the <code>disabled</code> attribute is configured on the <code>checkbox-group</code> tab, all check buttons are disabled. </p>'
},
'codeFiles': ['size.vue']
},
{
'demoId': 'custom-color',
'name': { 'zh-CN': '自定义颜色', 'en-US': 'Custom color' },
'desc': {
'zh-CN':
'<p>通过 <code>fill</code> 自定义选中时背景和边框颜色，通过 <code>text-color</code> 自定义选中时的文本颜色。</p>',
'en-US':
'<p>Customize the background and border color when selected through<code>fill</code>, and customize the text color when selected through<code>text color</code>.</p>'
},
'codeFiles': ['custom-color.vue']
},
{
'demoId': 'checkbox-slot',
'name': { 'zh-CN': '默认插槽', 'en-US': 'Slot' },
'desc': {
'zh-CN': '<p>通过 <code>default slot</code> 自定义文本内容。</p>\n',
'en-US': '<p>Customize text content through <code>default slot</code> .</p>\n'
'zh-CN': '<p>通过 <code>default slot</code> 自定义文本内容。</p>',
'en-US': '<p>Customize text content through <code>default slot</code> .</p>'
},
'codeFiles': ['checkbox-slot.vue']
},
@ -150,8 +154,8 @@ export default {
'demoId': 'checkbox-button-multiple',
'name': { 'zh-CN': '多行按钮', 'en-US': 'Checkbox Button Multiple' },
'desc': {
'zh-CN': '<p>多行按钮组，超出最大宽度后，换行显示。</p>\n',
'en-US': '<p>Multi line button group, displayed as a new line after exceeding the maximum width.</p>\n'
'zh-CN': '<p>多行按钮组，超出最大宽度后，换行显示。</p>',
'en-US': '<p>Multi line button group, displayed as a new line after exceeding the maximum width.</p>'
},
'codeFiles': ['checkbox-button-multiple.vue']
},
@ -159,11 +163,20 @@ export default {
'demoId': 'dynamic-create-checkbox',
'name': { 'zh-CN': '动态生成复选框组', 'en-US': 'Dynamic generate check box groups' },
'desc': {
'zh-CN': '<p>复选框组所需数据可通过请求服务从后台取得，然后动态生成。</p>\n',
'zh-CN': '<p>复选框组所需数据可通过请求服务从后台取得，然后动态生成。</p>',
'en-US':
'<p>The data required by the check box group can be obtained from the background through the request service and then dynamically generated. </p>\n'
'<p>The data required by the check box group can be obtained from the background through the request service and then dynamically generated. </p>'
},
'codeFiles': ['dynamic-create-checkbox.vue']
},
{
'demoId': 'checkbox-events',
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
'desc': {
'zh-CN': '<p>勾选值改变后将触发 <code>change</code> 事件。</p>',
'en-US': '<p>The <code>change</code> event is triggered when the value of the check box is changed. </p>'
},
'codeFiles': ['checkbox-events.vue']
}
],
apis: [
@ -204,7 +217,7 @@ export default {
{
'name': 'false-label',
'type': 'string | number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '没有选中时的值',
'en-US': 'Value when no option is selected'
@ -224,9 +237,9 @@ export default {
{
'name': 'label',
'type': 'string | number | boolean',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）',
'zh-CN': '选中状态的值（只有在 checkbox-group 中或者绑定对象类型为 array 时有效）',
'en-US':
'Selected value (This parameter is valid only when checkbox-group or the bound object type is array)'
},
@ -235,7 +248,7 @@ export default {
{
'name': 'modelValue / v-model',
'type': 'string | number | boolean',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '绑定值',
'en-US': 'Bound Value'
@ -245,7 +258,7 @@ export default {
{
'name': 'name',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '原生 name 属性',
'en-US': 'Native name attribute'
@ -254,8 +267,8 @@ export default {
},
{
'name': 'size',
'type': 'medium | small | mini',
'defaultValue': '',
'type': "'medium' | 'small' | 'mini'",
'defaultValue': '--',
'desc': {
'zh-CN': 'checkbox 的尺寸，仅在 border 为真时有效',
'en-US': 'Checkbox size. This parameter is valid only when border is set to true'
@ -265,7 +278,7 @@ export default {
{
'name': 'text',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '复选框显示的文本',
'en-US': 'Text displayed in the check box'
@ -275,7 +288,7 @@ export default {
{
'name': 'true-label',
'type': 'string | number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '选中时的值',
'en-US': 'Value when selected'
@ -287,7 +300,7 @@ export default {
{
'name': 'change',
'type': '(value: string | number | boolean) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '当绑定值变化时触发的事件',
'en-US': 'This event is triggered when the binding value changes'
@ -299,7 +312,7 @@ export default {
{
'name': 'default',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': 'checkbox的内容',
'en-US': 'Checkbox content'
@ -325,7 +338,7 @@ export default {
{
'name': 'fill',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '按钮形式的 checkbox 激活时的填充色和边框色',
'en-US': 'Fill color and border color when the checkbox in button mode is activated'
@ -335,7 +348,7 @@ export default {
{
'name': 'max',
'type': 'number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '可被勾选的 checkbox 的最大数量',
'en-US': 'Maximum number of checkboxes that can be selected'
@ -345,7 +358,7 @@ export default {
{
'name': 'min',
'type': 'number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '可被勾选的 checkbox 的最小数量',
'en-US': 'Minimum number of checkboxes that can be selected'
@ -355,7 +368,7 @@ export default {
{
'name': 'modelValue / v-model',
'type': 'string[] | number[]',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '绑定值',
'en-US': 'Bound Value'
@ -366,17 +379,17 @@ export default {
'name': 'options',
'type': 'ICheckboxGroupOptions[]',
'typeAnchorName': 'ICheckboxGroupOptions',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': 'checkbox组件列表',
'zh-CN': 'checkbox-group 子项配置列表',
'en-US': 'Checkbox component list'
},
'demoId': 'group-options'
},
{
'name': 'size',
'type': 'medium | small | mini',
'defaultValue': '',
'type': "'medium' | 'small' | 'mini'",
'defaultValue': '--',
'desc': {
'zh-CN': '多选框组尺寸，仅对按钮形式的 checkbox 或带有边框的 checkbox 有效',
'en-US':
@ -387,20 +400,20 @@ export default {
{
'name': 'text-color',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '按钮形式的 checkbox 激活时的文本颜色',
'en-US': 'Text color when the checkbox in button mode is activated'
},
'demoId': 'vertical-checkbox'
'demoId': 'custom-color'
},
{
'name': 'type',
'type': 'button | checkbox',
'defaultValue': 'checkbox',
'type': "'button' | 'checkbox'",
'defaultValue': "'checkbox'",
'desc': {
'zh-CN': ' checkbox组件类型，需配和options使用（button/checkbox）',
'en-US': 'Checkbox component type (button/checkbox)'
'zh-CN': ' 复选框组子项组件类型，需配合 options 属性使用',
'en-US': 'Checkbox component type'
},
'demoId': 'group-options'
},
@ -409,9 +422,8 @@ export default {
'type': 'boolean',
'defaultValue': 'false',
'desc': {
'zh-CN': '设置组件排列方式;设置复选框是否垂直排列;该属性的可选值为 true / false',
'en-US':
'Set the component arrangement mode. Sets whether the check boxes are arranged vertically. The value of this attribute can be true or false'
'zh-CN': '设置组件排列方式，设置复选框是否垂直排列',
'en-US': 'Set the component arrangement mode. Sets whether the check boxes are arranged vertically'
},
'demoId': 'vertical-checkbox'
}
@ -420,9 +432,9 @@ export default {
{
'name': 'default',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': 'checkbox选项组',
'zh-CN': 'checkbox-group 选项组',
'en-US': 'Checkbox Option Group'
},
'demoId': 'checkbox-group'
@ -431,8 +443,8 @@ export default {
'events': [
{
'name': 'change',
'type': '(value: string[] | number[]) => void',
'defaultValue': '',
'type': '(value: string[] |number[]) => void',
'defaultValue': '--',
'desc': {
'zh-CN': '当绑定值变化时触发的事件',
'en-US': 'This event is triggered when the binding value changes.'
@ -450,7 +462,7 @@ export default {
'type': 'boolean',
'defaultValue': 'false',
'desc': {
'zh-CN': '当前是否勾选',
'zh-CN': '是否默认勾选',
'en-US': 'Currently selected'
},
'demoId': 'checked'
@ -469,7 +481,7 @@ export default {
'name': 'events',
'type': 'ICheckboxGroupOptions.events',
'typeAnchorName': 'ICheckboxGroupOptions',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '原生事件',
'en-US': 'Native event'
@ -479,7 +491,7 @@ export default {
{
'name': 'false-label',
'type': 'string | number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '没有选中时的值',
'en-US': 'Value when no option is selected'
@ -489,9 +501,9 @@ export default {
{
'name': 'label',
'type': 'string | number | boolean',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）;该属性的可选值为 medium-',
'zh-CN': '选中状态的值（只有在 checkbox-group 中或者绑定对象类型为array时有效）',
'en-US':
'Value in the selected state (This parameter is valid only when checkbox-group or the bound object type is array.) The optional value of this attribute is medium-'
},
@ -500,7 +512,7 @@ export default {
{
'name': 'modelValue / v-model',
'type': 'string | number | boolean',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '绑定值',
'en-US': 'Bound Value'
@ -510,7 +522,7 @@ export default {
{
'name': 'name',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '原生 name 属性',
'en-US': 'Native name attribute'
@ -520,7 +532,7 @@ export default {
{
'name': 'text',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '复选框文本',
'en-US': 'Text'
@ -530,7 +542,7 @@ export default {
{
'name': 'true-label',
'type': 'string | number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '选中时的值',
'en-US': 'Value when selected'
@ -542,9 +554,9 @@ export default {
{
'name': 'default',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': 'checkbox-button的内容',
'zh-CN': 'checkbox-button 的内容',
'en-US': 'Checkbox-button content'
},
'demoId': 'description'

29
examples/sites/demos/pc/app/form/display-only-composition-api.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="demo-form">
<div style="margin-bottom: 12px">表单是否只展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
<div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
<tiny-form :inline="inline" label-position="right" :display-only="displayOnly">
<tiny-form-item label="input">
<tiny-form-item label="超长文字">
<tiny-input v-model="formData.input"></tiny-input>
</tiny-form-item>
<tiny-form-item label="radio">
@ -40,9 +40,6 @@
<tiny-form-item label="开关">
<tiny-switch></tiny-switch>
</tiny-form-item>
<tiny-form-item label="评分">
<tiny-rate v-model="formData.rate1" show-text></tiny-rate>
</tiny-form-item>
<tiny-form-item label="自动完成">
<tiny-autocomplete
v-model="formData.autocompleteValue"
@ -70,7 +67,6 @@ import {
Checkbox as TinyCheckbox,
CheckboxGroup as TinyCheckboxGroup,
Switch as TinySwitch,
Rate as TinyRate,
Autocomplete as TinyAutocomplete,
Cascader as TinyCascader,
Select as TinySelect,
@ -168,7 +164,7 @@ const formData = ref({
person: 'test1',
user: '655783272594485',
monthrange: ['2022-01', '2023-01'],
quantity: '1',
quantity: 1,
textareaValue:
'大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
checked: true,
@ -204,20 +200,11 @@ function createFilter(queryString) {
<style scoped>
.demo-form {
padding-left: 50px;
width: 380px;
}
.demo-form-btns {
margin-bottom: 70px;
}
.demo-form .tiny-input,
.demo-form .tiny-select,
.demo-form .tiny-textarea,
.demo-form .tiny-numeric,
.demo-form .tiny-dept,
.demo-form .tiny-hrapprover,
.demo-form .tiny-user,
.demo-form .tiny-amount,
.demo-form .tiny-area .tiny-select {
width: 274px !important;
.title {
margin-bottom: 30px;
margin-left: 16px;
font-size: 14px;
}
</style>

15
examples/sites/demos/pc/app/form/display-only.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="demo-form">
<div style="margin-bottom: 12px">表单是否只展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
<div class="title">表单是否仅展示：<tiny-switch v-model="displayOnly"></tiny-switch></div>
<tiny-form :inline="inline" label-position="right" :display-only="displayOnly">
<tiny-form-item label="input">
<tiny-form-item label="超长文字">
<tiny-input v-model="formData.input"></tiny-input>
</tiny-form-item>
<tiny-form-item label="radio">
@ -40,9 +40,6 @@
<tiny-form-item label="开关">
<tiny-switch></tiny-switch>
</tiny-form-item>
<tiny-form-item label="评分">
<tiny-rate v-model="formData.rate1" show-text></tiny-rate>
</tiny-form-item>
<tiny-form-item label="自动完成">
<tiny-autocomplete
v-model="formData.autocompleteValue"
@ -91,7 +88,6 @@ export default {
TinyCheckbox: Checkbox,
TinyCheckboxGroup: CheckboxGroup,
TinySwitch: Switch,
TinyRate: Rate,
TinyAutocomplete: Autocomplete,
TinyCascader: Cascader
},
@ -187,7 +183,7 @@ export default {
person: 'test1',
user: '655783272594485',
monthrange: ['2022-01', '2023-01'],
quantity: '1',
quantity: 1,
textareaValue:
'大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦大苏打撒旦',
checked: true,
@ -229,4 +225,9 @@ export default {
.demo-form {
width: 380px;
}
.title {
margin-bottom: 30px;
margin-left: 16px;
font-size: 14px;
}
</style>

20
examples/sites/demos/pc/app/form/form-disabled-composition-api.vue
View File

@ -1,8 +1,6 @@
<template>
<div style="width: 480px">
<h3 style="margin-bottom: 16px; margin-left: 100px">
是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch>
</h3>
<div class="demo-form">
<h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
<tiny-form :disabled="formDisabled" label-width="150px">
<tiny-form-item label="Input">
<tiny-input v-model="createData.user"></tiny-input>
@ -119,7 +117,7 @@ import {
const createData = reactive({
checked: false,
checked2: true,
quantity: '',
quantity: 0,
sw: false,
sex: '1',
datepicker: '',
@ -262,3 +260,15 @@ function createFilter(queryString) {
return (restaurant) => restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
}
</script>
<style scoped>
.demo-form {
width: 480px;
}
.title {
margin-bottom: 30px;
margin-left: 100px;
font-size: 14px;
}
</style>

19
examples/sites/demos/pc/app/form/form-disabled.vue
View File

@ -1,8 +1,6 @@
<template>
<div style="width: 480px">
<h3 style="margin-bottom: 16px; margin-left: 100px">
是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch>
</h3>
<div class="demo-form">
<h3 class="title">是否禁用表单：<tiny-switch v-model="formDisabled"></tiny-switch></h3>
<tiny-form :disabled="formDisabled" label-width="150px">
<tiny-form-item label="Input">
<tiny-input v-model="createData.user"></tiny-input>
@ -145,7 +143,7 @@ export default {
createData: {
checked: false,
checked2: true,
quantity: '',
quantity: 0,
sw: false,
sex: '1',
datepicker: '',
@ -291,3 +289,14 @@ export default {
}
}
</script>
<style scoped>
.demo-form {
width: 480px;
}
.title {
margin-bottom: 30px;
margin-left: 100px;
font-size: 14px;
}
</style>

2
examples/sites/demos/pc/app/form/form-in-row-composition-api.vue
View File

@ -15,7 +15,7 @@ import { reactive } from 'vue'
import { Form as TinyForm, FormItem as TinyFormItem, Numeric as TinyNumeric, Radio as TinyRadio } from '@opentiny/vue'
const formData = reactive({
quantity: '',
quantity: 0,
sex: ''
})
</script>

2
examples/sites/demos/pc/app/form/form-in-row.vue
View File

@ -23,7 +23,7 @@ export default {
data() {
return {
formData: {
quantity: '',
quantity: 0,
sex: ''
}
}

7
examples/sites/demos/pc/app/form/form-validation-composition-api.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="demo-form">
<div class="mb-12">
<div class="title">
<div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
</div>
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
@ -138,7 +138,8 @@ function clearFormValid() {
.demo-form {
width: 380px;
}
.mb-12 {
margin-bottom: 12px;
.title {
margin-bottom: 20px;
font-size: 14px;
}
</style>

7
examples/sites/demos/pc/app/form/form-validation.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="demo-form">
<div class="mb-12">
<div class="title">
<div>validate用法：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
</div>
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" label-width="100px">
@ -149,7 +149,8 @@ export default {
.demo-form {
width: 380px;
}
.mb-12 {
margin-bottom: 12px;
.title {
margin-bottom: 20px;
font-size: 14px;
}
</style>

95
examples/sites/demos/pc/app/form/label-align-composition-api.vue
View File

@ -1,118 +1,41 @@
<template>
<div class="demo-form">
<div style="margin-bottom: 16px">
<div style="margin-bottom: 6px">是否对齐：<tiny-switch v-model="isLabelAlign"></tiny-switch></div>
<div>
标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
</div>
</div>
<tiny-form
ref="ruleFormRef"
:model="createData"
:rules="rules"
:validate-on-rule-change="isvalidate"
:label-align="isLabelAlign"
:label-position="labelPositionValue"
label-width="100px"
@validate="validate"
>
<tiny-form-item label="用户名" prop="username">
<div class="title">标签位置： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
<tiny-form ref="ruleFormRef" :model="createData" label-position="left" :label-align="isLabelAlign">
<tiny-form-item label="用户名" prop="username" required>
<tiny-input v-model="createData.username"></tiny-input>
</tiny-form-item>
<tiny-form-item label="密码" prop="password">
<tiny-form-item label="密码" prop="password" required>
<tiny-input v-model="createData.password" type="password" show-password></tiny-input>
</tiny-form-item>
<tiny-form-item label="密钥" prop="password2">
<tiny-input v-model="createData.password2" type="password" show-password></tiny-input>
</tiny-form-item>
<tiny-form-item class="btn-form-item">
<tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
<tiny-button type="primary" @click="removePass"> 清除密码校验 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import {
Form as TinyForm,
FormItem as TinyFormItem,
Input as TinyInput,
Button as TinyButton,
Modal,
ButtonGroup as TinyButtonGroup,
Switch as TinySwitch
} from '@opentiny/vue'
import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, Switch as TinySwitch } from '@opentiny/vue'
const ruleFormRef = ref()
let validatePass = (rule, value, callback) => {
if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(value)) {
callback(new Error('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字'))
} else {
callback()
}
}
const isLabelAlign = ref(true)
const labelPositionList = ref([
{ text: 'left', value: 'left' },
{ text: 'top', value: 'top' },
{ text: 'right', value: 'right' }
])
const labelPositionValue = ref('left')
const createData = reactive({
username: '',
password: '',
password2: ''
})
const isvalidate = ref(true)
const rules = ref({
username: [
{ required: true, message: '必填', trigger: 'blur' },
{ min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
],
password: [
{ required: true, message: '必填', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
]
})
function validate(val) {
Modal.message({
message: `表单项被校验后触发的事件,所校验字段为:${val}`,
status: 'info'
})
}
function handleSubmit() {
ruleFormRef.value.validate((valid) => {
if (valid) {
Modal.alert('校验通过，开始注册！')
} else {
Modal.message({ message: '校验不通过！！', status: 'warning' })
return false
}
})
}
function removePass() {
isvalidate.value = false // 通过配置validate-on-rule-change属性,设置是否在rules属性改变后立即触发一次验证
rules.value = {
username: [
{ required: true, message: '必填', trigger: 'blur' },
{ min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
]
}
}
</script>
<style scoped>
.demo-form {
width: 380px;
}
.btn-form-item {
padding-top: 8px;
.title {
margin-bottom: 20px;
font-size: 14px;
}
</style>

87
examples/sites/demos/pc/app/form/label-align.vue
View File

@ -1,109 +1,37 @@
<template>
<div class="demo-form">
<div style="margin-bottom: 16px">
<div style="margin-bottom: 6px">是否对齐：<tiny-switch v-model="isLabelAlign"></tiny-switch></div>
<div>
标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
</div>
</div>
<tiny-form
ref="ruleFormRef"
:model="createData"
:rules="rules"
:validate-on-rule-change="isvalidate"
:label-align="isLabelAlign"
:label-position="labelPositionValue"
label-width="100px"
@validate="validate"
>
<tiny-form-item label="用户名" prop="username">
<div class="title">标签位置： <tiny-switch v-model="isLabelAlign"></tiny-switch></div>
<tiny-form ref="ruleFormRef" :model="createData" label-position="left" :label-align="isLabelAlign">
<tiny-form-item label="用户名" prop="username" required>
<tiny-input v-model="createData.username"></tiny-input>
</tiny-form-item>
<tiny-form-item label="密码" prop="password">
<tiny-form-item label="密码" prop="password" required>
<tiny-input v-model="createData.password" type="password" show-password></tiny-input>
</tiny-form-item>
<tiny-form-item label="密钥" prop="password2">
<tiny-input v-model="createData.password2" type="password" show-password></tiny-input>
</tiny-form-item>
<tiny-form-item class="btn-form-item">
<tiny-button type="primary" @click="handleSubmit()"> 注册 </tiny-button>
<tiny-button type="primary" @click="removePass"> 清除密码校验 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
</template>
<script>
import { Form, FormItem, Input, Button, Modal, ButtonGroup, Switch } from '@opentiny/vue'
import { Form, FormItem, Input, Switch } from '@opentiny/vue'
export default {
components: {
TinyForm: Form,
TinyFormItem: FormItem,
TinyInput: Input,
TinyButton: Button,
TinyButtonGroup: ButtonGroup,
TinySwitch: Switch
},
data() {
let validatePass = (rule, value, callback) => {
if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/.test(value)) {
callback(new Error('最少八个字符，至少包含一个大写字母，一个小写字母和一个数字'))
} else {
callback()
}
}
return {
isLabelAlign: true,
labelPositionList: [
{ text: 'left', value: 'left' },
{ text: 'top', value: 'top' },
{ text: 'right', value: 'right' }
],
labelPositionValue: 'left',
createData: {
username: '',
password: '',
password2: ''
},
isvalidate: true,
rules: {
username: [
{ required: true, message: '必填', trigger: 'blur' },
{ min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
],
password: [
{ required: true, message: '必填', trigger: 'blur' },
{ validator: validatePass, trigger: 'blur' }
]
}
}
},
methods: {
validate(val) {
Modal.message({
message: `表单项被校验后触发的事件,所校验字段为:${val}`,
status: 'info'
})
},
handleSubmit() {
this.$refs.ruleFormRef.validate((valid) => {
if (valid) {
Modal.alert('校验通过，开始注册！')
} else {
Modal.message({ message: '校验不通过！！', status: 'warning' })
return false
}
})
},
removePass() {
this.isvalidate = false // 通过配置validate-on-rule-change属性,设置是否在rules属性改变后立即触发一次验证
this.rules = {
username: [
{ required: true, message: '必填', trigger: 'blur' },
{ min: 2, max: 11, message: '长度必须不小于2', trigger: 'change' }
]
}
}
}
@ -114,7 +42,8 @@ export default {
.demo-form {
width: 380px;
}
.btn-form-item {
padding-top: 8px;
.title {
margin-bottom: 20px;
font-size: 14px;
}
</style>

53
examples/sites/demos/pc/app/form/label-position-composition-api.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="demo-form">
<div class="title">
标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
</div>
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
<tiny-form-item label="用户名" prop="username">
<tiny-input v-model="createData.username"></tiny-input>
</tiny-form-item>
<tiny-form-item label="密码" prop="password">
<tiny-input v-model="createData.password" type="password" show-password></tiny-input>
</tiny-form-item>
<tiny-form-item label="密钥" prop="password2">
<tiny-input v-model="createData.password2" type="password" show-password></tiny-input>
</tiny-form-item>
</tiny-form>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import {
Form as TinyForm,
FormItem as TinyFormItem,
Input as TinyInput,
ButtonGroup as TinyButtonGroup
} from '@opentiny/vue'
const ruleFormRef = ref()
const labelPositionList = ref([
{ text: 'left', value: 'left' },
{ text: 'right', value: 'right' },
{ text: 'top', value: 'top' }
])
const labelPositionValue = ref('left')
const createData = reactive({
username: '',
password: '',
password2: ''
})
</script>
<style scoped>
.demo-form {
width: 380px;
}
.title {
margin-bottom: 20px;
font-size: 14px;
}
</style>

56
examples/sites/demos/pc/app/form/label-position.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<div class="demo-form">
<div class="title">
标签位置： <tiny-button-group :data="labelPositionList" v-model="labelPositionValue"></tiny-button-group>
</div>
<tiny-form ref="ruleFormRef" :model="createData" :label-position="labelPositionValue">
<tiny-form-item label="用户名" prop="username">
<tiny-input v-model="createData.username"></tiny-input>
</tiny-form-item>
<tiny-form-item label="密码" prop="password">
<tiny-input v-model="createData.password" type="password" show-password></tiny-input>
</tiny-form-item>
<tiny-form-item label="密钥" prop="password2">
<tiny-input v-model="createData.password2" type="password" show-password></tiny-input>
</tiny-form-item>
</tiny-form>
</div>
</template>
<script>
import { Form, FormItem, Input, ButtonGroup } from '@opentiny/vue'
export default {
components: {
TinyForm: Form,
TinyFormItem: FormItem,
TinyInput: Input,
TinyButtonGroup: ButtonGroup
},
data() {
return {
labelPositionList: [
{ text: 'left', value: 'left' },
{ text: 'right', value: 'right' },
{ text: 'top', value: 'top' }
],
labelPositionValue: 'left',
createData: {
username: '',
password: '',
password2: ''
}
}
}
}
</script>
<style scoped>
.demo-form {
width: 380px;
}
.title {
margin-bottom: 20px;
font-size: 14px;
}
</style>

85
examples/sites/demos/pc/app/form/message-type-composition-api.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<div class="demo-form">
<div class="title">
<div>错误文本类型：<tiny-button-group :data="messageTypeList" v-model="messageType"></tiny-button-group></div>
</div>
<tiny-form
ref="ruleFormRef"
:model="createData"
:rules="rules"
label-width="60px"
validate-type="text"
:message-type="messageType"
>
<tiny-form-item label="必填" prop="users">
<tiny-input v-model="createData.users"></tiny-input>
</tiny-form-item>
<tiny-form-item label="日期" prop="datepicker">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="邮件" prop="email">
<tiny-input v-model="createData.email"></tiny-input>
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" @click="handleSubmit"> 提交 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
</template>
<script setup>
import { ref } from 'vue'
import {
Form as TinyForm,
FormItem as TinyFormItem,
Input as TinyInput,
DatePicker as TinyDatePicker,
Button as TinyButton,
ButtonGroup as TinyButtonGroup
} from '@opentiny/vue'
const ruleFormRef = ref()
const createData = ref({
users: '',
email: '',
datepicker: ''
})
const messageType = ref('')
const messageTypeList = ref([
{ text: '默认', value: '' },
{ text: '行内', value: 'inline' },
{ text: '块级', value: 'block' }
])
const rules = ref({
users: { required: true, message: '必填', trigger: 'blur' },
datepicker: { required: true, type: 'date', message: '必填' },
email: { required: true, type: 'email' }
})
function handleSubmit() {
ruleFormRef.value.validate((valid) => {})
}
</script>
<style scoped>
.demo-form {
width: 380px;
}
.demo-form :deep(.tiny-date-container) {
width: 280px;
display: inline-block;
}
.demo-form :deep(.tiny-input) {
width: 280px;
}
.title {
margin-bottom: 16px;
font-size: 14px;
}
</style>

90
examples/sites/demos/pc/app/form/message-type.vue Normal file
View File

@ -0,0 +1,90 @@
<template>
<div class="demo-form">
<div class="title">
<div>错误文本类型：<tiny-button-group :data="messageTypeList" v-model="messageType"></tiny-button-group></div>
</div>
<tiny-form
ref="ruleFormRef"
:model="createData"
:rules="rules"
label-width="60px"
validate-type="text"
:message-type="messageType"
>
<tiny-form-item label="必填" prop="users">
<tiny-input v-model="createData.users"></tiny-input>
</tiny-form-item>
<tiny-form-item label="日期" prop="datepicker">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="邮件" prop="email">
<tiny-input v-model="createData.email"></tiny-input>
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" @click="handleSubmit"> 提交 </tiny-button>
</tiny-form-item>
</tiny-form>
</div>
</template>
<script>
import { Form, FormItem, Input, DatePicker, Button, ButtonGroup } from '@opentiny/vue'
export default {
components: {
TinyForm: Form,
TinyFormItem: FormItem,
TinyInput: Input,
TinyDatePicker: DatePicker,
TinyButton: Button,
TinyButtonGroup: ButtonGroup
},
data() {
return {
createData: {
users: '',
email: '',
datepicker: ''
},
messageType: '',
messageTypeList: [
{ text: '默认', value: '' },
{ text: '行内', value: 'inline' },
{ text: '块级', value: 'block' }
],
rules: {
users: { required: true, message: '必填', trigger: 'blur' },
datepicker: { required: true, type: 'date', message: '必填' },
email: { required: true, type: 'email' }
}
}
},
methods: {
handleSubmit() {
this.$refs.ruleFormRef.validate((valid) => {})
}
}
}
</script>
<style scoped>
.demo-form {
width: 380px;
}
.demo-form :deep(.tiny-date-container) {
width: 280px;
display: inline-block;
}
.demo-form :deep(.tiny-input) {
width: 280px;
}
.title {
margin-bottom: 16px;
font-size: 14px;
}
</style>

2
examples/sites/demos/pc/app/form/overflow-title-composition-api.vue
View File

@ -27,7 +27,7 @@ import {
const formData = ref({
user: '',
quantity: '',
quantity: 0,
sex: ''
})
</script>

2
examples/sites/demos/pc/app/form/overflow-title.vue
View File

@ -30,7 +30,7 @@ export default {
return {
formData: {
user: '',
quantity: '',
quantity: 0,
sex: ''
}
}

6
examples/sites/demos/pc/app/form/size-composition-api.vue
View File

@ -47,13 +47,13 @@ import {
} from '@opentiny/vue'
const sizeList = ref([
{ text: 'mini', value: 'mini' },
{ text: 'medium', value: 'medium' },
{ text: 'small', value: 'small' },
{ text: 'medium', value: 'medium' }
{ text: 'mini', value: 'mini' }
])
const sizeValue = ref('mini')
const createData = reactive({
quantity: '',
quantity: 0,
sex: '1',
datepicker: '',
textarea: '',

6
examples/sites/demos/pc/app/form/size.vue
View File

@ -61,7 +61,7 @@ export default {
data() {
return {
createData: {
quantity: '',
quantity: 0,
sex: '1',
datepicker: '',
textarea: '',
@ -69,9 +69,9 @@ export default {
input: ''
},
sizeList: [
{ text: 'mini', value: 'mini' },
{ text: 'medium', value: 'medium' },
{ text: 'small', value: 'small' },
{ text: 'medium', value: 'medium' }
{ text: 'mini', value: 'mini' }
],
sizeValue: 'mini'
}

58
examples/sites/demos/pc/app/form/validate-type-composition-api.vue
View File

@ -1,32 +1,18 @@
<template>
<div class="demo-form-valid-text">
<div class="mb-12">
<div class="title">
<div>提示形式：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
<div>错误文本类型：<tiny-button-group :data="messageTypeList" v-model="messageType"></tiny-button-group></div>
</div>
<tiny-form
ref="ruleFormRef"
:model="createData"
:rules="rules"
label-width="100px"
:validate-type="validType"
:message-type="messageType"
>
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-type="validType">
<tiny-form-item label="必填" prop="users">
<tiny-input v-model="createData.users"></tiny-input>
</tiny-form-item>
<tiny-form-item label="日期" prop="datepicker">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="短输入框" prop="input">
<tiny-input v-model="createData.input" style="width: 180px"></tiny-input>
</tiny-form-item>
<tiny-form-item label="邮件" prop="email" validate-type="text">
<tiny-form-item label="邮件" prop="email" :validate-type="validType">
<tiny-input v-model="createData.email"></tiny-input>
</tiny-form-item>
<tiny-form-item label="文本">
<tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" @click="handleSubmit"> 提交 </tiny-button>
</tiny-form-item>
@ -35,7 +21,7 @@
</template>
<script setup>
import { ref, reactive } from 'vue'
import { ref } from 'vue'
import {
Form as TinyForm,
FormItem as TinyFormItem,
@ -47,35 +33,21 @@ import {
const ruleFormRef = ref()
const createData = reactive({
const createData = ref({
users: '',
input: '',
email: '',
datepicker: '',
textarea: ''
datepicker: ''
})
const rules = ref({
users: [
{ required: true, message: '必填', trigger: 'blur' },
{ min: 2, max: 11, message: '长度必须不小于2', trigger: 'blur' }
],
datepicker: { type: 'date' },
input: { required: true },
email: { required: true, type: 'email' }
})
const messageType = ref('block')
const validType = ref('text')
const messageTypeList = ref([
{ text: '默认', value: 'none' },
{ text: '行内', value: 'inline' },
{ text: '块级', value: 'block' }
])
const validTypeList = ref([
{ text: 'tip', value: 'tip' },
{ text: 'text', value: 'text' }
])
const rules = ref({
users: { required: true, message: '必填', trigger: 'blur' },
datepicker: { required: true, type: 'date' },
email: { required: true, type: 'email' }
})
function handleSubmit() {
ruleFormRef.value.validate((valid) => {})
@ -87,10 +59,8 @@ function handleSubmit() {
width: 380px;
}
.mb-12 {
margin-bottom: 12px;
}
.demo-form-valid-text .tiny-form-item {
margin-bottom: 20px;
.title {
margin-bottom: 16px;
font-size: 14px;
}
</style>

46
examples/sites/demos/pc/app/form/validate-type.vue
View File

@ -1,32 +1,18 @@
<template>
<div class="demo-form-valid-text">
<div class="mb-12">
<div class="title">
<div>提示形式：<tiny-button-group :data="validTypeList" v-model="validType"></tiny-button-group></div>
<div>错误文本类型：<tiny-button-group :data="messageTypeList" v-model="messageType"></tiny-button-group></div>
</div>
<tiny-form
ref="ruleFormRef"
:model="createData"
:rules="rules"
label-width="100px"
:validate-type="validType"
:message-type="messageType"
>
<tiny-form ref="ruleFormRef" :model="createData" :rules="rules" :validate-type="validType">
<tiny-form-item label="必填" prop="users">
<tiny-input v-model="createData.users"></tiny-input>
</tiny-form-item>
<tiny-form-item label="日期" prop="datepicker">
<tiny-date-picker v-model="createData.datepicker"></tiny-date-picker>
</tiny-form-item>
<tiny-form-item label="短输入框" prop="input">
<tiny-input v-model="createData.input" style="width: 180px"></tiny-input>
</tiny-form-item>
<tiny-form-item label="邮件" prop="email" validate-type="text">
<tiny-form-item label="邮件" prop="email" :validate-type="validType">
<tiny-input v-model="createData.email"></tiny-input>
</tiny-form-item>
<tiny-form-item label="文本">
<tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
</tiny-form-item>
<tiny-form-item>
<tiny-button type="primary" @click="handleSubmit"> 提交 </tiny-button>
</tiny-form-item>
@ -50,29 +36,17 @@ export default {
return {
createData: {
users: '',
input: '',
email: '',
datepicker: '',
textarea: ''
datepicker: ''
},
validType: 'text',
messageType: 'block',
validTypeList: [
{ text: 'tip', value: 'tip' },
{ text: 'text', value: 'text' }
],
messageTypeList: [
{ text: '默认', value: 'none' },
{ text: '行内', value: 'inline' },
{ text: '块级', value: 'block' }
],
rules: {
users: [
{ required: true, message: '必填', trigger: 'blur' },
{ min: 2, max: 11, message: '长度必须不小于2', trigger: 'blur' }
],
datepicker: { type: 'date' },
input: { required: true },
users: { required: true, message: '必填', trigger: 'blur' },
datepicker: { required: true, type: 'date' },
email: { required: true, type: 'email' }
}
}
@ -90,10 +64,8 @@ export default {
width: 380px;
}
.mb-12 {
margin-bottom: 12px;
}
.demo-form-valid-text .tiny-form-item {
margin-bottom: 20px;
.title {
margin-bottom: 16px;
font-size: 14px;
}
</style>

230
examples/sites/demos/pc/app/form/webdoc/form.js
View File

@ -7,9 +7,9 @@ export default {
name: { 'zh-CN': '常用表单', 'en-US': 'Common Form' },
desc: {
'zh-CN':
'<p>在 <code>Form</code> 组件中，每一个表单域由一个 <code>FormItem</code> 组件构成，表单域中可以放置各种类型的表单控件，包括 <code>Input</code> 、 <code>Select</code> 、 <code>Checkbox</code> 、 <code>Radio</code> 、 <code>Switch</code> 、 <code>DatePicker</code> 、 <code>TimePicker</code> 等。</p>',
'<p>在 <code>Form</code> 组件中，每一个表单域由一个 <code>form-item</code> 组件构成，表单域中可以放置各种类型的表单控件，包括 <code>Input</code> 、 <code>Select</code> 、 <code>Checkbox</code> 、 <code>Radio</code> 、 <code>Switch</code> 、 <code>DatePicker</code> 、 <code>TimePicker</code> 等。</p>',
'en-US':
'<p>In the <code>Form</code> component, each form field is composed of a <code>FormItem</code> component, and various types of form controls can be placed in the form field, including <code>Input</code> , <code>Select</code> , <code>Checkbox</code> , <code>Radio</code> , <code>Switch</code> , <code>DatePicker</code> , <code>TimePicker</code> , etc. </p>'
'<p>In the <code>Form</code> component, each form field is composed of a <code>form-item</code> component, and various types of form controls can be placed in the form field, including <code>Input</code> , <code>Select</code> , <code>Checkbox</code> , <code>Radio</code> , <code>Switch</code> , <code>DatePicker</code> , <code>TimePicker</code> , etc. </p>'
},
codeFiles: ['basic-usage.vue']
},
@ -24,20 +24,30 @@ export default {
},
codeFiles: ['form-in-row.vue']
},
{
demoId: 'label-position',
name: { 'zh-CN': '标签宽度与标签位置', 'en-US': 'Label width and position' },
desc: {
'zh-CN': '<p>通过 <code>label-width</code> 设置标签宽度，<code>label-position</code> 设置文本标签的位置。</p>',
'en-US':
'<p>Set the label width by <code>label width</code> , and set the position of the text label by <code>label position</code> .</p>'
},
codeFiles: ['label-position.vue']
},
{
demoId: 'label-align',
name: { 'zh-CN': '标签宽度与文本对齐', 'en-US': 'Text Alignment' },
name: { 'zh-CN': '必填星号文本对齐', 'en-US': 'Required asterisk alignment' },
desc: {
'zh-CN':
'<p>通过 <code>label-width</code> 设置标签宽度， <code>label-align</code> 设置是否文本对齐， <code>label-position</code> 设置文本标签的位置。</p>',
'<p>当 <code>label-position</code> 为 <code>left</code> 时， 通过 <code>label-align</code> 设置必填星号出现时标签文本是否对齐。</p>',
'en-US':
'<p>Set the label width by <code>label width</code> ,Set whether the text is aligned by <code>label align</code> , and set the position of the text label by <code>label position</code> .</p>'
'<p>When <code>label-position</code> is <code>left</code> , Set whether the label text is aligned when a mandatory asterisk appears by<code>label align</code>.</p>'
},
codeFiles: ['label-align.vue']
},
{
demoId: 'overflow-title',
name: { 'zh-CN': '标签超长显示 tip', 'en-US': 'Label too long display tip' },
name: { 'zh-CN': '标签超长显示提示', 'en-US': 'Label too long display tip' },
desc: {
'zh-CN':
'<p>通过 <code>overflow-title</code> 设置标签超长时鼠标移动到标签上可显示 <code>tooltip</code> 提示，若使用 <code>label</code> 插槽，需自行实现。</p>',
@ -50,7 +60,7 @@ export default {
demoId: 'form-validation',
name: { 'zh-CN': '表单校验、移除校验', 'en-US': 'Form Validation/Clear Validation' },
desc: {
'zh-CN': `<p>通过 <code>rules</code> 设置校验规则， <code>rules</code> 的详情见<a href="#IFormRules">IFormRules</a>
'zh-CN': `<p>通过 <code>rules</code> 设置校验规则， <code>rules</code> 的详情见 <a href="#IFormRules">IFormRules</a>
<br />
调用 <code>clearValidate</code> 方法移除表单项的校验结果。传入待移除的表单项的 <code>prop</code> 属性或者 <code>prop</code> 组成的数组，如不传则移除整个表单的校验结果。</p>`,
'en-US': `<p>Includes common verification rules such as mandatory fields, date, time, URL, and email. Use <code>trigger</code> to configure the mode of triggering the validation rule. If <code>change</code> is used, the validation is triggered when the value in the text box changes. If <code>blur</code> is used, the validation is triggered after the focus is lost.
@ -88,9 +98,9 @@ export default {
name: { 'zh-CN': '校验提示位置', 'en-US': 'Verification prompt position' },
desc: {
'zh-CN':
'<p>通过 <code>validate-position</code> 可自定义错误提示出现的位置，在 <code>Form</code> 组件上设置后，子组件 <code>FormItem</code> 会继承父组件设置。单独在 <code>FormItem</code> 组件上进行设置优先级高于在 <code>From</code> 上的设置。</p>',
'<p>通过 <code>validate-position</code> 可自定义错误提示出现的位置，在 <code>form</code> 组件上设置后，子组件 <code>form-item</code> 会继承父组件设置。单独在 <code>form-item</code> 组件上进行设置优先级高于在 <code>from</code> 上的设置。</p>',
'en-US':
'<p>You can use <code>validate-position</code> to customize the position where the error message appears. After this parameter is set on the <code>Form</code> component, the subcomponent <code>FormItem</code> inherits the setting of the parent component. The setting on the <code>FormItem</code> component takes precedence over the setting on the <code>From</code> component. </p>'
'<p>You can use <code>validate-position</code> to customize the position where the error message appears. After this parameter is set on the <code>form</code> component, the subcomponent <code>form-item</code> inherits the setting of the parent component. The setting on the <code>form-item</code> component takes precedence over the setting on the <code>From</code> component. </p>'
},
codeFiles: ['validation-position.vue']
},
@ -98,9 +108,8 @@ export default {
demoId: 'novalid-tip',
name: { 'zh-CN': '隐藏表单项校验提示', 'en-US': 'Verification prompt format' },
desc: {
'zh-CN': '<p>通过 <code>show-message</code> 设置是否显示校验提示框的tip内容提示。</p>',
'en-US':
'<p>You can use <code>validate-type</code> to set whether the verification prompt information is displayed in <code>text</code> or <code>tip</code> format. The default value is <code>tip</code> . You can also configure the verification prompt mode of a certain item on a certain <code>&lt;form-item&gt;</code> . </p>'
'zh-CN': '<p>通过 <code>show-message</code> 设置是否显示校错误提示信息。</p>',
'en-US': '<p>Set whether to display error correction prompts through<code>show message</code>. </p>'
},
codeFiles: ['novalid-tip.vue']
},
@ -109,12 +118,23 @@ export default {
name: { 'zh-CN': '校验提示的形式', 'en-US': 'Disable form' },
desc: {
'zh-CN':
'<p>通过 <code>validate-type</code> 设置校验提示信息是以 <code>text</code> 文本显示还是以 <code>tip</code> 提示框的形式显示，默认为 <code>tip</code> 。 <code>message-type</code> 设置文本显示时是否以行内形式展示校验信息。也可直接配置在某一个 <code>form-item</code> 上控制某一项的校验提示形式。</p>',
'<p>通过 <code>validate-type</code> 设置校验提示信息是以 <code>text</code> 文本显示还是以 <code>tip</code> 提示框的形式显示，也可直接配置在某一个 <code>form-item</code> 上控制某一项的校验提示形式。</p>',
'en-US':
'<p>You can set whether to disable the form by <code>disabled</code> . The default value is <code>false</code> . </p>'
'<p>By setting whether the verification prompt information is displayed as<code>text</code>text or as a<code>tip</code>prompt box, it can also be directly configured to control the verification prompt form of a certain item on a certain<code>form item</code>. </p>'
},
codeFiles: ['validate-type.vue']
},
{
demoId: 'message-type',
name: { 'zh-CN': '文本类型错误提示位置', 'en-US': 'Text type error prompt location' },
desc: {
'zh-CN':
'<p>当 <code>validate-type</code> 为 <code>text</code> 时，通过 <code>message-type</code> 设置文本类型错误提示位置，不设置则为 <code>absolute</code> 定位。</p>',
'en-US':
'<p>当 <code>验证类型</code>为 <code>text</code>时，通过 <code>消息类型</code>设置文本类型错误提示位置，不设置则为 <code>绝对</code>定位。</p>'
},
codeFiles: ['message-type.vue']
},
{
demoId: 'validate-debounce',
name: { 'zh-CN': '校验防抖处理', 'en-US': 'Validate debounce' },
@ -131,7 +151,7 @@ export default {
name: { 'zh-CN': '表单尺寸', 'en-US': 'Remove the verification result of a form item.' },
desc: {
'zh-CN':
'<p>通过 <code>size</code> 设置表单内组件尺寸。注意：表单中设置的size优先级高于数据录入组件( <code>input、select</code> 等)设置的size。</p>',
'<p>通过 <code>size</code> 设置表单内组件尺寸。注意：表单中设置的size优先级高于数据录入组件（ <code>input</code> 、<code>select</code> 等）设置的 <code>size</code> 。</p>',
'en-US':
'<p>Invoke the <code>clearValidate</code> method to remove the verification result of a form item. Transfer the <code>prop</code> attribute of the form item to be removed or the array consisting of <code>prop</code> . If this parameter is not transferred, the verification result of the entire form is removed. </p>'
},
@ -158,9 +178,9 @@ export default {
},
{
demoId: 'display-only',
name: { 'zh-CN': '表单只读', 'en-US': 'Group Form' },
name: { 'zh-CN': '表单仅展示', 'en-US': 'Group Form' },
desc: {
'zh-CN': '<p>通过 <code>display-only</code> 配置表单是否开启只读模式。</p>',
'zh-CN': '<p>通过 <code>display-only</code> 配置表单是否开启仅展示模式。</p>',
'en-US': '<p>Configure whether the form is in read-only mode by <code>display only</code> .</p>'
},
codeFiles: ['display-only.vue']
@ -168,7 +188,10 @@ export default {
{
demoId: 'form-row-col',
name: { 'zh-CN': '复杂布局', 'en-US': '' },
desc: { 'zh-CN': '<p>通过配合 <code>Row</code> 和 <code>Col</code> 组件来实现复杂布局。</p>', 'en-US': '' },
desc: {
'zh-CN': '<p>通过配合 <code>row</code> 和 <code>col</code> 组件来实现复杂布局。</p>',
'en-US': 'By collaborating with<code>row</code>and<code>col</code>components to achieve complex layouts.'
},
codeFiles: ['form-row-col.vue']
},
{
@ -199,7 +222,7 @@ export default {
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否禁用该表单内的所有组件若设置为 true，则表单内组件上的 disabled 属性不再生效',
'zh-CN': '是否禁用该表单内的所有表单组件，若设置为 true，则表单内组件上的 disabled 属性不再生效',
'en-US':
'Whether to disable all components in the form. If this parameter is set to true, the disabled attribute of components in the form does not take effect.'
},
@ -210,7 +233,7 @@ export default {
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '通过 display-only 属性，开启只读模式',
'zh-CN': '是否开启仅展示模式',
'en-US': 'Enable read-only mode through the display only attribute'
},
demoId: 'display-only'
@ -220,7 +243,7 @@ export default {
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '是否隐藏必填字段的标签旁边的红色星号，SMB主题下默认值为true',
'zh-CN': '是否隐藏必填字段的标签旁边的红色星号，SMB 主题下默认值为true',
'en-US':
'Whether to hide the red asterisk next to the label of mandatory fields, The default value for SMB theme is true'
},
@ -231,58 +254,58 @@ export default {
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '行内布局模式，默认为 false ',
'en-US': 'In-line layout mode. The default value is false.'
'zh-CN': '行内布局模式',
'en-US': 'In-line layout mode'
},
demoId: 'form-in-row'
},
{
name: 'inline-message',
type: 'boolean',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '当validate-type设置为text时，是否以行内形式展示校验信息(推荐使用message-type设置)',
'zh-CN': '当 validate-type 设置为text时，是否以行内形式展示校验信息(推荐使用 message-type 设置)',
'en-US':
' Whether to display the verification information inline form when validate-type is set to text,(It is recommended to use message-type setting)'
},
demoId: 'validate-type'
demoId: ''
},
{
name: 'message-type',
type: 'inline | block',
defaultValue: '',
type: "'inline' | 'block'",
'defaultValue': '--',
desc: {
'zh-CN': '当validate-type设置为text时，配置文本类型错误类型，可配置行内或者块级，默认为absolute定位',
'zh-CN':
'当 validate-type 设置为text时，配置文本类型错误类型，可配置行内或者块级，不设置则为 absolute 定位',
'en-US':
'Configure the text type error type, which can be configured at the inline or block level when validate-type is set to text. The default is absolute positioning'
},
demoId: 'validate-type'
demoId: 'message-type'
},
{
name: 'label-align',
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '表单中在配件显示必填字段的标签旁边的红色星号时，文本是否对齐 ',
'en-US':
'Check whether the text is aligned when the red asterisk next to the label of mandatory fields is displayed in the form.'
'zh-CN': "当出现必填星号时，标签文本是否对齐，当 label-position 为 'right'时有效",
'en-US': 'When a mandatory asterisk appears, is it aligned with the text'
},
demoId: 'label-align'
},
{
name: 'label-position',
type: 'right | left | top',
defaultValue: 'right',
type: "'right' | 'left' | 'top'",
defaultValue: "'right'",
desc: {
'zh-CN': '表单中标签的布局位置',
'en-US': 'Layout position of the label in the form'
},
demoId: 'label-align'
demoId: 'label-position'
},
{
name: 'label-suffix',
type: 'string',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '表单中标签后缀',
'en-US': 'Label suffix in the form'
@ -292,28 +315,38 @@ export default {
{
name: 'label-width',
type: 'string',
defaultValue: '80px',
defaultValue: "'80px'",
desc: {
'zh-CN': '表单中标签占位宽度',
'en-US': 'Label placeholder width in the form'
},
demoId: 'label-align'
demoId: 'label-position'
},
{
name: 'model',
type: 'object',
defaultValue: '',
type: '{ [prop: string]: any }',
'defaultValue': '--',
desc: {
'zh-CN': '表单数据对象',
'en-US': 'Form data object'
},
demoId: 'form-validation'
},
{
name: 'overflow-title',
type: 'boolean',
'defaultValue': 'false',
desc: {
'zh-CN': '标签超长是否显示提示',
'en-US': 'Does the label display a prompt if it is too long'
},
demoId: 'overflow-title'
},
{
name: 'rules',
type: '{ [prop: string]: IFormRules | IFormRules[] }',
typeAnchorName: 'IFormRules',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '表单验证规则',
'en-US': 'Form validation rule'
@ -332,10 +365,10 @@ export default {
},
{
name: 'size',
type: ' medium | small | mini',
defaultValue: '',
type: "'medium' | 'small' | 'mini'",
'defaultValue': '--',
desc: {
'zh-CN': '用于控制该表单内组件的尺寸',
'zh-CN': '表单内组件的尺寸，不设置则为默认尺寸',
'en-US': 'Controls the size of components in the form'
},
demoId: 'size'
@ -354,7 +387,7 @@ export default {
name: 'validate-position',
type: 'IFormPosition',
typeAnchorName: 'IFormPosition',
defaultValue: 'right',
defaultValue: "'right'",
desc: {
'zh-CN': '指定校验提示框显示的位置',
'en-US': 'Specify the position where the verification dialog box is displayed'
@ -363,8 +396,8 @@ export default {
},
{
name: 'validate-type',
type: 'tip | text',
defaultValue: 'tip',
type: "'tip' | 'text'",
defaultValue: "'tip'",
desc: {
'zh-CN': '校验类型',
'en-US': 'Verification type'
@ -376,9 +409,9 @@ export default {
{
name: 'default',
type: '',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '默认插槽',
'zh-CN': '默认插槽，自定义表单内容',
'en-US': 'Default slot'
},
demoId: 'basic-usage'
@ -388,7 +421,7 @@ export default {
{
name: 'clearValidate',
type: '(prop: string | string[]) => void',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN':
'移除表单项的校验结果，可传入待移除的表单项的prop，或者 prop 组成的数组，如不传则移除整个表单的校验结果',
@ -400,7 +433,7 @@ export default {
{
name: 'resetFields',
type: '() => void',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '对整个表单进行重置，将所有字段值重置为初始值并移除校验结果',
'en-US': 'Reset all field values to the initial values and remove the verification result.'
@ -409,12 +442,12 @@ export default {
},
{
name: 'validate',
typeAnchorName: 'IFormError',
type: '(callback: (isValid: boolean, fields: IFormError) => void ) => Promise&lt;boolean&gt;',
defaultValue: '',
typeAnchorName: 'IFormValidateMethod',
type: 'IFormValidateMethod',
'defaultValue': '--',
desc: {
'zh-CN':
'对整个表单进行校验的方法，参数为一个回调函数该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段若不传入回调函数，则会返回一个 promise',
'对整个表单进行校验的方法，参数为一个回调函数（该回调函数会在校验结束后被调用，并传入两个参数：1、是否校验成功 2、未通过校验的字段）返回一个 promise',
'en-US':
'Method for verifying the entire form. The parameter is a callback function. The callback function will be invoked after the verification is complete and two parameters are transferred: whether the verification is successful and whether the verification fails. If the callback function is not transferred, a promise is returned.'
},
@ -422,9 +455,9 @@ export default {
},
{
name: 'validateField',
typeAnchorName: 'IFormError',
type: '(prop: string | string[], callback: (msg: string, field: IFormError) => void) => void',
defaultValue: '',
typeAnchorName: 'IFormValidateFieldMethod',
type: 'IFormValidateFieldMethod',
'defaultValue': '--',
desc: {
'zh-CN':
'对部分表单字段进行校验的方法, 第一个参数为单个prop或者prop数组，第二个参数是回调函数，每个表单项检验完后会依次调用该回调',
@ -438,7 +471,7 @@ export default {
{
name: 'validate',
type: '(prop: string, isValid: boolean, message: string) => void',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '任一表单项被校验后触发',
'en-US': 'Triggered after any form item is verified'
@ -454,9 +487,9 @@ export default {
{
name: 'error',
type: 'string',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '表单项错误文本，设置该值会使表单验证状态变为error',
'zh-CN': '表单项错误文本，设置该值会使表单验证状态变为 error',
'en-US': 'Form item error text,Setting this value will change the form validation status to error'
},
demoId: ''
@ -464,29 +497,29 @@ export default {
{
name: 'inline-message',
type: 'boolean',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '是否以行内形式展示校验信息(推荐使用message-type设置)',
'zh-CN': '是否以行内形式展示校验信息(推荐使用 message-type 设置)',
'en-US':
'Whether to display the verification information inline form(It is recommended to use message-type setting) '
},
demoId: 'validate-type'
demoId: ''
},
{
name: 'message-type',
type: 'inline | block',
defaultValue: '',
type: "'inline' | 'block'",
'defaultValue': '--',
desc: {
'zh-CN': '配置文本类型错误类型，可配置行内或者块级，不配置则为absolute定位',
'zh-CN': '配置文本类型错误类型，可配置行内或者块级，不配置则为 absolute 定位',
'en-US':
'Configure the text type error type, which can be configured at the inline or block level. The default is absolute positioning'
},
demoId: 'validate-type'
demoId: 'message-type'
},
{
name: 'label',
type: 'string',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '标签文本',
'en-US': 'Label text'
@ -496,19 +529,19 @@ export default {
{
name: 'label-width',
type: 'string',
defaultValue: '80px',
defaultValue: "'80px'",
desc: {
'zh-CN': "表单域标签的的宽度，如 '50px',支持 auto",
'en-US': "Width of the form field label, for example, '50px'. Auto is supported"
'zh-CN': '表单域标签的的宽度',
'en-US': 'Width of the form field label'
},
demoId: 'basic-usage'
},
{
name: 'prop',
type: 'string',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '对应表单域model字段，如需使用表单校验，该属性是必填的',
'zh-CN': '对应表单域 model 字段，如需使用表单校验，该属性是必填的',
'en-US':
'Is it mandatory? If not set, it will be automatically generated according to the verification rules'
},
@ -529,7 +562,7 @@ export default {
name: 'rules',
type: 'IFormRules',
typeAnchorName: 'IFormRules',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '表单项验证规则',
'en-US': 'Form validation rule'
@ -548,10 +581,10 @@ export default {
},
{
name: 'size',
type: ' medium | small | mini',
defaultValue: '',
type: "'medium' | 'small' | 'mini'",
'defaultValue': '--',
desc: {
'zh-CN': '用于控制该表单域下组件的尺寸',
'zh-CN': '用于控制该表单域下组件的尺寸，不设置则为默认尺寸',
'en-US': 'Controls the size of the component in the form field'
},
demoId: 'size'
@ -561,7 +594,7 @@ export default {
type: 'boolean',
defaultValue: 'false',
desc: {
'zh-CN': '开启校验防抖，在连续输入的情况下，会在最后一次输入结束时才开始校验',
'zh-CN': '是否开启校验防抖，在连续输入的情况下，会在最后一次输入结束时才开始校验',
'en-US':
'Enable verification anti shake. In the case of continuous input, verification will only begin at the end of the last input'
},
@ -569,8 +602,8 @@ export default {
},
{
name: 'validate-icon',
type: 'Component',
defaultValue: '',
type: 'VueComponent',
'defaultValue': '--',
desc: {
'zh-CN': '校验提示框的图标，类型为组件',
'en-US': 'Icon for verification prompt box, type is component'
@ -581,7 +614,7 @@ export default {
name: 'validate-position',
type: 'IFormPosition',
typeAnchorName: 'IFormPosition',
defaultValue: 'top-end',
defaultValue: "'top-end'",
desc: {
'zh-CN': '指定校验提示框显示的位置',
'en-US': 'Specify the position where the verification dialog box is displayed'
@ -590,8 +623,8 @@ export default {
},
{
name: 'validate-type',
type: 'text | tip',
defaultValue: 'tip',
type: "'text' | 'tip'",
defaultValue: "'tip'",
desc: {
'zh-CN': '校验提示显示类型',
'en-US': 'Verification prompt display type'
@ -603,7 +636,7 @@ export default {
{
name: 'default',
type: '',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '默认插槽',
'en-US': 'Default slot'
@ -613,7 +646,7 @@ export default {
{
name: 'label',
type: '',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '标签文本的内容',
'en-US': 'Label text content'
@ -625,7 +658,7 @@ export default {
{
name: 'clearValidate',
type: '() => void',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '移除该表单项的校验结果',
'en-US': 'Remove the verification result of the table item.'
@ -635,7 +668,7 @@ export default {
{
name: 'resetField',
type: '() => void',
defaultValue: '',
'defaultValue': '--',
desc: {
'zh-CN': '对该表单项进行重置，将其值重置为初始值并移除校验结果',
'en-US': 'Reset the table item to the initial value and remove the verification result.'
@ -696,13 +729,30 @@ interface IFormInnerRule {
type: 'interface',
code: `
// 校验错误返回对象
interface IFormError = {
interface IFormError {
[prop: string]: IFormErrorField[]
}
interface IFormErrorField {
message: string // 校验错误提示
field: string // 校验失败的prop
}
`
},
{
name: 'IFormValidateMethod',
type: 'function',
code: `
function IFormValidateMethod(callback: (isValid: boolean, fields: IFormError) => void ): Promise<boolean>
`
},
{
name: 'IFormValidateFieldMethod',
type: 'function',
code: `
function IFormValidateFieldMethod(
prop: string | string[],
callback: (msg: string, field: IFormError) => void
): void
`
}
]

14
examples/sites/demos/pc/app/ip-address/blur-composition-api.vue
View File

@ -1,14 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @blur="blurForIPv4"></tiny-ip-address>
</template>
<script setup>
import { ref } from 'vue'
import { IpAddress as TinyIpAddress, Modal } from '@opentiny/vue'
const valueForIPv4 = ref('192.168.0.1')
function blurForIPv4() {
Modal.message({ message: 'IpAddress IPv4 blur事件', status: 'info' })
}
</script>

27
examples/sites/demos/pc/app/ip-address/blur.spec.ts
View File

@ -1,27 +0,0 @@
import { test, expect } from '@playwright/test'
test('ipAddress blur事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('ip-address#blur')
const preview = page.locator('#preview')
const input = preview.getByRole('textbox')
const modal = page.locator('.tiny-modal').filter({ hasText: 'IpAddress IPv4 blur事件' })
// 每个输入框失去焦点时触发事件
await input.nth(0).click()
await input.nth(0).blur()
await expect(modal).toHaveCount(1)
await input.nth(1).click()
await input.nth(1).blur()
await expect(modal).toHaveCount(2)
await input.nth(2).click()
await input.nth(2).blur()
await expect(modal).toHaveCount(3)
await input.nth(3).click()
await input.nth(3).blur()
await expect(modal).toHaveCount(4)
})

23
examples/sites/demos/pc/app/ip-address/blur.vue
View File

@ -1,23 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @blur="blurForIPv4"></tiny-ip-address>
</template>
<script>
import { IpAddress, Modal } from '@opentiny/vue'
export default {
components: {
TinyIpAddress: IpAddress
},
data() {
return {
valueForIPv4: '192.168.0.1'
}
},
methods: {
blurForIPv4: () => {
Modal.message({ message: 'IpAddress IPv4 blur事件', status: 'info' })
}
}
}
</script>

14
examples/sites/demos/pc/app/ip-address/change-composition-api.vue
View File

@ -1,14 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @change="changeForIPv4"></tiny-ip-address>
</template>
<script setup>
import { ref } from 'vue'
import { IpAddress as TinyIpAddress, Modal } from '@opentiny/vue'
const valueForIPv4 = ref('192.168.0.1')
function changeForIPv4() {
Modal.message({ message: 'IpAddress IPv4 change事件', status: 'info' })
}
</script>

23
examples/sites/demos/pc/app/ip-address/change.vue
View File

@ -1,23 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @change="changeForIPv4"></tiny-ip-address>
</template>
<script>
import { IpAddress, Modal } from '@opentiny/vue'
export default {
components: {
TinyIpAddress: IpAddress
},
data() {
return {
valueForIPv4: '192.168.0.1'
}
},
methods: {
changeForIPv4: () => {
Modal.message({ message: 'IpAddress IPv4 change事件', status: 'info' })
}
}
}
</script>

49
examples/sites/demos/pc/app/ip-address/event-composition-api.vue Normal file
View File

@ -0,0 +1,49 @@
<template>
<div class="title">聚焦、失焦事件：</div>
<tiny-ip-address v-model="value1" @blur="handleBlur" @focus="handleFocus"></tiny-ip-address>
<div class="title">内容改变事件：</div>
<tiny-ip-address v-model="value2" @change="handleChange"></tiny-ip-address>
<div class="title">输入事件：</div>
<tiny-ip-address v-model="value3" @input="handleInput"></tiny-ip-address>
<div class="title">选中事件：</div>
<tiny-ip-address v-model="value4" @select="handleSelect"></tiny-ip-address>
</template>
<script setup>
import { ref } from 'vue'
import { IpAddress as TinyIpAddress, Modal } from '@opentiny/vue'
const value1 = ref('192.168.0.1')
const value2 = ref('192.168.0.1')
const value3 = ref('192.168.0.1')
const value4 = ref('192.168.0.1')
function handleBlur() {
Modal.message({ message: 'blur 事件触发了', status: 'info' })
}
function handleChange() {
Modal.message({ message: 'change 事件触发了', status: 'info' })
}
function handleFocus() {
Modal.message({ message: 'focus 事件触发了', status: 'info' })
}
function handleInput() {
Modal.message({ message: 'input 事件触发了', status: 'info' })
}
function handleSelect() {
Modal.message({ message: 'select 事件触发了', status: 'info' })
}
</script>
<style scoped>
.title {
margin-top: 20px;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
}
</style>

0
examples/sites/demos/pc/app/ip-address/change.spec.ts → examples/sites/demos/pc/app/ip-address/event.spec.ts
View File

54
examples/sites/demos/pc/app/ip-address/event.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div class="title">聚焦、失焦事件：</div>
<tiny-ip-address v-model="value1" @blur="handleBlur" @focus="handleFocus"></tiny-ip-address>
<div class="title">内容改变事件：</div>
<tiny-ip-address v-model="value2" @change="handleChange"></tiny-ip-address>
<div class="title">输入事件：</div>
<tiny-ip-address v-model="value3" @input="handleInput"></tiny-ip-address>
<div class="title">选中事件：</div>
<tiny-ip-address v-model="value4" @select="handleSelect"></tiny-ip-address>
</template>
<script>
import { IpAddress, Modal } from '@opentiny/vue'
export default {
components: {
TinyIpAddress: IpAddress
},
data() {
return {
value1: '192.168.0.1',
value2: '192.168.0.1',
value3: '192.168.0.1',
value4: '192.168.0.1'
}
},
methods: {
handleBlur: () => {
Modal.message({ message: 'blur 事件触发了', status: 'info' })
},
handleChange: () => {
Modal.message({ message: 'change 事件触发了', status: 'info' })
},
handleFocus: () => {
Modal.message({ message: 'focus 事件触发了', status: 'info' })
},
handleInput: () => {
Modal.message({ message: 'input 事件触发了', status: 'info' })
},
handleSelect: () => {
Modal.message({ message: 'select 事件触发了', status: 'info' })
}
}
}
</script>
<style scoped>
.title {
margin-top: 20px;
margin-bottom: 10px;
font-size: 16px;
font-weight: bold;
}
</style>

14
examples/sites/demos/pc/app/ip-address/focus-composition-api.vue
View File

@ -1,14 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @focus="focusForIPv4"></tiny-ip-address>
</template>
<script setup>
import { ref } from 'vue'
import { IpAddress as TinyIpAddress, Modal } from '@opentiny/vue'
const valueForIPv4 = ref('192.168.0.1')
function focusForIPv4() {
Modal.message({ message: 'IpAddress IPv4 focus事件', status: 'info' })
}
</script>

23
examples/sites/demos/pc/app/ip-address/focus.spec.ts
View File

@ -1,23 +0,0 @@
import { test, expect } from '@playwright/test'
test('ipAddress focus事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('ip-address#focus')
const preview = page.locator('#preview')
const input = preview.getByRole('textbox')
const modal = page.locator('.tiny-modal').filter({ hasText: 'IpAddress IPv4 focus事件' })
// 每个输入框获取焦点时触发事件
await input.nth(0).focus()
await expect(modal).toHaveCount(1)
await input.nth(1).focus()
await expect(modal).toHaveCount(2)
await input.nth(2).focus()
await expect(modal).toHaveCount(3)
await input.nth(3).focus()
await expect(modal).toHaveCount(4)
})

23
examples/sites/demos/pc/app/ip-address/focus.vue
View File

@ -1,23 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @focus="focusForIPv4"></tiny-ip-address>
</template>
<script>
import { IpAddress, Modal } from '@opentiny/vue'
export default {
components: {
TinyIpAddress: IpAddress
},
data() {
return {
valueForIPv4: '192.168.0.1'
}
},
methods: {
focusForIPv4: () => {
Modal.message({ message: 'IpAddress IPv4 focus事件', status: 'info' })
}
}
}
</script>

14
examples/sites/demos/pc/app/ip-address/input-composition-api.vue
View File

@ -1,14 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @input="inputForIPv4"></tiny-ip-address>
</template>
<script setup>
import { ref } from 'vue'
import { IpAddress as TinyIpAddress, Modal } from '@opentiny/vue'
const valueForIPv4 = ref('192.168.0.1')
function inputForIPv4() {
Modal.message({ message: 'IpAddress IPv4 input事件', status: 'info' })
}
</script>

23
examples/sites/demos/pc/app/ip-address/input.spec.ts
View File

@ -1,23 +0,0 @@
import { test, expect } from '@playwright/test'
test('ipAddress input事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('ip-address#input')
const preview = page.locator('#preview')
const input = preview.getByRole('textbox')
const modal = page.locator('.tiny-modal').filter({ hasText: 'IpAddress IPv4 input事件' })
// 每个输入框输入时触发事件
await input.nth(0).fill('111')
await expect(modal).toHaveCount(1)
await input.nth(1).fill('222')
await expect(modal).toHaveCount(2)
await input.nth(2).fill('33')
await expect(modal).toHaveCount(3)
await input.nth(3).fill('33')
await expect(modal).toHaveCount(4)
})

23
examples/sites/demos/pc/app/ip-address/input.vue
View File

@ -1,23 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @input="inputForIPv4"></tiny-ip-address>
</template>
<script>
import { IpAddress, Modal } from '@opentiny/vue'
export default {
components: {
TinyIpAddress: IpAddress
},
data() {
return {
valueForIPv4: '192.168.0.1'
}
},
methods: {
inputForIPv4: () => {
Modal.message({ message: 'IpAddress IPv4 input事件', status: 'info' })
}
}
}
</script>

14
examples/sites/demos/pc/app/ip-address/select-composition-api.vue
View File

@ -1,14 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @select="selectForIPv4"></tiny-ip-address>
</template>
<script setup>
import { ref } from 'vue'
import { IpAddress as TinyIpAddress, Modal } from '@opentiny/vue'
const valueForIPv4 = ref('192.168.0.1')
function selectForIPv4() {
Modal.message({ message: 'IpAddress IPv4 select事件', status: 'info' })
}
</script>

22
examples/sites/demos/pc/app/ip-address/select.spec.ts
View File

@ -1,22 +0,0 @@
import { test, expect } from '@playwright/test'
test('ipAddress select事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('ip-address#select')
const preview = await page.locator('#preview')
const modal = page.locator('.tiny-modal').filter({ hasText: 'IpAddress IPv4 select事件' })
const input = preview.getByRole('textbox')
await input.nth(0).selectText()
await expect(modal).toHaveCount(1)
await input.nth(1).selectText()
await expect(modal).toHaveCount(2)
await input.nth(2).selectText()
await expect(modal).toHaveCount(3)
await input.nth(3).selectText()
await expect(modal).toHaveCount(4)
})

23
examples/sites/demos/pc/app/ip-address/select.vue
View File

@ -1,23 +0,0 @@
<template>
<tiny-ip-address v-model="valueForIPv4" @select="selectForIPv4"></tiny-ip-address>
</template>
<script>
import { IpAddress, Modal } from '@opentiny/vue'
export default {
components: {
TinyIpAddress: IpAddress
},
data() {
return {
valueForIPv4: '192.168.0.1'
}
},
methods: {
selectForIPv4: () => {
Modal.message({ message: 'IpAddress IPv4 select事件', status: 'info' })
}
}
}
</script>

14
examples/sites/demos/pc/app/ip-address/size-composition-api.vue
View File

@ -1,5 +1,10 @@
<template>
<div><tiny-ip-address size="medium" v-model="value"></tiny-ip-address><br /></div>
<div>
<tiny-ip-address size="medium" v-model="value"></tiny-ip-address>
<tiny-ip-address size="small" v-model="value"></tiny-ip-address>
<tiny-ip-address v-model="value"></tiny-ip-address>
<tiny-ip-address size="mini" v-model="value"></tiny-ip-address>
</div>
</template>
<script setup>
@ -8,3 +13,10 @@ import { IpAddress as TinyIpAddress } from '@opentiny/vue'
const value = ref('192.168.0.1')
</script>
<style scoped>
.tiny-ip-address {
display: block;
margin-bottom: 20px;
}
</style>

14
examples/sites/demos/pc/app/ip-address/size.vue
View File

@ -1,5 +1,10 @@
<template>
<div><tiny-ip-address size="medium" v-model="value"></tiny-ip-address><br /></div>
<div>
<tiny-ip-address size="medium" v-model="value"></tiny-ip-address>
<tiny-ip-address size="small" v-model="value"></tiny-ip-address>
<tiny-ip-address v-model="value"></tiny-ip-address>
<tiny-ip-address size="mini" v-model="value"></tiny-ip-address>
</div>
</template>
<script>
@ -16,3 +21,10 @@ export default {
}
}
</script>
<style scoped>
.tiny-ip-address {
display: block;
margin-bottom: 20px;
}
</style>

4
examples/sites/demos/pc/app/ip-address/webdoc/ip-address.cn.md
View File

@ -1,7 +1,7 @@
---
title: IpAddress 输入框
title: IpAddress ip地址输入框
---
# IpAddress 输入框
# IpAddress ip 地址输入框
<div>IP 地址输入框与 HTML 原生的 IpAddress 组件保持一致，同时提供数据绑定功能。</div>

102
examples/sites/demos/pc/app/ip-address/webdoc/ip-address.js
View File

@ -7,9 +7,9 @@ export default {
'name': { 'zh-CN': '基础用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN':
'<p>通过 <code>v-model</code> 设置绑定值， <code>type</code> 设置类型，可选值为 <code>IPv4</code> ， <code>IPv6</code> ，默认为 <code>ipv4</code> 。</p>',
'<p>通过 <code>v-model</code> 设置绑定值， <code>type</code> 设置类型，可选值为 <code>IPv4</code> 、<code>IPv6</code> 。</p>',
'en-US':
'<p>Set the binding value through <code>v-model</code> , and set the type through <code>type</code> . The optional values are <code>IPv4</code> , <code>IPv6</code> , and the default is <code>ipv4</code> .</p>'
'<p>Set the binding value through <code>v-model</code> , and set the type through <code>type</code> . The optional values are <code>IPv4</code> , <code>IPv6</code>.</p>'
},
'codeFiles': ['basic-usage.vue']
},
@ -27,8 +27,8 @@ export default {
'demoId': 'readonly',
'name': { 'zh-CN': '文本只读', 'en-US': 'Read-only text' },
'desc': {
'zh-CN': '<p>通过 <code>readonly</code> 设置文本的只读行，默认为 false 。</p>',
'en-US': '<p>Use the <code>readonly</code> attribute to set the read-only line of the text </p>'
'zh-CN': '<p>通过 <code>readonly</code> 设置文本的只读行。</p>',
'en-US': '<p>Use the <code>readonly</code> attribute to set the read-only line of the text.</p>'
},
'codeFiles': ['readonly.vue']
},
@ -36,7 +36,7 @@ export default {
'demoId': 'disabled',
'name': { 'zh-CN': '禁用', 'en-US': 'Disabled' },
'desc': {
'zh-CN': '<p>通过 <code>disabled</code> 设置文本是否禁用，默认为 false。</p>',
'zh-CN': '<p>通过 <code>disabled</code> 设置文本是否禁用。</p>',
'en-US': '<p>The <code>disabled</code> attribute is used to set whether to disable text </p>'
},
'codeFiles': ['disabled.vue']
@ -46,56 +46,30 @@ export default {
'name': { 'zh-CN': '尺寸', 'en-US': 'Text box size' },
'desc': {
'zh-CN':
'<p>通过 <code>size</code> 设置尺寸，可选值有 <code>medium</code> ， <code>small</code> ， <code>mini</code> 。</p>',
'<p>通过 <code>size</code> 设置尺寸，可选值有 <code>medium</code> 、<code>small</code> 、<code>mini</code> ，不设置则为默认尺寸。</p>',
'en-US':
'<p>Set the size through <code>size</code> , and the optional values are <code>medium</code> , <code>small</code> , <code>mini</code> .</p>'
},
'codeFiles': ['size.vue']
},
{
'demoId': 'focus',
'name': { 'zh-CN': 'focus 事件', 'en-US': 'focus event' },
'demoId': 'event',
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
'desc': {
'zh-CN': '<p>文本框获取焦点时触发 <code>focus</code> 事件。</p>',
'en-US': 'The <code>focus</code> event is triggered when the text box obtains the focus. </p>'
'zh-CN': `<p>
文本框获取焦点时触发 <code>focus</code> 事件，失去焦点时触发 <code>blur</code> 事件。<br />
文本框内容改变后触发 <code>change</code> 事件。<br />
文本框输入时触发 <code>input</code> 事件。<br />
文本框内容选中时触发 <code>select</code> 事件。<br />
</p>`,
'en-US': `<p>
The<code>focus</code>event is triggered when the text box gains focus, and the<code>blur</code>event is triggered when the focus is lost.<br/>
Trigger the<code>change</code>event after the content of the text box changes.<br/>
Trigger the<code>input</code>event when entering a text box.<br/>
Trigger the<code>select</code>event when the content of the text box is selected.<br/>
</p>`
},
'codeFiles': ['focus.vue']
},
{
'demoId': 'blur',
'name': { 'zh-CN': 'blur 事件', 'en-US': 'blur event' },
'desc': {
'zh-CN': '<p>文本框失去焦点时触发 <code>blur</code> 事件。</p>',
'en-US': 'The <code>blur</code> event is triggered when the text box loses focus. </p>'
},
'codeFiles': ['blur.vue']
},
{
'demoId': 'change',
'name': { 'zh-CN': 'change 事件', 'en-US': 'change event' },
'desc': {
'zh-CN': '<p>文本框内容改变后触发 <code>change</code> 事件。</p>',
'en-US': 'The <code>change</code> event is triggered when the text box content changes. </p>'
},
'codeFiles': ['change.vue']
},
{
'demoId': 'select',
'name': { 'zh-CN': 'select 事件', 'en-US': 'select event' },
'desc': {
'zh-CN': '<p>文本框内容选中时触发 <code>select</code> 事件。</p>',
'en-US': 'The <code>select</code> event is triggered when the text box content is selected. </p>'
},
'codeFiles': ['select.vue']
},
{
'demoId': 'input',
'name': { 'zh-CN': 'input 事件', 'en-US': 'input event' },
'desc': {
'zh-CN': '<p>文本框输入时触发 <code>input</code> 事件。</p>',
'en-US': 'The <code>input</code> event is triggered when a user enters a text box. '
},
'codeFiles': ['input.vue']
'codeFiles': ['event.vue']
}
],
apis: [
@ -105,10 +79,10 @@ export default {
'props': [
{
'name': 'delimiter',
'type': 'string | Component',
'defaultValue': 'icon-dot-ipv4',
'type': 'VueComponent',
'defaultValue': 'IconDotIpv4',
'desc': {
'zh-CN': '设置IP段之间的分隔符，默认图标icon-dot-ipv4',
'zh-CN': '设置IP段之间的分隔符，默认图标为IconDotIpv4',
'en-US': 'Set the separator between IP segments, default icon is icon-dot-ipv4'
},
'demoId': 'delimiter'
@ -135,20 +109,20 @@ export default {
},
{
'name': 'size',
'type': 'medium | small | mini',
'defaultValue': '',
'type': "'medium' | 'small' | 'mini'",
'defaultValue': '--',
'desc': {
'zh-CN': '设置组件大小',
'en-US': 'Set the component size'
'zh-CN': '地址输入框大小',
'en-US': 'Address Input Box Size'
},
'demoId': 'size'
},
{
'name': 'type',
'type': 'IPv4 | IPv6',
'defaultValue': 'IPv4',
'type': "'IPv4' | 'IPv6'",
'defaultValue': "'IPv4'",
'desc': {
'zh-CN': '设置 IpAddress 框的 类型',
'zh-CN': '设置 ip 地址输入框的 类型',
'en-US': 'Sets the type attribute in the IpAddress box'
},
'demoId': 'basic-usage'
@ -156,7 +130,7 @@ export default {
{
'name': 'v-model',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '设置地址输入框的绑定值',
'en-US': 'Set the binding value of the address input box'
@ -168,7 +142,7 @@ export default {
{
'name': 'blur',
'type': '(value: string, index: number) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '文本框失去焦点时触发事件',
'en-US': 'The event is triggered when the text box loses the focus'
@ -178,7 +152,7 @@ export default {
{
'name': 'change',
'type': '(value: string) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '文本框内容改变后事件',
'en-US': 'Event after changing the content of the text box'
@ -188,7 +162,7 @@ export default {
{
'name': 'focus',
'type': '(value: string, index: number) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '文本框获取焦点时触发事件',
'en-US': 'This event is triggered when a text box obtains the focus'
@ -198,7 +172,7 @@ export default {
{
'name': 'input',
'type': '(event: InputEvent) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '文本框内容输入时触发事件',
'en-US': 'Trigger event when entering text box content'
@ -208,7 +182,7 @@ export default {
{
'name': 'select',
'type': '(value: string, index: number) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '文本框内容选中时触发事件',
'en-US': 'Trigger event when text box content is selected'
@ -220,7 +194,7 @@ export default {
{
'name': 'default',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '默认插槽，自定义IP段之间的分隔符',
'en-US': 'Separator between IP address segments'

25
examples/sites/demos/pc/app/pager/current-change-composition-api.vue
View File

@ -1,25 +0,0 @@
<template>
<tiny-pager
:page-size="100"
layout="total, sizes, prev, pager, next"
:total="1000"
:current-page="currentPage"
@update:current-page="currentPage = $event"
@current-change="handleCurrentChange"
>
</tiny-pager>
</template>
<script setup>
import { ref } from 'vue'
import { Pager as TinyPager, Modal } from '@opentiny/vue'
const currentPage = ref(5)
function handleCurrentChange(val) {
Modal.message({
message: `current-change 事件，当前页: ${val}`,
status: 'info'
})
}
</script>

34
examples/sites/demos/pc/app/pager/current-change.vue
View File

@ -1,34 +0,0 @@
<template>
<tiny-pager
:page-size="100"
layout="total, sizes, prev, pager, next"
:total="1000"
:current-page="currentPage"
@update:current-page="currentPage = $event"
@current-change="handleCurrentChange"
>
</tiny-pager>
</template>
<script>
import { Pager, Modal } from '@opentiny/vue'
export default {
components: {
TinyPager: Pager
},
data() {
return {
currentPage: 5
}
},
methods: {
handleCurrentChange(val) {
Modal.message({
message: `current-change 事件，当前页: ${val}`,
status: 'info'
})
}
}
}
</script>

15
examples/sites/demos/pc/app/pager/page-size-composition-api.vue
View File

@ -1,20 +1,7 @@
<template>
<tiny-pager
mode="number"
:page-size="5"
:page-sizes="[5, 7, 10, 20, 50]"
:total="100"
@size-change="handleSizeChange"
>
</tiny-pager>
<tiny-pager mode="number" :page-size="5" :page-sizes="[5, 7, 10, 20, 50]" :total="100"> </tiny-pager>
</template>
<script setup>
import { Pager as TinyPager, Modal } from '@opentiny/vue'
function handleSizeChange(val) {
Modal.message({
message: `size-change 事件，每页 ${val} 条`
})
}
</script>

16
examples/sites/demos/pc/app/pager/page-size.vue
View File

@ -1,12 +1,5 @@
<template>
<tiny-pager
mode="number"
:page-size="5"
:page-sizes="[5, 7, 10, 20, 50]"
:total="100"
@size-change="handleSizeChange"
>
</tiny-pager>
<tiny-pager mode="number" :page-size="5" :page-sizes="[5, 7, 10, 20, 50]" :total="100"> </tiny-pager>
</template>
<script>
@ -15,13 +8,6 @@ import { Pager, Modal } from '@opentiny/vue'
export default {
components: {
TinyPager: Pager
},
methods: {
handleSizeChange(val) {
Modal.message({
message: `size-change 事件，每页 ${val} 条`
})
}
}
}
</script>

67
examples/sites/demos/pc/app/pager/pager-event-composition-api.vue Normal file
View File

@ -0,0 +1,67 @@
<template>
<div>
<div class="title">当前所在页改变：</div>
<tiny-pager :total="100" mode="number" @current-change="handleCurrentChange"> </tiny-pager>
<div class="title">每页展示条目数改变：</div>
<tiny-pager :total="100" mode="number" @size-change="handleSizeChange"> </tiny-pager>
<div class="title">上一页、下一页：</div>
<tiny-pager :total="100" mode="number" @prev-click="prevClick" @next-click="nextClick"> </tiny-pager>
<div class="title">每页条目数和当前页同时改变：</div>
<tiny-pager :total="100" :current-page="10" mode="number" @current-change="fetchData" @size-change="fetchData">
</tiny-pager>
</div>
</template>
<script setup>
import { Pager as TinyPager, Modal } from '@opentiny/vue'
function debounce(fn, delay = 50) {
let timer
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
function handleCurrentChange(val) {
Modal.message({
message: `current-change 事件，当前页: ${val}`
})
}
function handleSizeChange(val) {
Modal.message({
message: `current-change 事件，当前页: ${val}`
})
}
function prevClick(val) {
Modal.message({
message: `prev-click 事件，当前页: ${val}`
})
}
function nextClick(val) {
Modal.message({
message: `next-click 事件，当前页: ${val}`
})
}
const fetchData = debounce(() => {
Modal.message({
message: '模拟后台拉取数据'
})
})
</script>
<style scoped>
.title {
margin-top: 20px;
margin-bottom: 4px;
font-size: 16px;
font-weight: bold;
}
</style>

0
examples/sites/demos/pc/app/pager/current-change.spec.ts → examples/sites/demos/pc/app/pager/pager-event.spec.ts
View File

71
examples/sites/demos/pc/app/pager/pager-event.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<div>
<div class="title">当前所在页改变：</div>
<tiny-pager :total="100" mode="number" @current-change="handleCurrentChange"> </tiny-pager>
<div class="title">每页展示条目数改变：</div>
<tiny-pager :total="100" mode="number" @size-change="handleSizeChange"> </tiny-pager>
<div class="title">上一页、下一页：</div>
<tiny-pager :total="100" mode="number" @prev-click="prevClick" @next-click="nextClick"> </tiny-pager>
<div class="title">每页条目数和当前页同时改变：</div>
<tiny-pager :total="100" :current-page="10" mode="number" @current-change="fetchData" @size-change="fetchData">
</tiny-pager>
</div>
</template>
<script>
import { Pager, Modal } from '@opentiny/vue'
function debounce(fn, delay = 50) {
let timer
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}
export default {
components: {
TinyPager: Pager
},
methods: {
handleCurrentChange(val) {
Modal.message({
message: `current-change 事件，当前页: ${val}`
})
},
handleSizeChange(val) {
Modal.message({
message: `current-change 事件，当前页: ${val}`
})
},
prevClick(val) {
Modal.message({
message: `prev-click 事件，当前页: ${val}`
})
},
nextClick(val) {
Modal.message({
message: `next-click 事件，当前页: ${val}`
})
},
fetchData: debounce(() => {
Modal.message({
message: '模拟后台拉取数据'
})
})
}
}
</script>
<style scoped>
.title {
margin-top: 20px;
margin-bottom: 4px;
font-size: 16px;
font-weight: bold;
}
</style>

2
examples/sites/demos/pc/app/pager/popper-class-composition-api.vue
View File

@ -13,6 +13,6 @@ import { Pager as TinyPager } from '@opentiny/vue'
</script>
<style>
.custom-pager.tiny-popper {
background: #fff3b7;
background: #e6f7ff;
}
</style>

2
examples/sites/demos/pc/app/pager/popper-class.vue
View File

@ -19,6 +19,6 @@ export default {
</script>
<style>
.custom-pager.tiny-popper {
background: #fff3b7;
background: #e6f7ff;
}
</style>

29
examples/sites/demos/pc/app/pager/prev-next-click-composition-api.vue
View File

@ -1,29 +0,0 @@
<template>
<tiny-pager
@prev-click="prevClick"
@next-click="nextClick"
:current-page="currentPage"
@update:current-page="currentPage = $event"
:total="100"
>
</tiny-pager>
</template>
<script setup>
import { ref } from 'vue'
import { Pager as TinyPager, Modal } from '@opentiny/vue'
const currentPage = ref(5)
function prevClick(val) {
Modal.message({
message: `prev-click 事件，当前页: ${val}`
})
}
function nextClick(val) {
Modal.message({
message: `next-click 事件，当前页: ${val}`
})
}
</script>

20
examples/sites/demos/pc/app/pager/prev-next-click.spec.ts
View File

@ -1,20 +0,0 @@
import { test, expect } from '@playwright/test'
test('分页事件prev-click', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('pager#pager-events-prev-click')
const preview = page.locator('#preview')
const pager = preview.locator('.tiny-pager')
const prev = pager.locator('.tiny-pager__btn-prev')
const next = pager.locator('.tiny-pager__btn-next')
const pageItem = pager.locator('.tiny-pager__pages li')
const modalBox = page.locator('.tiny-modal__box').filter({ hasText: 'prev-click 事件' })
await next.click()
await expect(modalBox).not.toBeVisible()
await pageItem.last().click()
await expect(modalBox).not.toBeVisible()
await prev.click()
await expect(modalBox).toBeVisible()
})

37
examples/sites/demos/pc/app/pager/prev-next-click.vue
View File

@ -1,37 +0,0 @@
<template>
<tiny-pager
@prev-click="prevClick"
@next-click="nextClick"
:current-page="currentPage"
@update:current-page="currentPage = $event"
:total="100"
>
</tiny-pager>
</template>
<script>
import { Pager, Modal } from '@opentiny/vue'
export default {
components: {
TinyPager: Pager
},
data() {
return {
currentPage: 5
}
},
methods: {
prevClick(val) {
Modal.message({
message: `prev-click 事件，当前页: ${val}`
})
},
nextClick(val) {
Modal.message({
message: `next-click 事件，当前页: ${val}`
})
}
}
}
</script>

177
examples/sites/demos/pc/app/pager/webdoc/pager.js
View File

@ -6,15 +6,14 @@ export default {
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '<p>详细用法参考如下示例，通过 <code>total</code> 设置总条数。</p>',
'en-US':
'For detailed usage, refer to the following example, and set the total number of entries through <code>total</code> .'
'zh-CN': '<p>通过 <code>total</code> 设置总条数。</p>',
'en-US': 'Set the total number of entries through <code>total</code> .'
},
'codeFiles': ['basic-usage.vue']
},
{
'demoId': 'current-page',
'name': { 'zh-CN': '当前页', 'en-US': 'Current Page' },
'demoId': 'current-page/v-model:current-page',
'name': { 'zh-CN': '当前所在页', 'en-US': 'Current Page' },
'desc': {
'zh-CN': '<p>通过 <code>current-page</code> 设置初始加载页码数。</p>\n',
'en-US': '<p>Use <code>current-page</code> to set the number of initially loaded pages.</p>\n'
@ -26,21 +25,12 @@ export default {
'name': { 'zh-CN': '每页显示数量', 'en-US': 'Display quantity per page' },
'desc': {
'zh-CN':
'<p>通过 <code>page-size</code> 设置每页显示条目个数， <code>page-sizes</code> 设置可选择的 <code>page-size</code> 列表，当 <code>page-size</code> 发生变化时，会触发 <code>size-change</code> 事件。</p>\n',
'<p>通过 <code>page-size</code> 设置每页显示条目个数， <code>page-sizes</code> 设置可选择的 <code>page-size</code> 列表。</p>\n',
'en-US':
'<p>By setting the number of displayed entries per page through <code>page size</code> , <code>page sizes</code> provides a switchable <code>page size</code> list. When the <code>page size</code> changes, the <code>size change</code> event is triggered.</p>\n'
'<p>By setting the number of displayed entries per page through <code>page size</code> , <code>page sizes</code> provides a switchable <code>page size</code> list.</p>\n'
},
'codeFiles': ['page-size.vue']
},
{
'demoId': 'current-change',
'name': { 'zh-CN': '分页事件current-change', 'en-US': 'Paging event current-change' },
'desc': {
'zh-CN': '<p> <code>current-change</code> 切换当前页码时触发。</p>\n',
'en-US': '<p> <code>current-change</code> Triggered when the current page number is switched.</p>\n'
},
'codeFiles': ['current-change.vue']
},
{
'demoId': 'prev-next-click',
'name': { 'zh-CN': '上一页、下一页事件', 'en-US': 'Prev click and next click event' },
@ -85,23 +75,12 @@ export default {
'name': { 'zh-CN': '分页模式', 'en-US': 'Pager mode' },
'desc': {
'zh-CN':
'<p>通过 <code>mode</code> 设置分页组件组件渲染模式，不同模式是组件内置的layout设置， <code>mode</code> 优先级高于 <code>layout</code> 。</p>\n',
'<p>通过 <code>mode</code> 设置分页组件组件渲染模式，不同模式是组件内置的 <code>layout</code> 设置， <code>mode</code> 优先级高于 <code>layout</code> 。</p>\n',
'en-US':
'<p>Set the rendering mode of pagination component components through <code>mode</code> . The different modes are the built-in layout settings of the components, and the priority of <code>mode</code> is higher than that of <code>layout</code> .</p>\n'
},
'codeFiles': ['pager-mode.vue']
},
{
'demoId': 'before-page-change',
'name': { 'zh-CN': '分页事件before-page-change', 'en-US': 'Paging event before-page-change' },
'desc': {
'zh-CN':
'<p>通过 <code>is-before-page-change</code> 开启前置处理特性，翻页或者改变页大小时，触发 <code>before-page-change</code> 事件。事件函数类型为<a href="#IBeforeChangeFunc">IBeforeChangeFunc</a>，调用传参中的 <code>callback</code> 继续变更，调用 <code>rollback</code> 中止变更。</p>\n',
'en-US':
'<p>By enabling the pre processing feature through <code>is before page change</code> , the <code>before page change</code> event is triggered when flipping or changing page size. The event function type is<a="#IBeforeChangeFunc">IBeforeChangeFunc</a>, call <code>callback</code> in the passed parameters to continue the change, and call <code>rollback</code> to abort the change.</p>\n'
},
'codeFiles': ['before-page-change.vue']
},
{
'demoId': 'page-count',
'name': { 'zh-CN': '总页数', 'en-US': 'Total Pages' },
@ -115,10 +94,9 @@ export default {
'demoId': 'popper-append-to-body',
'name': { 'zh-CN': '分页下拉框显示位置', 'en-US': 'Paging drop-down list box display position' },
'desc': {
'zh-CN':
'<p> <code>popper-append-to-body</code> 可设置分页下拉框元素是否追加到body元素节点下，该属性的默认值为 <code>true</code> ,默认追加到body元素节点下 。</p>\n<p>若不想追加到body元素节点下，设置 <code>:popper-append-to-body="false"</code> 。</p>',
'zh-CN': '<p>通过 <code>popper-append-to-body</code> 设置分页下拉框元素是否追加到body元素节点下。</p>',
'en-US':
'Indicates whether to add an element in the <p> <code>popper-append-to-body</code> paging drop-down list box to the body element node. The default value of this attribute is <code>true</code> , indicating that the element is added to the body element node by default. </p>\n<p>If you do not want to add it to the body element node, set <code>:popper-append-to-body="false"</code> .</p>'
'Indicates whether to add an element in the <p> <code>popper-append-to-body</code> paging drop-down list box to the body element node.</p>'
},
'codeFiles': ['page-append-to-body.vue']
},
@ -126,8 +104,9 @@ export default {
'demoId': 'popper-class',
'name': { 'zh-CN': '自定义分页下拉框的类名', 'en-US': 'Class name of the customized paging drop-down list box' },
'desc': {
'zh-CN': '<p> <code>popper-class</code> 可以自定义分页下拉框的类名。</p>',
'en-US': '<p> <code>popper-class</code> You can customize the class name of the paging drop-down list box.</p>'
'zh-CN': '<p>通过 <code>popper-class</code> 添加自定义分页下拉框的类名。</p>',
'en-US':
'<p>By <code>popper-class</code> You can customize the class name of the paging drop-down list box.</p>'
},
'codeFiles': ['popper-class.vue']
},
@ -136,7 +115,7 @@ export default {
'name': { 'zh-CN': '自定义总条数', 'en-US': 'Customized pagination layout' },
'desc': {
'zh-CN':
'<p> <code>custom-total</code> 可以自定义分页总条数显示文本。传值为文本则显示传入的文本；传值为 <code>true</code> 时，小于 <code>10万</code> 正常显示数字，大于 <code>10万</code> 显示 <code>10万+</code> 。以此类推显示 <code>100万+</code> 、 <code>1千万+</code> ，大于 <code>1千万</code> 后统一都显示为 <code>1千万+</code> 。</p>',
'<p>通过 <code>custom-total</code> 设置分页总条数显示文本。传值为文本则显示传入的文本，传值为 <code>true</code> 时，小于 <code>10万</code> 正常显示数字，大于 <code>10万</code> 显示 <code>10万+</code> 。以此类推，显示 <code>100万+</code> 、 <code>1千万+</code> ，大于 <code>1千万</code> 后统一都显示为 <code>1千万+</code> 。</p>',
'en-US':
'<p> <code>custom total</code> You can customize the total number of pages to display text. If the value is passed as text, the incoming text will be displayed; When the value is passed as <code>true</code> , a number is displayed normally when it is less than <code>100000</code> , and when it is greater than <code>100000</code> , it is displayed as <code>100K+</code> . By analogy, display <code>1M+</code> , <code>10M+</code> , and display as <code>10M+</code> when it is greater than <code>10 million</code> .\n'
},
@ -146,7 +125,7 @@ export default {
'demoId': 'show-total-loading',
'name': { 'zh-CN': '总条数加载中', 'en-US': 'Number of page buttons' },
'desc': {
'zh-CN': '<p> <code>show-total-loading</code> 可以设置总条数是否加载中。</p>',
'zh-CN': '<p>通过 <code>show-total-loading</code> 设置总条数是否加载中。</p>',
'en-US': '<p> <code>pager-count</code> Set the number of pages.</p>\n'
},
'codeFiles': ['show-total-loading.vue']
@ -181,7 +160,7 @@ export default {
},
{
'demoId': 'pager-in-grid',
'name': { 'zh-CN': 'Grid 表格分页', 'en-US': 'Pagination Disabled' },
'name': { 'zh-CN': '表格分页', 'en-US': 'Pagination Disabled' },
'desc': {
'zh-CN':
'<p>Grid 表格使用分页组件\n该示例中的 <code>services/getGridMockData</code> 服务需要自行实现，示例模拟了远程服务返回的数据。</p>\n',
@ -189,6 +168,31 @@ export default {
'<p>The Grid table uses pagination components n In this example, the <code>services/getGridMockData</code> service needs to be self implemented, and the example simulates the data returned by remote services.</p>\n'
},
'codeFiles': ['pager-in-grid.vue']
},
{
'demoId': 'before-page-change',
'name': { 'zh-CN': '分页变更前置处理', 'en-US': 'Pre processing of pagination changes' },
'desc': {
'zh-CN':
'<p>通过 <code>is-before-page-change</code> 开启前置处理特性，翻页或者改变页大小时会触发 <code>before-page-change</code> 事件。事件函数类型为 <a href="#IBeforeChangeEvent">IBeforeChangeEvent</a> ，调用传参中的 <code>callback</code> 继续变更，调用 <code>rollback</code> 中止变更。</p>\n',
'en-US':
'<p>By enabling the pre processing feature through <code>is before page change</code> , the <code>before page change</code> event is triggered when flipping or changing page size. The event function type is <a="#IBeforeChangeEvent">IBeforeChangeEvent</a> , call <code>callback</code> in the passed parameters to continue the change, and call <code>rollback</code> to abort the change.</p>\n'
},
'codeFiles': ['before-page-change.vue']
},
{
'demoId': 'pager-event',
'name': { 'zh-CN': '事件', 'en-US': 'Event' },
'desc': {
'zh-CN': `<p>
当前所在页改变后会触发 <code>current-change</code> 事件。<br />
每页展示条目个数改变后会触发 <code>size-change</code> 事件。<br />
点击上一页按钮改变当前页后触发 <code>prev-click</code> 事件、下一页触发 <code>next-click</code> 事件。<br />
当在最后一页切换每页条目数时会同时触发 <code>current-change</code> 、<code>size-change</code> 两个事件，如果两个事件调用同一函数（比如后台拉取数据），则需要则做防抖处理。
</p>`,
'en-US': '<p> <code>current-change</code> Triggered when the current page number is switched.</p>\n'
},
'codeFiles': ['pager-event.vue']
}
],
apis: [
@ -198,11 +202,11 @@ export default {
'props': [
{
'name': 'align',
'type': 'left | center | right',
'defaultValue': '',
'type': "'left' | 'center' | 'right'",
'defaultValue': "'left'",
'desc': {
'zh-CN': '分页对齐方式。',
'en-US': 'Paging alignment.'
'zh-CN': '分页对齐方式',
'en-US': 'Paging alignment'
},
'demoId': 'align'
},
@ -211,17 +215,17 @@ export default {
'type': 'number',
'defaultValue': '1',
'desc': {
'zh-CN': '当前所在页。',
'en-US': 'The current page.'
'zh-CN': '当前所在页',
'en-US': 'The current page'
},
'demoId': 'current-page'
},
{
'name': 'custom-total',
'type': 'boolean, string',
'type': 'boolean | string',
'defaultValue': 'false',
'desc': {
'zh-CN': '自定义总条数，传值为true时，显示10万+、100万+，传值为字符串则显示传入的字符串',
'zh-CN': '自定义总条数，传值为 true 时，显示10万+、100万+，传值为字符串则显示传入的字符串',
'en-US':
'Maximum number of page buttons to be displayed in the middle in number/complete mode. Number of page buttons. When the total number of pages exceeds the value, the buttons will be collapsed. The value of this attribute can be an odd number ranging from 5 to 21'
},
@ -232,7 +236,7 @@ export default {
'type': 'boolean',
'defaultValue': 'false',
'desc': {
'zh-CN': '禁用分页',
'zh-CN': '是否禁用分页',
'en-US': 'Disabled pager'
},
'demoId': 'disabled-and-size'
@ -252,20 +256,19 @@ export default {
'type': 'boolean',
'defaultValue': 'false',
'desc': {
'zh-CN':
'是否开启前置处理特性。开启后，翻页或者改变页大小不会立即生效，由用户处理业务逻辑，详看事件before-page-change和demo',
'zh-CN': '是否开启前置处理特性，开启后，翻页或者改变页大小不会立即生效，由用户处理业务逻辑',
'en-US':
'Whether to enable the preprocessing feature. After opening, flipping or changing the page size will not take effect immediately. The user handles the business logic, as detailed in the events before page change and demo'
'Whether to enable the preprocessing feature. After opening, flipping or changing the page size will not take effect immediately. The user handles the business logic'
},
'demoId': 'before-page-change'
},
{
'name': 'layout',
'type': 'string',
'defaultValue': 'total, prev, pager, next, jumper',
'defaultValue': "'total, prev, pager, next, jumper'",
'desc': {
'zh-CN':
'组件布局，子组件名用逗号分隔;该属性的可选值为 sizes, prev, pager, next, jumper, current, total, slot。',
'组件布局，子组件名用英文逗号分隔，子组件类型有 sizes、 prev、 pager、 next、 jumper、 current、 total、 slot',
'en-US':
'Component layout, with sub component names separated by commas; The optional values for this attribute are sizes, preview, pager, next, jumper, current, total, slot.'
},
@ -273,10 +276,10 @@ export default {
},
{
'name': 'mode',
'type': 'number | simple | complete | fixed',
'defaultValue': '',
'type': "'number' | 'simple' | 'complete' | 'fixed'",
'defaultValue': '--',
'desc': {
'zh-CN': '设置分页组件显示模式，此属性优先级大于layout',
'zh-CN': '设置分页组件显示模式，此属性优先级大于 layout',
'en-US': 'Set the display mode of pagination components, which takes priority over layout'
},
'demoId': 'pager-mode'
@ -284,7 +287,7 @@ export default {
{
'name': 'next-text',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '替代图标显示的下一页文字',
'en-US': 'Replace icon display with next page text'
@ -294,10 +297,10 @@ export default {
{
'name': 'page-count',
'type': 'number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN':
'总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性',
'总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能，如果要支持 page-sizes 的更改，则需要使用 total 属性',
'en-US':
'Setting either the total number of pages, total, or page count can achieve the function of displaying page numbers; If you want to support changes to page sizes, you need to use the total attribute'
},
@ -318,7 +321,7 @@ export default {
'type': 'number[]',
'defaultValue': '[10, 20, 30, 40, 50, 100]',
'desc': {
'zh-CN': '设置指定可选择的每页显示条数;每页显示个数选择器的选项设置',
'zh-CN': '设置指定可选择的每页显示条数，每页显示个数选择器的选项设置',
'en-US':
'Set the specified number of selectable display items per page; Option settings for displaying number selectors per page'
},
@ -330,7 +333,7 @@ export default {
'defaultValue': '7',
'desc': {
'zh-CN':
'设置页码按钮需要显示的最多个数;当总页数超过该值时会折叠;该属性的可选值为 大于等于 5 且小于等于 21 的奇数',
'设置页码按钮需要显示的最多个数，当总页数超过该值时会折叠，该属性的合法值为大于等于 5 且小于等于 21 的奇数',
'en-US':
'Set the maximum number of page number buttons to display; When the total number of pages exceeds this value, it will collapse; The optional values for this attribute are odd numbers greater than or equal to 5 and less than or equal to 21'
},
@ -341,7 +344,7 @@ export default {
'type': 'boolean',
'defaultValue': 'true',
'desc': {
'zh-CN': '是否将弹出框插入至 body 元素。可将该属性设置为 false (可参考 select 组件)',
'zh-CN': '是否将弹出框插入至 body 元素，可将该属性设置为 false（可参考 select 组件）',
'en-US':
'Whether to insert the pop-up box into the body element. You can set this attribute to false (refer to the select component)'
},
@ -350,9 +353,9 @@ export default {
{
'name': 'popper-class',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '为 popper 添加类名(可参考 popover 组件)',
'zh-CN': '为 popper 添加类名（可参考 popover 组件）',
'en-US':
'Indicates whether to insert a pop-up box to the body element. If an error occurs in locating a fault in the dialog box that is displayed, set this attribute to false (for details, see the select component).'
},
@ -361,7 +364,7 @@ export default {
{
'name': 'prev-text',
'type': 'string',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '替代图标显示的上一页文字',
'en-US': 'Replace the previous page text displayed by the icon'
@ -373,25 +376,25 @@ export default {
'type': 'boolean',
'defaultValue': 'false',
'desc': {
'zh-CN': '总条数是否加载中',
'zh-CN': '是否显示总条数加载中',
'en-US': 'Is the total number of items being loaded'
},
'demoId': 'show-total-loading'
},
{
'name': 'size',
'type': 'mini',
'defaultValue': '',
'type': "'mini'",
'defaultValue': '--',
'desc': {
'zh-CN': '定义分页尺寸，该属性的可选值为 mini',
'en-US': 'Define the page size, and the optional value for this attribute is mini'
'zh-CN': '定义分页尺寸',
'en-US': 'Define the page size'
},
'demoId': 'disabled-and-size'
},
{
'name': 'total',
'type': 'number',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '总条目数',
'en-US': 'Total number of entries'
@ -402,64 +405,64 @@ export default {
'events': [
{
'name': 'before-page-change',
'type': 'IBeforeChangeFunc',
'typeAnchorName': 'IBeforeChangeFunc',
'defaultValue': '',
'type': 'IBeforeChangeEvent',
'typeAnchorName': 'IBeforeChangeEvent',
'defaultValue': '--',
'desc': {
'zh-CN':
'当is-before-page-change设置为true后，翻页或改变页大小前会触发此事件，用户可以在参数中获取相应事件和分页相关信息控制后续逻辑，详见demo',
'当 is-before-page-change 设置为 true 后，翻页或改变页大小前会触发此事件，用户可以在参数中获取相应事件和分页相关信息控制后续逻辑',
'en-US':
'When the is before page change is set to true, this event will be triggered before flipping or changing the page size. Users can obtain the corresponding event and pagination related information in the parameters to control the subsequent logic. Please refer to the demo for details'
'When the is-before-page-change is set to true, this event will be triggered before flipping or changing the page size. Users can obtain the corresponding event and pagination related information in the parameters to control the subsequent logic'
},
'demoId': 'before-page-change'
},
{
'name': 'current-change',
'type': '(currentPage: number) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': 'currentPage 改变时会触发',
'zh-CN': '当前所在页改变时会触发',
'en-US': 'Triggered when the currentPage changes'
},
'demoId': 'current-change'
'demoId': 'pager-event'
},
{
'name': 'next-click',
'type': '(currentPage: number) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '点击下一页按钮改变当前页后触发',
'en-US': 'Triggered after clicking the next page button to change the current page'
},
'demoId': 'prev-next-click'
'demoId': 'pager-event'
},
{
'name': 'prev-click',
'type': '(currentPage: number) => void',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '点击上一页按钮改变当前页后触发',
'en-US': 'Triggered after clicking the previous page button to change the current page'
},
'demoId': 'prev-next-click'
'demoId': 'pager-event'
},
{
'name': 'size-change',
'type': '() => void',
'defaultValue': '',
'type': '(pageSize: number) => void',
'defaultValue': '--',
'desc': {
'zh-CN': '设置分页跳转后的事件;pageSize 改变时会触发;arg1: pageSize 新的当前值',
'zh-CN': '每页显示条目个数改变后会触发',
'en-US':
'Set the event after pagination. This event is triggered when pageSize changes. arg1: pageSize new current value'
},
'demoId': 'page-size'
'demoId': 'pager-event'
}
],
'slots': [
{
'name': 'default',
'type': '',
'defaultValue': '',
'defaultValue': '--',
'desc': {
'zh-CN': '自定义内容，需要在 layout 中列出 slot',
'en-US': 'User-defined content. Slots must be listed in the layout'
@ -471,11 +474,11 @@ export default {
],
types: [
{
name: 'IBeforeChangeFunc',
name: 'IBeforeChangeEvent',
type: 'interface',
code: `
// 函数接受一个参数
interface IBeforeChangeFunc {
interface IBeforeChangeEvent {
(param: IBeforeChangeParam): void
}
interface IBeforeChangeParam {

24
examples/sites/demos/pc/app/popconfirm/confirm-event-composition-api.vue
View File

@ -1,24 +0,0 @@
<template>
<div>
<tiny-popconfirm :title="title" :content="content" @confirm="handleConfirm">
<template #reference>
<tiny-button>悬浮我提示</tiny-button>
</template>
</tiny-popconfirm>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { Popconfirm as TinyPopconfirm, Button as TinyButton, Modal } from '@opentiny/vue'
const title = ref('这是气泡标题')
const content = ref('这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。')
function handleConfirm() {
Modal.message({
message: 'confirm事件触发了',
status: 'info'
})
}
</script>

18
examples/sites/demos/pc/app/popconfirm/confirm-event.spec.ts
View File

@ -1,18 +0,0 @@
import { test, expect } from '@playwright/test'
test('点击确定按钮事件', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('popconfirm#confirm-event')
const preview = page.locator('#preview')
const popConfirm = preview.locator('.tiny-popconfirm .tiny-popconfirm__reference .tiny-button')
const popConfirmPopover = page.locator('body > .tiny-popconfirm-popover')
const confirmBtn = popConfirmPopover.getByRole('button', { name: '确定' })
const modal = page.locator('body > .tiny-modal').filter({ hasText: 'confirm事件触发了' })
await popConfirm.hover()
await expect(popConfirmPopover).toBeVisible()
await confirmBtn.click()
await expect(popConfirmPopover).not.toBeVisible()
await expect(modal).toBeVisible()
})

34
examples/sites/demos/pc/app/popconfirm/confirm-event.vue
View File

@ -1,34 +0,0 @@
<template>
<div>
<tiny-popconfirm :title="title" :content="content" @confirm="handleConfirm">
<template #reference>
<tiny-button>悬浮我提示</tiny-button>
</template>
</tiny-popconfirm>
</div>
</template>
<script>
import { Popconfirm, Button, Modal } from '@opentiny/vue'
export default {
components: {
TinyPopconfirm: Popconfirm,
TinyButton: Button
},
data() {
return {
title: '这是气泡标题',
content: '这是气泡确认框提示内容文本描述，这是两行内容的展示样式，文本内容很长很长。'
}
},
methods: {
handleConfirm() {
Modal.message({
message: 'confirm事件触发了',
status: 'info'
})
}
}
}
</script>

9
examples/sites/demos/pc/app/popconfirm/visible-event-composition-api.vue → examples/sites/demos/pc/app/popconfirm/event-composition-api.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<tiny-popconfirm :title="title" :content="content" @show="show" @hide="hide">
<tiny-popconfirm :title="title" :content="content" @show="show" @hide="hide" @confirm="confirm">
<template #reference>
<tiny-button>悬浮我提示</tiny-button>
</template>
@ -28,4 +28,11 @@ function hide() {
message: 'hide事件触发了'
})
}
function confirm() {
Modal.message({
status: 'info',
message: 'confirm事件触发了'
})
}
</script>

Some files were not shown because too many files have changed in this diff Show More