blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-08-08 05:29:45 +08:00
Code Issues Projects Releases Wiki Activity

docs(List): use composition api

Browse Source
This commit is contained in:
chenjiahan 2020-12-13 19:15:07 +08:00
parent 714f0f0d1a
commit b31d605ed4
3 changed files with 177 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/list/README.md
View File

@ -20,37 +20,43 @@ app.use(List);
```html ```html
<van-list <van-list
v-model:loading="loading" v-model:loading="state.loading"
:finished="finished" :finished="state.finished"
finished-text="Finished" finished-text="Finished"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in state.list" :key="item" :title="item" />
</van-list> </van-list>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
list: [], list: [],
loading: false, loading: false,
finished: false, finished: false,
}; });
},
methods: { const onLoad = () => {
onLoad() {
setTimeout(() => { setTimeout(() => {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1); state.list.push(state.list.length + 1);
} }
this.loading = false; state.loading = false;
if (this.list.length >= 40) { if (state.list.length >= 40) {
this.finished = true; state.finished = true;
} }
}, 1000); }, 1000);
}, };
return {
state,
onLoad,
};
}, },
}; };
``` ```
@ -59,30 +65,36 @@ export default {
```html ```html
<van-list <van-list
v-model:loading="loading" v-model:loading="state.loading"
v-model:error="error" v-model:error="state.error"
error-text="Request failed. Click to reload" error-text="Request failed. Click to reload"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in state.list" :key="item" :title="item" />
</van-list> </van-list>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
list: [], list: [],
error: false, error: false,
loading: false, loading: false,
};
},
methods: {
onLoad() {
fetchSomeThing().catch(() => {
this.error = true;
}); });
},
const onLoad = () => {
fetchSomeThing().catch(() => {
state.error = true;
});
};
return {
state,
onLoad,
};
}, },
}; };
``` ```
@ -90,51 +102,59 @@ export default {
### PullRefresh ### PullRefresh
```html ```html
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
<van-list <van-list
v-model:loading="loading" v-model:loading="state.loading"
:finished="finished" :finished="state.finished"
finished-text="Finished" finished-text="Finished"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in state.list" :key="item" :title="item" />
</van-list> </van-list>
</van-pull-refresh> </van-pull-refresh>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
list: [], list: [],
loading: false, loading: false,
finished: false, finished: false,
refreshing: false, refreshing: false,
}; });
},
methods: { const onLoad = () => {
onLoad() {
setTimeout(() => { setTimeout(() => {
if (this.refreshing) { if (state.refreshing) {
this.list = []; state.list = [];
this.refreshing = false; state.refreshing = false;
} }
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1); state.list.push(state.list.length + 1);
} }
this.loading = false; state.loading = false;
if (this.list.length >= 40) { if (state.list.length >= 40) {
this.finished = true; state.finished = true;
} }
}, 1000); }, 1000);
}, };
onRefresh() {
this.finished = false; const onRefresh = () => {
this.loading = true; state.finished = false;
this.onLoad(); state.loading = true;
}, onLoad();
};
return {
state,
onLoad,
onRefresh,
};
}, },
}; };
``` ```

118
src/list/README.zh-CN.md
View File

