ContactCard 联系人卡片 - Vant 4

📇 ContactCard 連絡先カード

📋 紹介

ContactCard は、あなたのスマホのアドレス帳にある美しい名刺のようなものです！✨ 優雅なカード形式で連絡先情報を表示し、見た目だけでなく機能も非常に親切です。新しい友達の連絡先を追加する場合でも、古い友達の情報を編集する場合でも、連絡先管理がスムーズになります。まるで親切なアドレス帳の管理人がいるかのように、毎回の連絡先操作に儀式感を与えます！🎭

📦 導入

以下の方法でグローバルにコンポーネントを登録します。詳細な登録方法についてはコンポーネント登録を参照してください。

import { createApp } from 'vue'; 
import { ContactCard } from 'vant'; 
const app = createApp(); 
app.use(ContactCard);

🎯 コードのデモ

➕ 連絡先の追加 - 新しい友達のアドレス帳登録

アドレス帳に新しいメンバーを追加したいですか？ContactCard の追加モードは、新しい友達のための特別な招待状のようなものです！🎉 ワンクリックで、簡単に連絡先入力の旅が始まります。

html

import { showToast } from'vant'; 
export default { 
  setup() { 
    const onAdd = () => showToast('新規'); 
    return { onAdd, }; 
  }, 
};

✏️ 連絡先の編集 - 古い友達の情報更新

友達が新しい番号に変わりましたか？引っ越しましたか？ContactCard の編集モードは、連絡先情報の親切な管理人のようなものです！📝 友人の最新情報を簡単に更新し、毎回の連絡ですぐに正しい相手に連絡できるようにします。

html

import { ref } from'vue'; 
import { showToast } from'vant'; 
export default { 
  setup() { 
    const tel = ref('13000000000'); 
    const name = ref('張三'); 
    const onEdit = () => showToast('edit'); 
    return { tel, name, onEdit, }; 
  }, 
};

🔒 編集不可 - 読み取り専用モード表示

一部の連絡先情報は安定した状態を維持する必要がありますか？ContactCard の読み取り専用モードは、重要な連絡先に保護カバーをかけるようなものです！🛡️ 情報をはっきりと表示するだけでなく、誤操作を防ぎ、重要な連絡先情報を安全に保ちます。

html

API

Props

パラメータ	説明	型	デフォルト値
type	カードの種類、`edit` が使用可能	string	`add`
name	連絡先の名前	string	-
tel	連絡先の電話番号	string	-
add-text	追加時のテキストヒント	string	`連絡先を追加`
editable	連絡先を編集できるかどうか	boolean	`true`

Events

イベント名	説明	コールバックパラメータ
click	クリック時にトリガー	event: MouseEvent

型定義

コンポーネントは以下の型定義をエクスポートします：

import type { ContactCardType, ContactCardProps } from'vant';

🎨 テーマカスタマイズ

スタイル変数

コンポーネントは以下の CSS 変数を提供し、カスタムスタイルに使用できます。使用方法については ConfigProvider コンポーネントを参照してください。

名前	デフォルト値	説明
--van-contact-card-padding	var(--van-padding-md)	-
--van-contact-card-add-icon-size	40px	-
--van-contact-card-add-icon-color	var(--van-primary-color)	-
--van-contact-card-title-line-height	var(--van-line-height-md)	-

🎯 ベストプラクティス

📱 モバイル対応の推奨事項

タッチフレンドリー - カードの領域が十分に大きく、指で簡単にクリックできるようにする
視覚的階層 - 適切なフォントサイズと色のコントラストを使用する
ローディング状態 - ネットワークリクエストにローディングインジケータを追加する
エラー処理 - 連絡先情報の取得失敗を優雅に処理する

🎨 インターフェースデザインのヒント

vue

<template>
  <!-- 推奨：遷移アニメーションを追加 -->
  <transition name="contact-card" mode="out-in">
    <ContactCard
      :key="contactKey"
      :type="cardType"
      :name="contactName"
      :tel="contactTel"
      @click="handleCardClick"
      class="smooth-card"
    />
  </transition>
</template>

<style>
.contact-card-enter-active,
.contact-card-leave-active {
  transition: all 0.3s ease;
}

.contact-card-enter-from {
  opacity: 0;
  transform: translateY(20px);
}

