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

docs(site): [detail-page, scroll-text] Improve documentation (#1109)

This commit is contained in:
yoyo 2023-12-13 09:23:06 +08:00 committed by GitHub
parent 8982c7fa34
commit 137d09a106
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 115 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
examples/sites/demos/pc/app/detail-page/basic-usage-composition-api.vue
View File

@ -2,7 +2,7 @@
<tiny-detail-page v-model="value"></tiny-detail-page>
</template>
<script setup lang="jsx">
<script setup>
import { ref } from 'vue'
import { DetailPage as TinyDetailPage } from '@opentiny/vue'

2
examples/sites/demos/pc/app/detail-page/basic-usage.vue
View File

@ -2,7 +2,7 @@
<tiny-detail-page v-model="value"></tiny-detail-page>
</template>
<script lang="jsx">
<script>
import { DetailPage } from '@opentiny/vue'
export default {

23
examples/sites/demos/pc/app/detail-page/custom-show-text-composition-api.vue
View File

@ -1,42 +1,41 @@
<template>
<tiny-detail-page
v-model="value"
title="数据："
text-split="--"
dialog-title="个性化"
label-title="文本字段"
value-title="勾选隐藏"
title="表头详情"
text-split="-"
dialog-title="表头设置"
label-title="表头名称"
value-title="是否隐藏"
tips="不能全部隐藏"
save-button="修改数据"
cancel-button="取消修改"
></tiny-detail-page>
</template>
<script setup lang="jsx">
<script setup>
import { ref } from 'vue'
import { DetailPage as TinyDetailPage } from '@opentiny/vue'
const value = ref([
{
label: '标题1',
value: '测试文本1'
value: '描述1'
},
{
label: '标题2',
value: '测试文本2',
hidden: true
value: '描述2'
},
{
label: '标题3',
value: '测试文本3'
value: '描述3'
},
{
label: '标题4',
value: '测试文本4'
value: '描述4'
},
{
label: '标题5',
value: '测试文本5'
value: '描述5'
}
])
</script>

12
examples/sites/demos/pc/app/detail-page/custom-show-text.spec.ts
View File

@ -3,16 +3,14 @@ import { test, expect } from '@playwright/test'
test('自定义展示文本', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('detail-page#custom-show-text')
await expect(
page.getByText('数据：标题1--测试文本1标题2--测试文本2标题3--测试文本3标题4--测试文本4标题5--测试文本5')
).toBeVisible()
await expect(page.getByText('表头详情标题1-描述1标题2-描述2标题3-描述3标题4')).toBeVisible()
await page
.locator('div')
.filter({ hasText: /^数据：$/ })
.filter({ hasText: /^表头详情$/ })
.getByRole('img')
.click()
await expect(page.getByText('个性化', { exact: true })).toBeVisible()
await expect(page.getByText('文本字段')).toBeVisible()
await expect(page.getByText('勾选隐藏')).toBeVisible()
await expect(page.getByText('表头设置', { exact: true })).toBeVisible()
await expect(page.getByText('表头名称')).toBeVisible()
await expect(page.getByText('是否隐藏')).toBeVisible()
await expect(page.getByRole('button', { name: '取消修改' })).toBeVisible()
})

23
examples/sites/demos/pc/app/detail-page/custom-show-text.vue
View File

@ -1,18 +1,18 @@
<template>
<tiny-detail-page
v-model="value"
title="数据："
text-split="--"
dialog-title="个性化"
label-title="文本字段"
value-title="勾选隐藏"
title="表头详情"
text-split="-"
dialog-title="表头设置"
label-title="表头名称"
value-title="是否隐藏"
tips="不能全部隐藏"
save-button="修改数据"
cancel-button="取消修改"
></tiny-detail-page>
</template>
<script lang="jsx">
<script>
import { DetailPage } from '@opentiny/vue'
export default {
@ -24,24 +24,23 @@ export default {
value: [
{
label: '标题1',
value: '测试文本1'
value: '描述1'
},
{
label: '标题2',
value: '测试文本2',
hidden: true
value: '描述2'
},
{
label: '标题3',
value: '测试文本3'
value: '描述3'
},
{
label: '标题4',
value: '测试文本4'
value: '描述4'
},
{
label: '标题5',
value: '测试文本5'
value: '描述5'
}
]
}

62
examples/sites/demos/pc/app/detail-page/webdoc/detail-page.js
View File

@ -6,9 +6,16 @@ export default {
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': {
'zh-CN': '<p>在数据对象中可设置 <code>hidden: true</code> 来指定默认隐藏的数据。</p>\n',
'en-US':
'<p>You can set <code>hidden: true</code> in the data object to specify the data to be hidden by default. </p>\n'
'zh-CN': `<p>
<div>通过 <code> modelValue / v-model</code> 设置要显示的数据。</div>
<div>在每个数据对象中可设置 <code>hidden: true</code> 来指定默认隐藏的数据。</div>
<div>用户点击组件右上角的图标可以弹出个性化弹窗，弹窗里能选择是否隐藏指定数据。</div>
</p>`,
'en-US': `<p>
<div> Sets the data to be displayed with <code> modelValue/v-model</code>. </div>
<div> can set <code>hidden: true</code> in each data object to specify the default hidden data. </div>
<div> The user clicks the icon in the upper right corner of the component to pop up a personalized popup window, which can choose whether to hide the specified data. </div>
</p>`
},
'codeFiles': ['basic-usage.vue']
},
@ -31,7 +38,8 @@ export default {
'properties': [
{
'name': 'modelValue / v-model',
'type': 'Array',
'type': 'IDetailPageItem[]',
'typeAnchorName': 'IDetailPageItem',
'defaultValue': '',
'desc': { 'zh-CN': '设置表头详情栏的数据', 'en-US': 'Set the data in the table header details column' },
'demoId': ''
@ -41,18 +49,18 @@ export default {
'type': 'string',
'defaultValue': '',
'desc': {
'zh-CN': "详情栏标题;默认为 '带表头的详情栏'",
'en-US': 'Details column title; The default value is Detail Bar with Table Header.'
'zh-CN': `详情栏标, 默认为 '数据'`,
'en-US': `Details field, default value is' Data '`
},
'demoId': 'custom-show-text'
},
{
'name': 'text-split',
'type': 'string',
'defaultValue': '',
'defaultValue': `'---'`,
'desc': {
'zh-CN': "详情栏标题分隔符;默认为 ':'",
'en-US': "Details column title separator; The default value is ':'"
'zh-CN': `详情栏标题分隔符`,
'en-US': 'Details column title separator'
},
'demoId': 'custom-show-text'
},
@ -61,8 +69,8 @@ export default {
'type': 'string',
'defaultValue': '',
'desc': {
'zh-CN': "个性化弹窗标题;默认为 '个性化设置'",
'en-US': "Personalized pop-up window title; Default to'Personalization'"
'zh-CN': "个性化弹窗标题，默认为 '个性化标题'",
'en-US': "Personalize pop-up title, default is'Personalized title'"
},
'demoId': 'custom-show-text'
},
@ -71,8 +79,8 @@ export default {
'type': 'string',
'defaultValue': '',
'desc': {
'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '字段'",
'en-US': "Personalized pop-up window header text title bar field; The default value is'Field'"
'zh-CN': "个性化弹窗表头文本标题栏字段;默认为 '文本字段'",
'en-US': "Personalized pop-up window header text title bar field, The default value is 'Title'"
},
'demoId': 'custom-show-text'
},
@ -81,8 +89,8 @@ export default {
'type': 'string',
'defaultValue': '',
'desc': {
'zh-CN': "提示不能全部隐藏的提示语;默认为 '至少显示一个'",
'en-US': "Prompt message that cannot be completely hidden; The default value is'At least one is displayed'"
'zh-CN': "提示不能全部隐藏的提示语，默认为 '不能全部隐藏'",
'en-US': "Prompt message that cannot be completely hidden, The default value is 'Cannot hide all' "
},
'demoId': 'custom-show-text'
},
@ -91,8 +99,9 @@ export default {
'type': 'string',
'defaultValue': '',
'desc': {
'zh-CN': "个性化弹窗表头文本操作栏字段;默认为 '隐藏'",
'en-US': "Personalized pop-up window header text operation column field; The default value is'hidden'"
'zh-CN': "个性化弹窗表头文本操作栏字段，默认为 '勾选隐藏'",
'en-US':
"Personalized pop-up window header text operation column field, The default value is'Click to hide'"
},
'demoId': 'custom-show-text'
},
@ -101,8 +110,8 @@ export default {
'type': 'string',
'defaultValue': '',
'desc': {
'zh-CN': "个性化弹窗确定按钮的文本;默认为 '确 定'",
'en-US': "Text of the confirmation button in the personalized pop-up window; The default value is'OK'"
'zh-CN': "个性化弹窗确定按钮的文本，默认为 '确定'",
'en-US': "Text of the confirmation button in the personalized pop-up window, The default value is'Confirm'"
},
'demoId': 'custom-show-text'
},
@ -111,8 +120,8 @@ export default {
'type': 'string',
'defaultValue': '',
'desc': {
'zh-CN': "个性化弹窗取消按钮的文本;默认为 '取 消'",
'en-US': "Text of the cancel button in the personalized pop-up window; The default value is'Cancel'"
'zh-CN': "个性化弹窗取消按钮的文本，默认为 '取消'",
'en-US': "Text of the cancel button in the personalized pop-up window, The default value is'Cancel'"
},
'demoId': 'custom-show-text'
}
@ -120,5 +129,16 @@ export default {
'events': [],
'slots': []
}
],
types: [
{
name: 'IDetailPageItem',
type: 'interface',
code: `interface IDetailPageItem {
label: string
value: string
hidden?: boolean
}`
}
]
}

2
examples/sites/demos/pc/app/scroll-text/basic-usage-composition-api.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-scroll-text></tiny-scroll-text>
<tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
</template>
<script setup lang="jsx">

2
examples/sites/demos/pc/app/scroll-text/basic-usage.spec.ts
View File

@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('scroll-text#basic-usage')
await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-name', 'moveLeft')
await expect(page.getByText('设置 text 自定义滚动的文本内容')).toBeVisible()
})

