Vant4 進(jìn)階用法

介紹

通過(guò)本章節(jié)你可以了解到 Vant 的一些進(jìn)階用法，比如組件插槽用法、多種瀏覽器適配方式。

組件用法

組件注冊(cè)

Vant 支持多種組件注冊(cè)方式，請(qǐng)根據(jù)實(shí)際業(yè)務(wù)需要進(jìn)行選擇。

全局注冊(cè)

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

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

const app = createApp();

// 方式一. 通過(guò) app.use 注冊(cè)
// 注冊(cè)完成后，在模板中通過(guò) <van-button> 或 <VanButton> 標(biāo)簽來(lái)使用按鈕組件
app.use(Button);

// 方式二. 通過(guò) app.component 注冊(cè)
// 注冊(cè)完成后，在模板中通過(guò) <van-button> 標(biāo)簽來(lái)使用按鈕組件
app.component(Button.name, Button);

局部注冊(cè)

局部注冊(cè)后，你可以在當(dāng)前組件中使用注冊(cè)的 Vant 組件。

import { Button } from 'vant';

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

對(duì)于組件注冊(cè)更詳細(xì)的介紹，請(qǐng)參考 Vue 官方文檔 - 組件注冊(cè)。

<script setup>

在 ?<script setup>? 中可以直接使用 Vant 組件，不需要進(jìn)行組件注冊(cè)。

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

<template>
  <Button />
</template>

JSX/TSX

在 JSX 和 TSX 中可以直接使用 Vant 組件，不需要進(jìn)行組件注冊(cè)。

import { Button } from 'vant';

export default {
  render() {
    return <Button />;
  },
};

組件插槽

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

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

export default {
  data() {
    return {
      checked: true,
      activeIcon:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactiveIcon:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
  },
};

組件實(shí)例方法

Vant 中的許多組件提供了實(shí)例方法，調(diào)用實(shí)例方法時(shí)，我們需要通過(guò) ref 來(lái)注冊(cè)組件引用信息，引用信息將會(huì)注冊(cè)在父組件的?$refs?對(duì)象上。注冊(cè)完成后，我們可以通過(guò)?this.$refs.xxx?訪問(wèn)到對(duì)應(yīng)的組件實(shí)例，并調(diào)用上面的實(shí)例方法。

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

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

瀏覽器適配

Viewport 布局

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

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

PostCSS PostCSS 示例配置

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

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

Tips: 在配置 postcss-loader 時(shí)，應(yīng)避免 ignore node_modules 目錄，否則將導(dǎo)致 Vant 樣式無(wú)法被編譯。

Rem 布局適配

如果需要使用 ?rem? 單位進(jìn)行適配，推薦使用以下兩個(gè)工具：

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

PostCSS 示例配置

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

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

Tips: 在配置 postcss-pxtorem 時(shí)，同樣應(yīng)避免 ignore node_modules 目錄，否則會(huì)導(dǎo)致 Vant 樣式無(wú)法被編譯。

其他設(shè)計(jì)稿尺寸

如果設(shè)計(jì)稿的尺寸不是 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 是一個(gè)面向移動(dòng)端的組件庫(kù)，因此默認(rèn)只適配了移動(dòng)端設(shè)備，這意味著組件只監(jiān)聽(tīng)了移動(dòng)端的 ?touch? 事件，沒(méi)有監(jiān)聽(tīng)桌面端的 ?mouse? 事件。

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

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

// 引入模塊后自動(dòng)生效
import '@vant/touch-emulator';

底部安全區(qū)適配

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

<!-- 在 head 標(biāo)簽中添加 meta 標(biāo)簽，并設(shè)置 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"
/>

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

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