.contact-card-leave-to {
  opacity: 0;
  transform: translateY(-20px);
}

.smooth-card {
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>

🔄 状態管理の推奨事項

javascript

// 推奨：リアクティブデータを使用して連絡先状態を管理する
const contactState = reactive({
  isEditing: false,
  isLoading: false,
  contactInfo: {
    name: '',
    tel: '',
    id: null
  }
})

// 編集モードを切り替える
const toggleEditMode = () => {
  contactState.isEditing = !contactState.isEditing
}

// 連絡先情報を保存する
const saveContact = async () => {
  contactState.isLoading = true
  try {
    await updateContactAPI(contactState.contactInfo)
    showSuccessToast('保存成功')
    contactState.isEditing = false
  } catch (error) {
    showFailToast('保存失敗、再試行してください')
  } finally {
    contactState.isLoading = false
  }
}

💡 使用テクニック

🎭 動的カードタイプ

vue

<template>
  <ContactCard
    :type="dynamicType"
    :name="contactName"
    :tel="contactTel"
    :editable="canEdit"
    @click="handleClick"
  />
</template>

<script setup>
// ユーザー権限に基づいて動的にカードタイプを設定する
const dynamicType = computed(() => {
  if (!contactName.value && !contactTel.value) {
    return 'add'
  }
  return hasEditPermission.value ? 'edit' : 'add'
})

// スマートなクリック処理
const handleClick = () => {
  if (dynamicType.value === 'add') {
    // 連絡先追加ページに移動
    router.push('/contact/add')
  } else {
    // 連絡先編集ページに移動
    router.push(`/contact/edit/${contactId.value}`)
  }
}
</script>

🔍 連絡先検索の統合

vue

<template>
  <div class="contact-search-container">
    <Search
      v-model="searchKeyword"
      placeholder="連絡先を検索"
      @search="handleSearch"
    />
    
    <div class="contact-list">
      <ContactCard
        v-for="contact in filteredContacts"
        :key="contact.id"
        type="edit"
        :name="contact.name"
        :tel="contact.tel"
        @click="selectContact(contact)"
      />
      
      <!-- 空の状態 -->
      <Empty
        v-if="filteredContacts.length === 0"
        description="一致する連絡先がありません"
      />
    </div>
  </div>
</template>

<script setup>
const searchKeyword = ref('')
const contacts = ref([])

// 連絡先をフィルタリング
const filteredContacts = computed(() => {
  if (!searchKeyword.value) return contacts.value
  
  return contacts.value.filter(contact => 
    contact.name.includes(searchKeyword.value) ||
    contact.tel.includes(searchKeyword.value)
  )
})
</script>

📞 クイックアクションの統合

vue

<template>
  <ContactCard
    type="edit"
    :name="contactName"
    :tel="contactTel"
    @click="showActionSheet"
  />
  
  <ActionSheet
    v-model:show="showActions"
    :actions="contactActions"
    @select="handleAction"
  />
</template>

<script setup>
const showActions = ref(false)

const contactActions = [
  { name: '電話をかける', icon: 'phone-o' },
    { name: 'SMSを送る', icon: 'chat-o' },
    { name: '連絡先を編集', icon: 'edit' },
    { name: '連絡先を削除', icon: 'delete-o', color: '#ee0a24' }
]

const showActionSheet = () => {
  showActions.value = true
}

const handleAction = (action) => {
  switch (action.name) {
    case '電話をかける':
      window.location.href = `tel:${contactTel.value}`
      break
    case 'SMSを送る':
      window.location.href = `sms:${contactTel.value}`
      break
    case '連絡先を編集':
      router.push(`/contact/edit/${contactId.value}`)
      break
    case '連絡先を削除':
      confirmDelete()
      break
  }
}
</script>

❓ よくある問題の解決策

🔧 カードのクリックが反応しない？

問題：ContactCard のクリックイベントがトリガーされない 解決策：

@click イベントが正しくバインドされているか確認する
親コンテナがイベントバブリングを阻止していないか確認する
CSS スタイルがクリック領域に影響していないか検証する

📱 モバイルデバイスでの表示が異常？

問題：モバイルデバイスでカードが正常に表示されない 解決策：

css

/* モバイル対応を確保 */
.van-contact-card {
  min-height: 60px;
  touch-action: manipulation;
}

/* 長押しでのテキスト選択を防止 */
.van-contact-card * {
  user-select: none;
  -webkit-user-select: none;
}

🎨 カスタムスタイルが適用されない？

問題：CSS 変数を変更してもスタイルが変わらない 解決策：

CSS 変数が正しいスコープ内に設定されているか確認する
優先度を上げるために !important を使用する（慎重に使用）
他のスタイルが上書きされていないか確認する

🎨 デザインのインスピレーション

🌈 テーマスタイルの推奨

ビジネススタイル - シンプルなライン + ダークカラー

css

--van-contact-card-padding: 20px;
--van-contact-card-add-icon-color: #2c3e50;

活発なスタイル - 丸みを帯びたコーナー + 明るいカラー

css

--van-contact-card-padding: 16px;
--van-contact-card-add-icon-color: #ff6b6b;

ミニマリストスタイル - 余白デザイン + モノクロカラー
css
```
--van-contact-card-padding: 24px;
--van-contact-card-add-icon-color: #666;
```

🎯 インタラクションデザインの推奨

マイクロアニメーション - ホバーとクリックのアニメーション効果を追加する
状態フィードバック - 明確なローディングと成功状態の通知
ジェスチャーサポート - スワイプ削除などのジェスチャー操作をサポート
アクセシビリティ - 適切な ARIA タグとキーボードナビゲーションを追加

📚 関連文書

Contact 連絡先 - 連絡先選択コンポーネント
Card カード - 基本カードコンポーネント
Cell セル - セルコンポーネント
ConfigProvider グローバル設定 - テーマカスタマイズ方法を理解する

🔗 関連リンク

モバイル連絡先管理のベストプラクティス - MDN 連絡先ピッカー API
アクセシビリティデザインガイド - WCAG 2.1 クイックリファレンス
モバイルタッチインタラクションデザイン - Material Design ジェスチャーガイド
Vue 3 コンポジション API - Vue 3 公式ドキュメント

📇 ContactCard 連絡先カード ​

📋 紹介 ​

📦 導入 ​

🎯 コードのデモ ​

➕ 連絡先の追加 - 新しい友達のアドレス帳登録 ​

✏️ 連絡先の編集 - 古い友達の情報更新 ​

🔒 編集不可 - 読み取り専用モード表示 ​

API ​

Props ​

Events ​

型定義 ​

🎨 テーマカスタマイズ ​

スタイル変数 ​

🎯 ベストプラクティス ​

📱 モバイル対応の推奨事項 ​

🎨 インターフェースデザインのヒント ​

🔄 状態管理の推奨事項 ​

💡 使用テクニック ​

🎭 動的カードタイプ ​

🔍 連絡先検索の統合 ​

📞 クイックアクションの統合 ​

❓ よくある問題の解決策 ​

🔧 カードのクリックが反応しない？ ​

📱 モバイルデバイスでの表示が異常？ ​

🎨 カスタムスタイルが適用されない？ ​

🎨 デザインのインスピレーション ​

🌈 テーマスタイルの推奨 ​

🎯 インタラクションデザインの推奨 ​

📚 関連文書 ​

🔗 関連リンク ​

📇 ContactCard 連絡先カード

📋 紹介

📦 導入

🎯 コードのデモ

➕ 連絡先の追加 - 新しい友達のアドレス帳登録

✏️ 連絡先の編集 - 古い友達の情報更新

🔒 編集不可 - 読み取り専用モード表示

API

Props

Events

型定義

🎨 テーマカスタマイズ

スタイル変数

🎯 ベストプラクティス

📱 モバイル対応の推奨事項

🎨 インターフェースデザインのヒント

🔄 状態管理の推奨事項

💡 使用テクニック

🎭 動的カードタイプ

🔍 連絡先検索の統合

📞 クイックアクションの統合

❓ よくある問題の解決策

🔧 カードのクリックが反応しない？

📱 モバイルデバイスでの表示が異常？

🎨 カスタムスタイルが適用されない？

🎨 デザインのインスピレーション

🌈 テーマスタイルの推奨

🎯 インタラクションデザインの推奨

📚 関連文書

🔗 関連リンク