2
examples/sites/demos/pc/app/scroll-text/basic-usage.vue
View File

@ -1,5 +1,5 @@
<template>
<tiny-scroll-text></tiny-scroll-text>
<tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
</template>
<script lang="jsx">

7
examples/sites/demos/pc/app/scroll-text/custom-scroll-text-composition-api.vue
View File

@ -1,7 +0,0 @@
<template>
<tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
</template>
<script setup lang="jsx">
import { ScrollText as TinyScrollText } from '@opentiny/vue'
</script>

7
examples/sites/demos/pc/app/scroll-text/custom-scroll-text.spec.ts
View File

@ -1,7 +0,0 @@
import { test, expect } from '@playwright/test'
test('自定义文本内容', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('scroll-text#custom-scroll-text')
await expect(page.getByText('设置 text 自定义滚动的文本内容')).toBeVisible()
})

13
examples/sites/demos/pc/app/scroll-text/custom-scroll-text.vue
View File

@ -1,13 +0,0 @@
<template>
<tiny-scroll-text text="设置 text 自定义滚动的文本内容"></tiny-scroll-text>
</template>
<script lang="jsx">
import { ScrollText } from '@opentiny/vue'
export default {
components: {
TinyScrollText: ScrollText
}
}
</script>

2
examples/sites/demos/pc/app/scroll-text/custom-text-style-composition-api.vue
View File

