Vant3 進階用法

組件注冊

Vant 支持多種組件注冊方式，請根據(jù)實際業(yè)務需要進行選擇。

全局注冊

全局注冊后，你可以在 app 下的任意子組件中使用注冊的 Vant 組件。

import { Button } from 'vant';
import { createApp } from 'vue';

const app = createApp();

// 方式一. 通過 app.use 注冊
// 注冊完成后，在模板中通過 <van-button> 或 <VanButton> 標簽來使用按鈕組件
app.use(Button);

// 方式二. 通過 app.component 注冊
// 注冊完成后，在模板中通過 <van-button> 標簽來使用按鈕組件
app.component(Button.name, Button);

局部注冊

局部注冊后，你可以在當前組件中使用注冊的 Vant 組件。

import { Button } from 'vant';

export default {
  components: {
    [Button.name]: Button,
  },
};

對于組件注冊更詳細的介紹，請參考 Vue 官方文檔 - 組件注冊。

組件插槽

Vant 提供了豐富的組件插槽，通過插槽可以對組件的某一部分進行個性化定制。如果你對 Vue 的插槽不太熟悉，可以閱讀 Vue 官方文檔中的插槽章節(jié)。下面是通過插槽來定制 Checkbox 圖標的示例：

<van-checkbox v-model="checked">
  <!-- 使用組件提供的 icon 插槽 -->
  <!-- 將默認圖標替換為個性化圖片 -->
  <template #icon="props">
    <img :src="props.checked ? activeIcon : inactiveIcon" />
  </template>
</van-checkbox>

export default {
  data() {
    return {
      checked: true,
      activeIcon: 'https://img.yzcdn.cn/vant/user-active.png',
      inactiveIcon: 'https://img.yzcdn.cn/vant/user-inactive.png',
    };
  },
};

組件實例方法

Vant 中的許多組件提供了實例方法，調(diào)用實例方法時，我們需要通過 ref 來注冊組件引用信息，引用信息將會注冊在父組件的$refs對象上。注冊完成后，我們可以通過this.$refs.xxx訪問到對應的組件實例，并調(diào)用上面的實例方法。

<!-- 通過 ref 屬性將組件綁定到 this.$refs.checkbox 上 -->
<van-checkbox v-model="checked" ref="checkbox"> 復選框 </van-checkbox>

export default {
  data() {
    return {
      checked: false,
    };
  },
  // 注意：組件掛載后才能訪問到 ref 對象
  mounted() {
    this.$refs.checkbox.toggle();
  },
};

瀏覽器適配

Viewport 布局

Vant 默認使用 px 作為樣式單位，如果需要使用 viewport 單位 (vw, vh, vmin, vmax)，推薦使用 postcss-px-to-viewport 進行轉(zhuǎn)換。

postcss-px-to-viewport 是一款 PostCSS 插件，用于將 px 單位轉(zhuǎn)化為 vw/vh 單位。

PostCSS PostCSS 示例配置

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基礎上根據(jù)項目需求進行修改。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-px-to-viewport': {
      viewportWidth: 375,
    },
  },
};

Tips: 在配置 postcss-loader 時，應避免 ignore node_modules 目錄，否則將導致 Vant 樣式無法被編譯。

Rem 布局適配

如果需要使用 rem 單位進行適配，推薦使用以下兩個工具：

• postcss-pxtorem 是一款 PostCSS 插件，用于將 px 單位轉(zhuǎn)化為 rem 單位
• lib-flexible 用于設置 rem 基準值

PostCSS 示例配置

下面提供了一份基本的 PostCSS 示例配置，可以在此配置的基礎上根據(jù)項目需求進行修改。

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
    },
  },
};

其他設計稿尺寸

如果設計稿的尺寸不是 375，而是 750 或其他大小，可以將 rootValue 配置調(diào)整為:

// postcss.config.js
module.exports = {
  plugins: {
    // postcss-pxtorem 插件的版本需要 >= 5.0.0
    'postcss-pxtorem': {
      rootValue({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75;
      },
      propList: ['*'],
    },
  },
};

桌面端適配

Vant 是一個面向移動端的組件庫，因此默認只適配了移動端設備，這意味著組件只監(jiān)聽了移動端的 touch 事件，沒有監(jiān)聽桌面端的 mouse 事件。

如果你需要在桌面端使用 Vant，可以引入我們提供的 @vant/touch-emulator，這個庫會在桌面端自動將 mouse 事件轉(zhuǎn)換成對應的 touch 事件，使得組件能夠在桌面端使用。

# 安裝模塊
npm i @vant/touch-emulator -S

// 引入模塊后自動生效
import '@vant/touch-emulator';

底部安全區(qū)適配

iPhone X 等機型底部存在底部指示條，指示條的操作區(qū)域與頁面底部存在重合，容易導致用戶誤操作，因此我們需要針對這些機型進行安全區(qū)適配。Vant 中部分組件提供了 safe-area-inset-top 或 safe-area-inset-bottom 屬性，設置該屬性后，即可在對應的機型上開啟適配，如下示例：

<!-- 在 head 標簽中添加 meta 標簽，并設置 viewport-fit=cover 值 -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

<!-- 開啟頂部安全區(qū)適配 -->
<van-nav-bar safe-area-inset-top />

<!-- 開啟底部安全區(qū)適配 -->
<van-number-keyboard safe-area-inset-bottom />