vant4 单独选择年的组件

可以使用 vant4 中的 DatetimePicker 组件来单独选择年份。在 DatetimePicker 中，设置 type 属性为 'year'，即可只显示选择年份的界面。示例代码如下：

<van-datetime-picker
  type="year"
  :min-date="new Date(2000, 0, 1)"
  :max-date="new Date(2030, 11, 31)"
  :default-date="new Date(2022, 0, 1)"
  @confirm="onConfirm"
/>

在上面的代码中，我们设置了 type 为 'year'，并且通过 min-date 和 max-date 来限制可选择的年份范围。同时，我们也设置了一个默认的年份为 2022 年，并且在用户点击确认按钮时会触发 onConfirm 方法。你可以根据自己的需要修改这些属性。

相关问题

vant4 生成多选级联选择器

您可以使用Vant4中的`Cascader`组件来生成多选级联选择器。这个组件允许您在一个单独的组件中展示多个级联选择器，每个级联选择器之间可以进行联动。以下是一个简单的示例代码：

<template>
  <van-cascader
    :options="options"
    v-model="value"
    :active-item-class="activeItemClass"
    :item-height="itemHeight"
    :height="height"
    :visible-item-count="visibleItemCount"
    :placeholder="placeholder"
    :toolbar-position="toolbarPosition"
    :close-on-click-outside="closeOnClickOutside"
    :close-on-click-overlay="closeOnClickOverlay"
    :lazy-render="lazyRender"
    :expand-trigger="expandTrigger"
    :cascade="cascade"
    :border="border"
    :readonly="readonly"
    :disabled="disabled"
    :title="title"
    :columns-top="columnsTop"
    :columns-bottom="columnsBottom"
    :option-render="optionRender"
    :option-disabled="optionDisabled"
    :format="format"
    :before-confirm="beforeConfirm"
    :confirm-button-text="confirmButtonText"
    :cancel-button-text="cancelButtonText"
    @confirm="onConfirm"
    @cancel="onCancel"
    @change="onChange"
  />
</template>

<script>
  export default {
    data() {
      return {
        options: [
          {
            text: 'Fruit',
            value: 'fruit',
            children: [
              {
                text: 'Apple',
                value: 'apple'
              },
              {
                text: 'Banana',
                value: 'banana'
              },
              {
                text: 'Orange',
                value: 'orange'
              }
            ]
          },
          {
            text: 'Drink',
            value: 'drink',
            children: [
              {
                text: 'Water',
                value: 'water'
              },
              {
                text: 'Tea',
                value: 'tea'
              },
              {
                text: 'Coffee',
                value: 'coffee'
              }
            ]
          }
        ],
        value: [],
        activeItemClass: '',
        itemHeight: 44,
        height: 220,
        visibleItemCount: 5,
        placeholder: 'Please select',
        toolbarPosition: 'bottom',
        closeOnClickOutside: true,
        closeOnClickOverlay: true,
        lazyRender: true,
        expandTrigger: 'click',
        cascade: true,
        border: true,
        readonly: false,
        disabled: false,
        title: '',
        columnsTop: [],
        columnsBottom: [],
        optionRender: '',
        optionDisabled: '',
        format: '',
        beforeConfirm: '',
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel'
      };
    },
    methods: {
      onConfirm(value) {
        console.log(value);
      },
      onCancel() {
        console.log('cancel');
      },
      onChange(value) {
        console.log(value);
      }
    }
  };
</script>

在这个示例中，`options`是一个包含所有级联选择器选项的数组，`value`是一个数组，其中包含用户选择的所有选项的值。您可以使用`@change`事件来监听用户选择的选项，`onConfirm()`方法会在用户点击确认按钮时触发，`onCancel()`方法会在用户取消选择时触发。

vant单个组件引入uniapp

要在uniapp中使用vant UI组件库，可以按照以下步骤进行单个组件引入：

1. 在uniapp项目中安装vant组件库：`npm install vant -S`

2. 打开需要使用的组件页面，例如需要使用Button组件，可以在页面的 .vue 文件中引入Button组件：

<template>
  <van-button type="primary">按钮</van-button>
</template>

<script>
import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button
  }
}
</script>

3. 在页面的 script 标签中引入所需的vant组件，并在 components 中注册组件。可以使用 import { Button } from 'vant'; 这种方式引入vant组件，也可以使用 import Button from 'vant-weapp/dist/button/index'; 这种方式引入vant组件。其中，[Button.name]: Button 表示将组件名注册为 Button。

4. 在页面的 template 标签中使用vant组件。以上示例代码中，使用了van-button组件。

注意：以上示例代码中的引入方式适用于使用了Vant Weapp版本的uniapp项目。如果使用vant的H5版本，需要将引入路径修改为 'vant/lib/button/index.css' 和 'vant/lib/button/index.js'。另外，还需要将 css 文件单独引入到项目中。