Elina
/
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>
<div>
<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>
</template>
@ -13,7 +13,7 @@ const loadingInstance = ref(null)
onMounted(() => {
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 }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
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 page.getByRole('button', { name: 'close Loading' }).click()
await expect(loading).not.toBeVisible()

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

@ -1,7 +1,7 @@
<template>
<div>
<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>
</template>
@ -16,7 +16,7 @@ export default {
},
mounted() {
this.loadingInstance = Loading.service({
target: document.getElementById('tiny-loading1')
target: document.getElementById('tiny-basic-loading1')
})
},
methods: {

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

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

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

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