docs(grid): [grid] add grid custom loading demos and api (#1048)
This commit is contained in:
parent
90daec33cf
commit
0979b800f7
|
@ -2,7 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<tiny-button @click="init">重试</tiny-button>
|
<tiny-button @click="init">重试</tiny-button>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
<tiny-grid :data="tableData">
|
<tiny-grid :data="tableData" :loading-component="loadingComponent()" :loading="loading">
|
||||||
<tiny-grid-column type="index" width="5%"></tiny-grid-column>
|
<tiny-grid-column type="index" width="5%"></tiny-grid-column>
|
||||||
<tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
|
<tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
|
||||||
<tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
|
<tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
|
||||||
|
@ -17,9 +17,7 @@ import { Grid as TinyGrid, GridColumn as TinyGridColumn, Button as TinyButton }
|
||||||
const tableData = ref([])
|
const tableData = ref([])
|
||||||
const loading = ref(true)
|
const loading = ref(true)
|
||||||
|
|
||||||
init()
|
const init = () => {
|
||||||
|
|
||||||
function init() {
|
|
||||||
tableData.value = []
|
tableData.value = []
|
||||||
loading.value = true
|
loading.value = true
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
@ -53,4 +51,31 @@ function init() {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
}, 2000)
|
}, 2000)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
init()
|
||||||
|
|
||||||
|
const loadingComponent = () => (
|
||||||
|
<div class="custom-loading">
|
||||||
|
<span>正在加载中。。。</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.custom-loading {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
z-index: 999;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.custom-loading[visible='false'] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { test, expect } from '@playwright/test'
|
||||||
|
|
||||||
|
test('自定义表格加载', async ({ page }) => {
|
||||||
|
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
||||||
|
await page.goto('grid-loading#loading-grid-custom-loading')
|
||||||
|
await expect(page.getByText('正在加载中。。。')).toBeVisible()
|
||||||
|
})
|
|
@ -2,7 +2,7 @@
|
||||||
<div>
|
<div>
|
||||||
<tiny-button @click="init">重试</tiny-button>
|
<tiny-button @click="init">重试</tiny-button>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
<tiny-grid :data="tableData">
|
<tiny-grid :data="tableData" :loading-component="loadingComponent()" :loading="loading">
|
||||||
<tiny-grid-column type="index" width="5%"></tiny-grid-column>
|
<tiny-grid-column type="index" width="5%"></tiny-grid-column>
|
||||||
<tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
|
<tiny-grid-column field="name" title="名称" sortable></tiny-grid-column>
|
||||||
<tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
|
<tiny-grid-column field="city" title="城市" sortable></tiny-grid-column>
|
||||||
|
@ -29,6 +29,13 @@ export default {
|
||||||
this.init()
|
this.init()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
loadingComponent() {
|
||||||
|
return (
|
||||||
|
<div class="custom-loading">
|
||||||
|
<span>正在加载中。。。</span>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
},
|
||||||
init() {
|
init() {
|
||||||
this.tableData = []
|
this.tableData = []
|
||||||
this.loading = true
|
this.loading = true
|
||||||
|
@ -66,3 +73,22 @@ export default {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.custom-loading {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 20px;
|
||||||
|
z-index: 999;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
.custom-loading[visible='false'] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,8 +0,0 @@
|
||||||
import { test, expect } from '@playwright/test'
|
|
||||||
|
|
||||||
test('关闭加载中状态', async ({ page }) => {
|
|
||||||
page.on('pageerror', (exception) => expect(exception).toBeNull())
|
|
||||||
await page.goto('grid-loading#loading-grid-loading-off-tip')
|
|
||||||
await page.getByRole('button', { name: '重试' }).click()
|
|
||||||
await expect(page.getByText('暂无数据')).toBeVisible()
|
|
||||||
})
|
|
|
@ -3,19 +3,23 @@ export default {
|
||||||
owner: '',
|
owner: '',
|
||||||
demos: [
|
demos: [
|
||||||
{
|
{
|
||||||
'demoId': 'loading-grid-loading-off-tip',
|
'demoId': 'loading-grid-custom-loading',
|
||||||
'name': { 'zh-CN': '关闭加载中状态', 'en-US': 'Disable loading status' },
|
'name': { 'zh-CN': '自定义表格加载', 'en-US': 'Disable loading status' },
|
||||||
'desc': {
|
'desc': {
|
||||||
'zh-CN': '<p>表格属性设置 <code>loading</code> 开启或关闭加载状态,默认值为 <code>false</code> 不开启。</p>\n',
|
'zh-CN':
|
||||||
|
'<p>通过表格属性设置 <code>loading</code> 开启或关闭加载状态,默认值为 <code>false</code> 不开启。通过表格属性设置 <code>loadingComponent</code> 可以自定义表格加载中 <code>dom</code> 结构。</p>\n',
|
||||||
'en-US':
|
'en-US':
|
||||||
'<p>Table attribute setting <code>loading</code> Enables or disables loading. The default value is <code>false</code>. </p>\n'
|
'<p>Table attribute setting <code>loading</code> Enables or disables loading. The default value is <code>false</code>. </p>\n'
|
||||||
},
|
},
|
||||||
'codeFiles': ['loading/grid-loading-off-tip.vue']
|
'codeFiles': ['loading/grid-custom-loading.vue']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'demoId': 'loading-grid-loading-tip',
|
'demoId': 'loading-grid-loading-tip',
|
||||||
'name': { 'zh-CN': '开启加载中状态', 'en-US': 'Enable loading status' },
|
'name': { 'zh-CN': '开启加载中状态', 'en-US': 'Enable loading status' },
|
||||||
'desc': { 'zh-CN': '详细用法参考如下示例:', 'en-US': 'For details, see the following example.' },
|
'desc': {
|
||||||
|
'zh-CN': '通过表格属性设置 <code>loading</code> 开启加载状态。',
|
||||||
|
'en-US': 'For details, see the following example.'
|
||||||
|
},
|
||||||
'codeFiles': ['loading/grid-loading-tip.vue']
|
'codeFiles': ['loading/grid-loading-tip.vue']
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
|
|
@ -369,7 +369,14 @@ export default {
|
||||||
'type': 'boolean',
|
'type': 'boolean',
|
||||||
'defaultValue': 'true',
|
'defaultValue': 'true',
|
||||||
'desc': { 'zh-CN': '表格是否显示加载中', 'en-US': 'Whether the table is being loaded.' },
|
'desc': { 'zh-CN': '表格是否显示加载中', 'en-US': 'Whether the table is being loaded.' },
|
||||||
'demoId': 'grid-loading#loading-grid-loading-off-tip'
|
'demoId': 'grid-loading#loading-grid-loading-tip'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
'name': 'loading-component',
|
||||||
|
'type': 'VueComponent',
|
||||||
|
'defaultValue': '--',
|
||||||
|
'desc': { 'zh-CN': '自定义表格loading', 'en-US': 'Whether the table is being loaded.' },
|
||||||
|
'demoId': 'grid-loading#grid-custom-loading'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
'name': 'max-height',
|
'name': 'max-height',
|
||||||
|
|
Loading…
Reference in New Issue