@ -2,7 +2,7 @@
<tiny-scroll-text class="scrollclass"></tiny-scroll-text>
</template>
<script setup lang="jsx">
<script setup>
import { ScrollText as TinyScrollText } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/scroll-text/custom-text-style.vue
View File

@ -2,7 +2,7 @@
<tiny-scroll-text class="scrollclass"></tiny-scroll-text>
</template>
<script lang="jsx">
<script>
import { ScrollText } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/scroll-text/hover-stop-composition-api.vue
View File

@ -2,6 +2,6 @@
<tiny-scroll-text :hover-stop="true">设置 hover-stop 为 false 鼠标悬停后不会停止滚动</tiny-scroll-text>
</template>
<script setup lang="jsx">
<script setup>
import { ScrollText as TinyScrollText } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/scroll-text/hover-stop.spec.ts
View File

@ -4,5 +4,5 @@ test('鼠标悬停时文本停止滚动', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('scroll-text#hover-stop')
await page.locator('.tiny-scroll-text__content').dispatchEvent('mouseenter')
await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-play-state', 'paused')
await expect(page.locator('.tiny-scroll-text__content > div')).toHaveCSS('animation-play-state', 'paused')
})

2
examples/sites/demos/pc/app/scroll-text/hover-stop.vue
View File

