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

fix(doc):Loaing component, rename dom id avioding conflicts(#595) (#597)

This commit is contained in:
chenguang 2023-10-17 16:13:40 +08:00 committed by GitHub
parent a2f2cf746a
commit 0e288244c4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 17 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/sites/demos/pc/app/loading/basic-usage-composition-api.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<button @click="closeLoading">close Loading</button> <button @click="closeLoading">close Loading</button>
<div id="tiny-loading1" style="width: 100%; height: 120px"></div> <div id="tiny-basic-loading1" style="width: 100%; height: 120px"></div>
</div> </div>
</template> </template>
@ -13,7 +13,7 @@ const loadingInstance = ref(null)
onMounted(() => { onMounted(() => {
loadingInstance.value = Loading.service({ loadingInstance.value = Loading.service({
target: document.getElementById('tiny-loading1') target: document.getElementById('tiny-basic-loading1')
}) })
}) })

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

@ -3,7 +3,7 @@ import { test, expect } from '@playwright/test'
test('基本用法', async ({ page }) => { test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull()) page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('http://localhost:7130/pc/loading/basic-usage') await page.goto('http://localhost:7130/pc/loading/basic-usage')
const loading = page.locator('#tiny-loading1 > .tiny-loading > .tiny-loading__spinner > .circular') const loading = page.locator('#tiny-basic-loading1 > .tiny-loading > .tiny-loading__spinner > .circular')
await expect(loading).toBeVisible() await expect(loading).toBeVisible()
await page.getByRole('button', { name: 'close Loading' }).click() await page.getByRole('button', { name: 'close Loading' }).click()
await expect(loading).not.toBeVisible() await expect(loading).not.toBeVisible()

4
examples/sites/demos/pc/app/loading/basic-usage.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<button @click="closeLoading">close Loading</button> <button @click="closeLoading">close Loading</button>
<div id="tiny-loading1" style="width: 100%; height: 120px"></div> <div id="tiny-basic-loading1" style="width: 100%; height: 120px"></div>
</div> </div>
</template> </template>
@ -16,7 +16,7 @@ export default {
}, },
mounted() { mounted() {
this.loadingInstance = Loading.service({ this.loadingInstance = Loading.service({
target: document.getElementById('tiny-loading1') target: document.getElementById('tiny-basic-loading1')
}) })
}, },
methods: { methods: {

12
examples/sites/demos/pc/app/loading/size-composition-api.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div id="tiny-loading1" style="width: 100%; margin-bottom: 10px; height: 120px"></div> <div id="tiny-size-loading1" style="width: 100%; margin-bottom: 10px; height: 120px"></div>
<div id="tiny-loading2" style="width: 100%; margin-bottom: 10px; height: 120px"></div> <div id="tiny-size-loading2" style="width: 100%; margin-bottom: 10px; height: 120px"></div>
<div id="tiny-loading3" style="width: 100%; margin-bottom: 10px; height: 120px"></div> <div id="tiny-size-loading3" style="width: 100%; margin-bottom: 10px; height: 120px"></div>
</div> </div>
</template> </template>
@ -14,15 +14,15 @@ const loadingInstance = ref(null)
onMounted(() => { onMounted(() => {
loadingInstance.value = Loading.service({ loadingInstance.value = Loading.service({
target: document.getElementById('tiny-loading1'), target: document.getElementById('tiny-size-loading1'),
size: 'small' size: 'small'
}) })
loadingInstance.value = Loading.service({ loadingInstance.value = Loading.service({
target: document.getElementById('tiny-loading2'), target: document.getElementById('tiny-size-loading2'),
size: 'medium' size: 'medium'
}) })
loadingInstance.value = Loading.service({ loadingInstance.value = Loading.service({
target: document.getElementById('tiny-loading3'), target: document.getElementById('tiny-size-loading3'),
size: 'large' size: 'large'
}) })
}) })

12
examples/sites/demos/pc/app/loading/size.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div id="tiny-loading1" style="width: 100%; margin-bottom: 10px; height: 120px"></div> <div id="tiny-size-loading1" style="width: 100%; margin-bottom: 10px; height: 120px"></div>
<div id="tiny-loading2" style="width: 100%; margin-bottom: 10px; height: 120px"></div> <div id="tiny-size-loading2" style="width: 100%; margin-bottom: 10px; height: 120px"></div>
<div id="tiny-loading3" style="width: 100%; margin-bottom: 10px; height: 120px"></div> <div id="tiny-size-loading3" style="width: 100%; margin-bottom: 10px; height: 120px"></div>
</div> </div>
</template> </template>
@ -17,15 +17,15 @@ export default {
}, },
mounted() { mounted() {
this.loadingInstance = Loading.service({ this.loadingInstance = Loading.service({
target: document.getElementById('tiny-loading1'), target: document.getElementById('tiny-size-loading1'),
size: 'small' size: 'small'
}) })
this.loadingInstance = Loading.service({ this.loadingInstance = Loading.service({
target: document.getElementById('tiny-loading2'), target: document.getElementById('tiny-size-loading2'),
size: 'medium' size: 'medium'
}) })
this.loadingInstance = Loading.service({ this.loadingInstance = Loading.service({
target: document.getElementById('tiny-loading3'), target: document.getElementById('tiny-size-loading3'),
size: 'large' size: 'large'
}) })
} }