@ -22,42 +22,48 @@ List 组件通过 `loading` 和 `finished` 两个变量控制加载状态，当
```html ```html
<van-list <van-list
v-model:loading="loading" v-model:loading="state.loading"
:finished="finished" :finished="state.finished"
finished-text="没有更多了" finished-text="没有更多了"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in state.list" :key="item" :title="item" />
</van-list> </van-list>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
list: [], list: [],
loading: false, loading: false,
finished: false, finished: false,
}; });
},
methods: { const onLoad = () => {
onLoad() {
// 异步更新数据 // 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求 // setTimeout 仅做示例，真实场景中一般为 ajax 请求
setTimeout(() => { setTimeout(() => {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1); state.list.push(state.list.length + 1);
} }
// 加载状态结束 // 加载状态结束
this.loading = false; state.loading = false;
// 数据全部加载完成 // 数据全部加载完成
if (this.list.length >= 40) { if (state.list.length >= 40) {
this.finished = true; state.finished = true;
} }
}, 1000); }, 1000);
}, };
return {
state,
onLoad,
};
}, },
}; };
``` ```
@ -68,30 +74,36 @@ export default {
```html ```html
<van-list <van-list
v-model:loading="loading" v-model:loading="state.loading"
v-model:error="error" v-model:error="state.error"
error-text="请求失败，点击重新加载" error-text="请求失败，点击重新加载"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in state.list" :key="item" :title="item" />
</van-list> </van-list>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
list: [], list: [],
error: false, error: false,
loading: false, loading: false,
};
},
methods: {
onLoad() {
fetchSomeThing().catch(() => {
this.error = true;
}); });
},
const onLoad = () => {
fetchSomeThing().catch(() => {
state.error = true;
});
};
return {
state,
onLoad,
};
}, },
}; };
``` ```
@ -101,55 +113,63 @@ export default {
List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果。 List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果。
```html ```html
<van-pull-refresh v-model="refreshing" @refresh="onRefresh"> <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
<van-list <van-list
v-model:loading="loading" v-model:loading="state.loading"
:finished="finished" :finished="state.finished"
finished-text="没有更多了" finished-text="没有更多了"
@load="onLoad" @load="onLoad"
> >
<van-cell v-for="item in list" :key="item" :title="item" /> <van-cell v-for="item in state.list" :key="item" :title="item" />
</van-list> </van-list>
</van-pull-refresh> </van-pull-refresh>
``` ```
```js ```js
import { reactive } from 'vue';
export default { export default {
data() { setup() {
return { const state = reactive({
list: [], list: [],
loading: false, loading: false,
finished: false, finished: false,
refreshing: false, refreshing: false,
}; });
},
methods: { const onLoad = () => {
onLoad() {
setTimeout(() => { setTimeout(() => {
if (this.refreshing) { if (state.refreshing) {
this.list = []; state.list = [];
this.refreshing = false; state.refreshing = false;
} }
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1); state.list.push(state.list.length + 1);
} }
this.loading = false; state.loading = false;
if (this.list.length >= 40) { if (state.list.length >= 40) {
this.finished = true; state.finished = true;
} }
}, 1000); }, 1000);
}, };
onRefresh() {
const onRefresh = () => {
// 清空列表数据 // 清空列表数据
this.finished = false; state.finished = false;
// 重新加载数据 // 重新加载数据
// 将 loading 设置为 true，表示处于加载状态 // 将 loading 设置为 true，表示处于加载状态
this.loading = true; state.loading = true;
this.onLoad(); onLoad();
}, };
return {
state,
onLoad,
onRefresh,
};
}, },
}; };
``` ```

49
src/list/demo/index.vue
View File

@ -38,9 +38,11 @@
</van-tabs> </van-tabs>
</template> </template>
<script> <script lang="ts">
export default { import { reactive, toRefs } from 'vue';
i18n: { import { useTranslate } from '@demo/use-translate';
const i18n = {
'zh-CN': { 'zh-CN': {
errorInfo: '错误提示', errorInfo: '错误提示',
errorText: '请求失败，点击重新加载', errorText: '请求失败，点击重新加载',
@ -53,39 +55,39 @@ export default {
pullRefresh: 'PullRefresh', pullRefresh: 'PullRefresh',
finishedText: 'Finished', finishedText: 'Finished',
}, },
}, };
data() { export default {
return { setup() {
const t = useTranslate(i18n);
const state = reactive({
list: [ list: [
{ {
items: [], items: [] as string[],
refreshing: false, refreshing: false,
loading: false, loading: false,
error: false, error: false,
finished: false, finished: false,
}, },
{ {
items: [], items: [] as string[],
refreshing: false, refreshing: false,
loading: false, loading: false,
error: false, error: false,
finished: false, finished: false,
}, },
{ {
items: [], items: [] as string[],
refreshing: false, refreshing: false,
loading: false, loading: false,
error: false, error: false,
finished: false, finished: false,
}, },
], ],
}; });
},
methods: { const onLoad = (index: number) => {
onLoad(index) { const list = state.list[index];
const list = this.list[index];
list.loading = true; list.loading = true;
setTimeout(() => { setTimeout(() => {
@ -96,7 +98,7 @@ export default {
for (let i = 0; i < 10; i++) { for (let i = 0; i < 10; i++) {
const text = list.items.length + 1; const text = list.items.length + 1;
list.items.push(text < 10 ? '0' + text : text); list.items.push(text < 10 ? '0' + text : String(text));
} }
list.loading = false; list.loading = false;
@ -113,12 +115,19 @@ export default {
list.finished = true; list.finished = true;
} }
}, 1000); }, 1000);
}, };
onRefresh(index) { const onRefresh = (index: number) => {
this.list[index].finished = false; state.list[index].finished = false;
this.onLoad(index); onLoad(index);
}, };
return {
...toRefs(state),
t,
onLoad,
onRefresh,
};
}, },
}; };
</script> </script>