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

当然可以，下面是基于Vue2+Vant封装的List组件代码：

<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>

使用案例：

<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`属性来决定是否已经加载完所有数据，从而显示不同的提示文本。