请你基于vue2+vant封装一个List组件（上拉加载，下来刷新），要求必须有v-model、finished、error、offset、loading-text、finished-text、error-text、immediate-check、direction参数；包含load事件。要求代码写上注释，并提供使用的案例

当然可以，下面是基于Vue2+Vant封装的List组件代码： ```vue <template> <div class="list-container"> <van-list v-model="list" :finished="finished" :error="error" :offset="offset" :loading-text="loadingText" :finished-text="finishedText" :error-text="errorText" :immediate-check="immediateCheck" :direction="direction" @load="onLoad" > <template v-slot:item="{ item }"> <!-- 这里是列表项的展示内容 --> <div class="list-item">{{ item }}</div> </template> </van-list> </div> </template> <script> export default { name: 'List', props: { value: { type: Array, default: () => [] }, finished: { type: Boolean, default: false }, error: { type: Boolean, default: false }, offset: { type: Number, default: 300 }, loadingText: { type: String, default: '加载中...' }, finishedText: { type: String, default: '没有更多了' }, errorText: { type: String, default: '加载失败，请重试' }, immediateCheck: { type: Boolean, default: true }, direction: { type: String, default: 'down' } }, data() { return { list: this.value } }, methods: { onLoad() { // 触发load事件，外部可以监听该事件进行数据加载 this.$emit('load') } }, watch: { value(newVal) { this.list = newVal } } } </script> <style scoped> /* 这里是组件的样式 */ .list-container { /* 样式代码 */ } .list-item { /* 样式代码 */ } </style> ``` 使用案例： ```vue <template> <div> <list v-model="listData" :finished="isFinished" :error="isError" :offset="300" loading-text="加载中..." finished-text="没有更多了" error-text="加载失败，请重试" immediate-check direction="down" @load="loadData" ></list> </div> </template> <script> import List from '@/components/List.vue' export default { name: 'Example', components: { List }, data() { return { listData: [], // 列表数据 isFinished: false, // 是否已加载完所有数据 isError: false // 是否加载错误 } }, methods: { loadData() { // 模拟异步加载数据 setTimeout(() => { // 假设每次加载10条数据 const newData = Array.from({ length: 10 }, (v, i) => `Item ${i + 1}`) this.listData = this.listData.concat(newData) // 加载完所有数据 if (this.listData.length >= 100) { this.isFinished = true } }, 1000) } } } </script> ``` 在上面的案例中，我们使用了封装的List组件，并通过`v-model`绑定了列表数据`listData`。同时，我们也监听了List组件的`load`事件，在事件处理函数中进行异步加载数据的操作。根据加载的数据量，我们可以通过设置`finished`属性来决定是否已经加载完所有数据，从而显示不同的提示文本。