feat: migrate List component

breaking-changes.md

@@ -8,6 +8,7 @@
 - Popup: `v-model` 重命名为 `v-model:show`
 - ShareSheet: `v-model` 重命名为 `v-model:show`
 - ActionSheet: `v-model` 重命名为 `v-model:show`
+- List: `v-model` 重命名为 `v-model:loading`，`error.sync` 重命名为 `v-model:error`
 - Field: v-model 对应的属性 `value` 重命名为 `modelValue`，事件由 `input` 重命名为 `update:modelValue`
 - Switch: v-model 对应的属性 `value` 重命名为 `modelValue`，事件由 `input` 重命名为 `update:modelValue`
 - Sidebar: v-model 对应的属性 `activeKey` 重命名为 `modelValue`，事件由 `input` 重命名为 `update:modelValue`

components.js

@@ -39,4 +39,5 @@ module.exports = [
   'field',
   'tabbar',
   'tabbar-item',
+  'list',
 ];

src/list/README.md

@@ -19,7 +19,7 @@ Vue.use(List);
 
 ```html
 <van-list
-  v-model="loading"
+  v-model:loading="loading"
   :finished="finished"
   finished-text="Finished"
   @load="onLoad"
@@ -58,8 +58,8 @@ export default {
 
 ```html
 <van-list
-  v-model="loading"
+  v-model:loading="loading"
-  :error.sync="error"
+  v-model:error="error"
   error-text="Request failed. Click to reload"
   @load="onLoad"
 >
