forked from opentiny/tiny-vue
docs(site/loading): [loading] specification document (#1338)
This commit is contained in:
yoyo
GitHub
parent
02dc3e63d7
commit
dda2f4fe6c
|
|
@ -8,7 +8,7 @@ import { Loading } from '@opentiny/vue'
|
|||
|
||||
onMounted(() => {
|
||||
Loading.service({
|
||||
text: '自定义loading类名',
|
||||
text: '自定义 loading 类名',
|
||||
customClass: 'new-loading',
|
||||
target: document.getElementById('tiny-demo-loading-custom-class'),
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { Loading } from '@opentiny/vue'
|
|||
export default {
|
||||
mounted() {
|
||||
Loading.service({
|
||||
text: '自定义loading类名',
|
||||
text: '自定义 loading 类名',
|
||||
customClass: 'new-loading',
|
||||
target: document.getElementById('tiny-demo-loading-custom-class'),
|
||||
background: 'rgba(0, 0, 0, 0.7)'
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="handleClick" v-loading.lock.fullscreen="fullscreenLoading">
|
||||
指令方式加载全屏Loading
|
||||
指令方式加载全屏 Loading
|
||||
</tiny-button>
|
||||
<tiny-button @click="handleClick2">静态方法加载全屏Loading</tiny-button>
|
||||
<tiny-button @click="handleClick2">静态方法加载全屏 Loading</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, getCurrentInstance } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
import { Button as TinyButton, Loading } from '@opentiny/vue'
|
||||
|
||||
const vLoading = Loading.directive
|
||||
|
|
@ -23,7 +23,7 @@ function handleClick() {
|
|||
}
|
||||
|
||||
function handleClick2() {
|
||||
const loading = Loading.service({
|
||||
const loading = Loading.service({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
background: 'rgba(0, 0, 0, 0.8)'
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@ import { test, expect } from '@playwright/test'
|
|||
test('全局加载', async ({ page }) => {
|
||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||
await page.goto('loading#fullscreen')
|
||||
await page.getByRole('button', { name: '指令方式加载全屏Loading' }).click()
|
||||
await page.getByRole('button', { name: '指令方式加载全屏 Loading' }).click()
|
||||
const vLoading = page.locator('.circular')
|
||||
await expect(vLoading).toBeVisible()
|
||||
|
||||
await page.getByRole('button', { name: '静态方法加载全屏Loading' }).click()
|
||||
await page.getByRole('button', { name: '静态方法加载全屏 Loading' }).click()
|
||||
const sLoading = page.getByText('Loading', { exact: true })
|
||||
await expect(sLoading).toBeVisible()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div>
|
||||
<tiny-button @click="handleClick" v-loading.lock.fullscreen="fullscreenLoading">
|
||||
指令方式加载全屏Loading
|
||||
指令方式加载全屏 Loading
|
||||
</tiny-button>
|
||||
<tiny-button @click="handleClick2">静态方法加载全屏Loading</tiny-button>
|
||||
<tiny-button @click="handleClick2">静态方法加载全屏 Loading</tiny-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ export default {
|
|||
}, 2500)
|
||||
},
|
||||
handleClick2() {
|
||||
const loading = Loading.service({
|
||||
const loading = Loading.service({
|
||||
lock: true,
|
||||
text: 'Loading',
|
||||
background: 'rgba(0, 0, 0, 0.8)'
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ const spinnerIcon = iconLoadingShadow()
|
|||
|
||||
onMounted(() => {
|
||||
Loading.service({
|
||||
text: '自定义loading图标',
|
||||
text: '自定义 loading 图标',
|
||||
spinner: spinnerIcon,
|
||||
target: document.getElementById('tiny-demo-loading-spinner'),
|
||||
target: document.getElementById('tiny-demo-loading-spinner')
|
||||
})
|
||||
})
|
||||
</script>
|
||||
|
|
@ -23,4 +23,4 @@ onMounted(() => {
|
|||
margin-bottom: 10px;
|
||||
height: 120px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,6 @@ test('自定义加载图标', async ({ page }) => {
|
|||
const loadingText = page.locator('.tiny-loading__text')
|
||||
|
||||
const svg = page.locator('#tiny-demo-loading-spinner .tiny-icon-loading')
|
||||
await expect(loadingText).toContainText('自定义loading图标')
|
||||
await expect(loadingText).toContainText('自定义 loading 图标')
|
||||
await expect(svg).toHaveClass(/tiny-icon-loading/)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@ const spinnerIcon = iconLoadingShadow()
|
|||
export default {
|
||||
mounted() {
|
||||
Loading.service({
|
||||
text: '自定义loading图标',
|
||||
text: '自定义 loading 图标',
|
||||
spinner: spinnerIcon,
|
||||
target: document.getElementById('tiny-demo-loading-spinner'),
|
||||
target: document.getElementById('tiny-demo-loading-spinner')
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@ export default {
|
|||
'demoId': 'size',
|
||||
'name': { 'zh-CN': '尺寸', 'en-US': 'Customized loading prompt text' },
|
||||
'desc': {
|
||||
'zh-CN': '<p>可通过 size 属性设置尺寸大小，可选值：medium / small / mini。</p>\n',
|
||||
'zh-CN':
|
||||
'<p>可通过 <code>size</code> 属性设置尺寸大小，可选值：<code>medium</code> / <code>small</code> / <code>mini </code>。</p>\n',
|
||||
'en-US': '<p>Customize the prompt text of the loaded text through <code>text</code>. </p>\n'
|
||||
},
|
||||
'codeFiles': ['size.vue']
|
||||
|
|
@ -52,9 +53,8 @@ export default {
|
|||
'demoId': 'directive',
|
||||
'name': { 'zh-CN': '指令', 'en-US': 'Directive' },
|
||||
'desc': {
|
||||
'zh-CN': '详细用法参考如下示例',
|
||||
'en-US':
|
||||
'<p>The <code>v-loading.lock.fullscreen</code> command mode or service mode is used for global loading. To use the command mode for global loading, perform the following operations: \n Add <code>Vue.use(Loading)</code>\n in the <code>Vue 2</code> environment and <code>app.use(Loading)</code></p>\n in the <code>Vue 3</code> environment'
|
||||
'zh-CN': '<p>通过v-loading使用指令。</p>',
|
||||
'en-US': `<p>Use instructions via v-loading</p>`
|
||||
},
|
||||
'codeFiles': ['directive.vue']
|
||||
},
|
||||
|
|
@ -176,6 +176,7 @@ export default {
|
|||
{
|
||||
'name': 'v-loading',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '是否显示加载动画',
|
||||
'en-US': 'Whether to display loading animation'
|
||||
|
|
@ -185,6 +186,7 @@ export default {
|
|||
{
|
||||
'name': 'tiny-loading__text',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '显示在加载图标下方的加载文案',
|
||||
'en-US': 'The load copy displayed below the load icon'
|
||||
|
|
@ -194,6 +196,7 @@ export default {
|
|||
{
|
||||
'name': 'tiny-loading__background',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '遮罩背景色',
|
||||
'en-US': 'Mask background color'
|
||||
|
|
@ -203,6 +206,7 @@ export default {
|
|||
{
|
||||
'name': 'tiny-loading__custom-class',
|
||||
'type': 'string',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': 'Loading 的自定义类名',
|
||||
'en-US': 'Custom class name for Loading'
|
||||
|
|
@ -212,6 +216,7 @@ export default {
|
|||
{
|
||||
'name': 'fullscreen',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '命令修饰符：是否显示全屏',
|
||||
'en-US': 'Command modifier: Whether to display full screen'
|
||||
|
|
@ -221,6 +226,7 @@ export default {
|
|||
{
|
||||
'name': 'body',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '命令修饰符：遮罩层是否在body上',
|
||||
'en-US': 'Command modifier: Whether the mask is on the body'
|
||||
|
|
@ -229,6 +235,7 @@ export default {
|
|||
{
|
||||
'name': 'lock',
|
||||
'type': 'boolean',
|
||||
'defaultValue': '',
|
||||
'desc': {
|
||||
'zh-CN': '命令修饰符：全屏时是否锁定滚动',
|
||||
'en-US': 'Command modifier: Whether to lock scroll in full screen'
|
||||
|
|
|
|||
Loading…
Reference in New Issue