进阶用法

组件插槽

Vant 提供了丰富的组件插槽，通过插槽可以对组件的某一部分进行个性化定制。如果你对 Vue 的插槽不太熟悉，可以阅读 Vue 官方文档中的。下面是通过插槽来定制 Checkbox 图标的示例：

  2.   data() {
  3.     return {
  4.       checked: true,
  5.       activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
  6.     };
  7.   },
  8. };

Vant 中的许多组件提供了实例方法，调用实例方法时，我们需要通过 ref 来注册组件引用信息，引用信息将会注册在父组件的$refs对象上。注册完成后，我们可以通过this.$refs.xxx访问到对应的组件实例，并调用上面的实例方法。

  1. export default {
  2.   data() {
  3.     return {
  5.     };
  6.   },
  7.   // 注意：组件挂载后才能访问到 ref 对象
  8.   mounted() {
  9.     this.$refs.checkbox.toggle();
  10.   },
  11. };

浏览器适配

Rem 布局适配

  • 用于设置 rem 基准值

PostCSS 配置

下面提供了一份基本的 postcss 配置，可以在此配置的基础上根据项目需求进行修改。

如果你需要在桌面端使用 Vant，可以引入我们提供的 @vant/touch-emulator，这个库会在桌面端自动将 mouse 事件转换成对应的 touch 事件，使得组件能够在桌面端使用。

  2. npm i @vant/touch-emulator -S

底部安全区适配

iPhone X 等机型底部存在底部指示条，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行安全区适配。Vant 中部分组件提供了 safe-area-inset-top 或 safe-area-inset-bottom 属性，设置该属性后，即可在对应的机型上开启适配，如下示例：

  1. <!-- 在 head 标签中添加 meta 标签，并设置 viewport-fit=cover 值 -->
  2. <meta
  3.   name="viewport"
  4.   content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
  5. />
  7. <!-- 开启顶部安全区适配 -->
  8. <van-nav-bar safe-area-inset-top />
  10. <!-- 开启底部安全区适配 -->