vant实现题库组件代码

以下是一个简单的 Vant 题库组件实现代码：

<template>
  <div>
    <van-search v-model="searchText" placeholder="请输入关键词" />
    <van-list v-if="filteredQuestions.length > 0">
      <van-cell
        v-for="(question, index) in filteredQuestions"
        :key="index"
        :title="question.title"
        :label="question.type"
        @click="goToQuestionDetail(question)"
      />
    </van-list>
    <van-empty v-else description="暂无相关题目" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { Search, List, Cell, Empty } from 'vant';

export default {
  components: {
    [Search.name]: Search,
    [List.name]: List,
    [Cell.name]: Cell,
    [Empty.name]: Empty,
  },

  data() {
    return {
      searchText: '',
    };
  },

  computed: {
    ...mapGetters(['questions']),
    filteredQuestions() {
      return this.questions.filter((question) =>
        question.title.toLowerCase().includes(this.searchText.toLowerCase())
      );
    },
  },

  methods: {
    goToQuestionDetail(question) {
      // 跳转到题目详情页
      // ...
    },
  },
};
</script>

此组件包含一个搜索框、一个列表和一个空状态提示。它从 Vuex store 中获取题目数据，然后根据搜索框中的关键词过滤出相关的题目，并在列表中展示。当没有符合条件的题目时，会显示空状态提示。当用户点击某个题目时，会跳转到该题目的详情页。