高度な使い方

🚀 紹介

このセクションでは、Vant の高度な使い方について学ぶことができます。コンポーネントのスロットの使い方や、さまざまなブラウザへの対応方法などです。これらのテクニックをマスターすることで、開発がよりスムーズになります！

コンポーネントの使い方

コンポーネントの登録

Vant は複数のコンポーネント登録方法をサポートしています。実際のビジネスニーズに応じて選択してください。柔軟な登録方法により、様々なシナリオでの開発ニーズに対応できます！

グローバル登録

グローバル登録すると、アプリ内の任意の子コンポーネントで登録した 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 Vant from 'vant';
import { createApp } from 'vue';

const app = createApp();

app.use(Vant);

// Lazyload 指令需要单独进行注册
app.use(vant.Lazyload);

注意：全てのコンポーネントを登録すると、全てのコンポーネントのコードが導入されるため、パッケージサイズが増大します。

ローカル登録

ローカル登録すると、現在のコンポーネント内で登録した Vant コンポーネントを使用できます。

import { Button } from 'vant';

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

コンポーネントの登録についてのより詳細な説明は、Vue 公式ドキュメント - コンポーネントの登録 を参照してください。

<script setup>

\<script setup> では、コンポーネントの登録を行わずに Vant コンポーネントを直接使用できます。

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

<template>
  <Button />
</template>

JSX/TSX

JSX と TSX では、コンポーネントの登録を行わずに Vant コンポーネントを直接使用できます。

import { Button } from 'vant';

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

コンポーネントのスロット

Vant は豊富なコンポーネントスロットを提供しています。スロットを使用することで、コンポーネントの特定の部分をカスタマイズできます。Vue のスロットについてよく知らない方は、Vue 公式ドキュメントのスロットのセクションをお読みください。以下はスロットを使用して 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://fastly.jsdelivr.net/npm/@vant/assets/user-active.png',
      inactiveIcon:
        'https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png',
    };
  },
};

コンポーネントのインスタンスメソッド

Vant の多くのコンポーネントはインスタンスメソッドを提供しています。インスタンスメソッドを呼び出すには、ref を使用してコンポーネントの参照情報を登録する必要があります。参照情報は親コンポーネントの$refsオブジェクトに登録されます。登録が完了すると、this.$refs.xxxを通じて対応するコンポーネントインスタンスにアクセスし、その上のインスタンスメソッドを呼び出すことができます。

<!-- 通过 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 を使用して変換することを推奨します。

postcss-px-to-viewport は、px 単位を vw/vh 単位に変換するための PostCSS プラグインです。

PostCSS サンプル設定

以下に基本的な PostCSS サンプル設定を示します。この設定を基に、プロジェクトの要件に応じて変更することができます。

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

Tips: postcss-loader を設定する際は、node_modules ディレクトリを無視しないようにしてください。そうしないと、Vant のスタイルがコンパイルされなくなります。

Rem レイアウト対応

rem 単位を使用して対応する場合は、以下の 2 つのツールを推奨します：

• postcss-pxtorem は、px 単位を rem 単位に変換するための PostCSS プラグインです
• lib-flexible は、rem の基準値を設定するためのツールです

PostCSS サンプル設定

以下に基本的な PostCSS サンプル設定を示します。この設定を基に、プロジェクトの要件に応じて変更することができます。

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

Tips: postcss-pxtorem を設定する際も、node_modules ディレクトリを無視しないようにしてください。そうしないと、Vant のスタイルがコンパイルされなくなります。

その他のデザイン仕様サイズ

デザイン仕様のサイズが 375 ではなく、750 やその他のサイズの場合、rootValue 設定を次のように調整できます：

// 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 はモバイル向けのコンポーネントライブラリであるため、デフォルトではモバイルデバイスのみに対応しています。これは、コンポーネントがモバイルの touch イベントのみをリッスンし、デスクトップの mouse イベントはリッスンしていないことを意味します。

デスクトップで Vant を使用する必要がある場合は、提供されている @vant/touch-emulator を導入することができます。このライブラリは、デスクトップ環境で自動的に mouse イベントを対応する touch イベントに変換し、コンポーネントがデスクトップで使用できるようにします。

# 安装模块
npm i @vant/touch-emulator -S

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

底部セーフエリア対応

iPhone X などのデバイスには底部インジケータバーが存在します。インジケータバーの操作領域はページの下部と重なり、ユーザーが誤操作しやすくなるため、これらのデバイスに対してセーフエリア対応が必要です。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"
/>

<!-- 开启顶部安全区适配 -->
<van-nav-bar safe-area-inset-top />

<!-- 开启底部安全区适配 -->
<van-number-keyboard safe-area-inset-bottom />

📝 まとめ

Vant の高度な使い方をマスターしましたね！🎉 このセクションを学ぶことで、コンポーネントの登録方法、スロットの活用、インスタンスメソッドの呼び出しテクニック、さまざまなブラウザ対応方法などを理解できました。これらの高度なスキルにより、実際の開発がよりスムーズになります！

🎯 主なポイントの振り返り：

• 🔧 コンポーネント登録：グローバル登録、ローカル登録、script setup など、複数の方法から選択可能
• 🎨 スロットカスタマイズ：スロットを通じて個性化されたコンポーネントカスタマイズを実現
• ⚡ インスタンスメソッド：ref を使用してコンポーネントのインスタンスメソッドを呼び出し、より複雑なインタラクションを実現
• 📱 モバイル対応：Viewport と Rem レイアウトのソリューションで、あらゆるスクリーンに完璧に対応
• 🖥️ デスクトップサポート：touch-emulator を使用して、モバイルコンポーネントをデスクトップでも正常に使用可能に
• 🛡️ セーフエリア対応：iPhone X などのフルスクリーンデバイスに完璧に対応

これらのテクニックをマスターすれば、Vant の強力な機能を最大限に活用し、より優れたモバイルアプリケーションを構築することができます！

🔗 関連コンテンツ

• クイックスタート - Vant を始める
• テーマカスタマイズ - 独自のビジュアルスタイルを作成
• ベストプラクティス - 開発経験とテクニックの共有
• モバイル対応 - あらゆるデバイスに完璧に対応
• TypeScript ガイド - タイプセーフな開発体験
• Vue3 インテグレーションガイド - Vue3 との完璧な統合