feats

src/pages/index.vue

@@ -1,3 +1,54 @@
 <template>
-  
-</template>
+  <div>
+    <van-search
+      v-model="value"
+      show-action
+      placeholder="请输入单位名称"
+      @search="onSearch"
+    >
+      <template #action>
+        <div @click="onSearch">搜索</div>
+      </template>
+    </van-search>
+    <van-list
+      v-model:loading="loading"
+      :finished="finished"
+      finished-text="没有更多了"
+      @load="onLoad"
+    >
+      <van-cell v-for="item in list" :key="item" :title="item" />
+    </van-list>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref()
+const list = ref([]);
+const loading = ref(false);
+const finished = ref(false);
+
+const onLoad = () => {
+  // 异步更新数据
+  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
+  setTimeout(() => {
+    for (let i = 0; i < 10; i++) {
+      list.value.push(list.value.length + 1);
+    }
+
+    // 加载状态结束
+    loading.value = false;
+
+    // 数据全部加载完成
+    if (list.value.length >= 40) {
+      finished.value = true;
+    }
+  }, 1000);
+};
+
+const onSearch = (val) => {
+  const text = val || value.value
+}
+
+</script>

src/vant.js

@@ -1,10 +1,14 @@
 // Toast
 import {
   Button,
+  Cell,
+  CellGroup,
   Dialog,
   Loading,
+  List,
   Notify,
   ImagePreview,
+  Search,
   Toast,
 } from 'vant';
 
@@ -15,9 +19,13 @@ import 'vant/es/image-preview/style';
 
 export default function vant(app) {
   app.use(Button);
+  app.use(Cell);
+  app.use(CellGroup);
   app.use(Dialog);
   app.use(Loading);
+  app.use(List);
   app.use(Notify);
   app.use(ImagePreview);
+  app.use(Search);
   app.use(Toast);
 }