@ -2,7 +2,7 @@
<tiny-scroll-text :hover-stop="true">设置 hover-stop 为 false 鼠标悬停后不会停止滚动</tiny-scroll-text>
</template>
<script lang="jsx">
<script>
import { ScrollText } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/scroll-text/scroll-direction-composition-api.vue
View File

@ -10,6 +10,6 @@
</div>
</template>
<script setup lang="jsx">
<script setup>
import { ScrollText as TinyScrollText } from '@opentiny/vue'
</script>

8
examples/sites/demos/pc/app/scroll-text/scroll-direction.spec.ts
View File

@ -3,8 +3,8 @@ import { test, expect } from '@playwright/test'
test('文字滚动方向', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('scroll-text#scroll-direction')
await expect(page.locator('.tiny-scroll-text__content').nth(0)).toHaveCSS('animation-name', 'moveLeft')
await expect(page.locator('.tiny-scroll-text__content').nth(1)).toHaveCSS('animation-name', 'moveRight')
await expect(page.locator('.tiny-scroll-text__content').nth(2)).toHaveCSS('animation-name', 'moveUp')
await expect(page.locator('.tiny-scroll-text__content').nth(3)).toHaveCSS('animation-name', 'moveDown')
await expect(page.locator('.tiny-scroll-text__content > div').nth(0)).toHaveCSS('animation-name', 'moveLeft')
await expect(page.locator('.tiny-scroll-text__content > div').nth(1)).toHaveCSS('animation-name', 'moveRight')
await expect(page.locator('.tiny-scroll-text__content > div').nth(2)).toHaveCSS('animation-name', 'moveUp')
await expect(page.locator('.tiny-scroll-text__content > div').nth(3)).toHaveCSS('animation-name', 'moveDown')
})

2
examples/sites/demos/pc/app/scroll-text/scroll-direction.vue
View File

@ -10,7 +10,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { ScrollText } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/scroll-text/scroll-time-composition-api.vue
View File

@ -2,6 +2,6 @@
<tiny-scroll-text :time="10">设置 time 自定义滚动所用的时间为 10s</tiny-scroll-text>
</template>
<script setup lang="jsx">
<script setup>
import { ScrollText as TinyScrollText } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/scroll-text/scroll-time.spec.ts
View File

@ -3,5 +3,5 @@ import { test, expect } from '@playwright/test'
test('滚动时间间隔', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('scroll-text#scroll-time')
await expect(page.locator('.tiny-scroll-text__content')).toHaveCSS('animation-duration', '10s')
await expect(page.locator('.tiny-scroll-text__content > div')).toHaveCSS('animation-duration', '10s')
})

2
examples/sites/demos/pc/app/scroll-text/scroll-time.vue
View File