@@ -89,9 +89,9 @@ export default {
 ### PullRefresh
 
 ```html
-<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+<van-pull-refresh v-model:loading="refreshing" @refresh="onRefresh">
   <van-list
-    v-model="loading"
+    v-model:loading="loading"
     :finished="finished"
     finished-text="Finished"
     @load="onLoad"
@@ -144,7 +144,7 @@ export default {
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| v-model | Whether to show loading info，the `load` event will not be triggered when loading | _boolean_ | `false` |
+| v-model:loading | Whether to show loading info，the `load` event will not be triggered when loading | _boolean_ | `false` |
 | finished | Whether loading is finished，the `load` event will not be triggered when finished | _boolean_ | `false` |
 | error | Whether loading is error，the `load` event will be triggered only when error text clicked, the `sync` modifier is needed | _boolean_ | `false` |
 | offset | The load event will be triggered when the distance between the scrollbar and the bottom is less than offset | _number \| string_ | `300` |

src/list/README.zh-CN.md

@@ -21,7 +21,7 @@ List 组件通过`loading`和`finished`两个变量控制加载状态，当组
 
 ```html
 <van-list
-  v-model="loading"
+  v-model:loading="loading"
   :finished="finished"
   finished-text="没有更多了"
   @load="onLoad"
@@ -67,8 +67,8 @@ export default {
 
 ```html
 <van-list
-  v-model="loading"
+  v-model:loading="loading"
-  :error.sync="error"
+  v-model:error="error"
   error-text="请求失败，点击重新加载"
   @load="onLoad"
 >
@@ -100,9 +100,9 @@ export default {
 List 组件可以与 [PullRefresh](#/zh-CN/pull-refresh) 组件结合使用，实现下拉刷新的效果
 
 ```html
-<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+<van-pull-refresh v-model:loading="refreshing" @refresh="onRefresh">
   <van-list
-    v-model="loading"
+    v-model:loading="loading"
     :finished="finished"
     finished-text="没有更多了"
     @load="onLoad"
@@ -159,7 +159,7 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| v-model | 是否处于加载状态，加载过程中不触发`load`事件 | _boolean_ | `false` |
+| v-model:loading | 是否处于加载状态，加载过程中不触发`load`事件 | _boolean_ | `false` |
 | finished | 是否已加载完成，加载完成后不再触发`load`事件 | _boolean_ | `false` |
 | error | 是否加载失败，加载失败后点击错误提示可以重新<br>触发`load`事件，必须使用`sync`修饰符 | _boolean_ | `false` |
 | offset | 滚动条与底部距离小于 offset 时触发`load`事件 | _number \| string_ | `300` |

src/list/demo/index.vue

@@ -3,7 +3,7 @@
     <van-tabs>
       <van-tab :title="t('basicUsage')">
         <van-list
-          v-model="list[0].loading"
+          v-model:loading="list[0].loading"
           :finished="list[0].finished"
           :finished-text="t('finishedText')"
           @load="onLoad(0)"
@@ -14,9 +14,9 @@
 
       <van-tab :title="t('errorInfo')">
         <van-list
-          v-model="list[1].loading"
+          v-model:loading="list[1].loading"
+          v-model:error="list[1].error"
           :finished="list[1].finished"
-          :error.sync="list[1].error"
           :error-text="t('errorText')"
           @load="onLoad(1)"
         >
@@ -25,9 +25,12 @@
       </van-tab>
 
       <van-tab :title="t('pullRefresh')">
-        <van-pull-refresh v-model="list[2].refreshing" @refresh="onRefresh(2)">
+        <van-pull-refresh
+          v-model:loading="list[2].refreshing"
+          @refresh="onRefresh(2)"
+        >
           <van-list
-            v-model="list[2].loading"
+            v-model:loading="list[2].loading"
             :finished="list[2].finished"
             :finished-text="t('finishedText')"
             @load="onLoad(2)"

src/list/index.js

@@ -22,10 +22,6 @@ export default createComponent({
     }),
   ],
 
-  model: {
-    prop: 'loading',
-  },
-
   props: {
     error: Boolean,
     loading: Boolean,
@@ -47,6 +43,8 @@ export default createComponent({
     },
   },
 
+  emits: ['load', 'update:error', 'update:loading'],
+
   data() {
     return {
       // use sync innerLoading state to avoid repeated loading in some edge cases
@@ -107,7 +105,7 @@ export default createComponent({
 
         if (isReachEdge) {
           this.innerLoading = true;
-          this.$emit('input', true);
+          this.$emit('update:loading', true);
           this.$emit('load');
         }
       });
@@ -122,7 +120,9 @@ export default createComponent({
       if (this.innerLoading && !this.finished) {
         return (
           <div class={bem('loading')} key="loading">
-            {this.slots('loading') || (
+            {this.$slots.loading ? (
+              this.$slots.loading()
+            ) : (
               <Loading size="16">{this.loadingText || t('loading')}</Loading>
             )}
           </div>
@@ -132,7 +132,9 @@ export default createComponent({
 
     genFinishedText() {
       if (this.finished) {
-        const text = this.slots('finished') || this.finishedText;
+        const text = this.$slots.finished
+          ? this.$slots.finished()
+          : this.finishedText;
 
         if (text) {
           return <div class={bem('finished-text')}>{text}</div>;
@@ -142,7 +144,7 @@ export default createComponent({
 
     genErrorText() {
       if (this.error) {
-        const text = this.slots('error') || this.errorText;
+        const text = this.$slots.error ? this.$slots.error() : this.errorText;
 
         if (text) {
           return (
@@ -157,14 +159,15 @@ export default createComponent({
 
   render() {
     const Placeholder = <div ref="placeholder" class={bem('placeholder')} />;
+    const Content = this.$slots.default?.();
 
     return (
       <div class={bem()} role="feed" aria-busy={this.innerLoading}>
-        {this.direction === 'down' ? this.slots() : Placeholder}
+        {this.direction === 'down' ? Content : Placeholder}
         {this.genLoading()}
         {this.genFinishedText()}
         {this.genErrorText()}
-        {this.direction === 'up' ? this.slots() : Placeholder}
+        {this.direction === 'up' ? Content : Placeholder}
       </div>
     );
   },

vant.config.js

@@ -249,10 +249,10 @@ module.exports = {
               //   path: 'lazyload',
               //   title: 'Lazyload 懒加载',
               // },
-              // {
+              {
-              //   path: 'list',
+                path: 'list',
-              //   title: 'List 列表',
+                title: 'List 列表',
-              // },
+              },
               {
                 path: 'notice-bar',
                 title: 'NoticeBar 通知栏',
@@ -583,10 +583,10 @@ module.exports = {
               //   path: 'lazyload',
               //   title: 'Lazyload',
               // },
-              // {
+              {
-              //   path: 'list',
+                path: 'list',
-              //   title: 'List',
+                title: 'List',
-              // },
+              },
               {
                 path: 'notice-bar',
                 title: 'NoticeBar',