@ -2,7 +2,7 @@
<tiny-scroll-text :time="10">设置 time 自定义滚动所用的时间为 10s</tiny-scroll-text>
</template>
<script lang="jsx">
<script>
import { ScrollText } from '@opentiny/vue'
export default {

2
examples/sites/demos/pc/app/scroll-text/slots-composition-api.vue
View File

@ -6,6 +6,6 @@
</div>
</template>
<script setup lang="jsx">
<script setup>
import { ScrollText as TinyScrollText } from '@opentiny/vue'
</script>

2
examples/sites/demos/pc/app/scroll-text/slots.vue
View File

@ -6,7 +6,7 @@
</div>
</template>
<script lang="jsx">
<script>
import { ScrollText } from '@opentiny/vue'
export default {

58
examples/sites/demos/pc/app/scroll-text/webdoc/scroll-text.js
View File

@ -5,7 +5,10 @@ export default {
{
'demoId': 'basic-usage',
'name': { 'zh-CN': '基本用法', 'en-US': 'Basic Usage' },
'desc': { 'zh-CN': '详细用法参考如下示例', 'en-US': 'For details, see the following example.' },
'desc': {
'zh-CN': '可通过 text 自定义文本内容。',
'en-US': 'You can use <code>text</code> to customize the text content. '
},
'codeFiles': ['basic-usage.vue']
},
{
@ -27,24 +30,6 @@ export default {
},
'codeFiles': ['hover-stop.vue']
},
{
'demoId': 'custom-scroll-text',
'name': { 'zh-CN': '自定义文本内容', 'en-US': 'Custom Text Content' },
'desc': {
'zh-CN': '<p>可通过 <code>text</code> 自定义文本内容。</p>\n',
'en-US': '<p>You can use <code>text</code> to customize the text content. </p>\n'
},
'codeFiles': ['custom-scroll-text.vue']
},
{
'demoId': 'slots',
'name': { 'zh-CN': '通过 solt 插槽自定义文本内容', 'en-US': 'Customize the text content through the Solt slot' },
'desc': {
'zh-CN': '<p>可通过 solt 插槽自定义文本内容。</p>\n',
'en-US': '<p>You can customize the text content through the solt slot. </p>\n'
},
'codeFiles': ['slots.vue']
},
{
'demoId': 'scroll-time',
'name': { 'zh-CN': '滚动时间间隔', 'en-US': 'Scrolling Interval' },
@ -62,6 +47,15 @@ export default {
'en-US': '<p>You can use <code>class</code> to customize the text style. </p>\n'
},
'codeFiles': ['custom-text-style.vue']
},
{
'demoId': 'slots',
'name': { 'zh-CN': '插槽', 'en-US': 'Solt' },
'desc': {
'zh-CN': '<p>可通过 solt 插槽自定义文本内容。</p>\n',
'en-US': '<p>You can customize the text content through the solt slot. </p>\n'
},
'codeFiles': ['slots.vue']
}
],
apis: [
@ -71,40 +65,40 @@ export default {
'properties': [
{
'name': 'direction',
'type': 'string',
'defaultValue': '该属性的默认值为 left',
'type': `'up' | 'left' | 'down' | 'right'`,
'defaultValue': `'left'`,
'desc': {
'zh-CN': '滚动的方向;该属性的可选值为 up / left / down / right',
'en-US': 'Scrolling direction; The optional values of this attribute are up / left / down / right'
'zh-CN': '滚动的方向',
'en-US': 'Scrolling direction'
},
'demoId': 'scroll-direction'
},
{
'name': 'hover-stop',
'type': 'boolean',
'defaultValue': '该属性的默认值为 true',
'defaultValue': 'true',
'desc': {
'zh-CN': 'hover 滚动是否停止，可选值为 false 或 true；默认值true。',
'en-US': 'Whether to stop scrolling. The value can be false or true. The default value is true.'
'zh-CN': 'hover 滚动是否停止',
'en-US': 'Whether to stop scrolling.'
},
'demoId': 'hover-stop'
},
{
'name': 'time',
'type': 'number',
'defaultValue': '该属性的默认值为 5',
'defaultValue': '5',
'desc': {
'zh-CN': '整个滚动过程所用的时间，默认值 5s 。',
'en-US': 'Time taken for scrolling. The default value is 5s.'
'zh-CN': '整个滚动过程所用的时间',
'en-US': 'Time taken for scrolling'
},
'demoId': 'scroll-time'
},
{
'name': 'text',
'type': 'string',
'defaultValue': '该属性的默认值为 ScrollText',
'defaultValue': `'ScrollText'`,
'desc': { 'zh-CN': '滚动的文本内容', 'en-US': 'Scrolled text content' },
'demoId': 'custom-scroll-text'
'demoId': 'basic-usage'
}
],
'events': [],
@ -113,7 +107,7 @@ export default {
'name': 'default',
'type': '',
'defaultValue': '',
'desc': { 'zh-CN': '默认插槽', 'en-US': 'Default slot' },
'desc': { 'zh-CN': '默认插槽，滚动的内容的插槽', 'en-US': 'Default slot, the slot for scrolling content' },
'demoId': 'custom-scroll-text'
}
]