Vant

日本語

繁體中文
简体中文
English

日本語

繁體中文
简体中文
English

Appearance

CountDown カウントダウン - Vant 4

⏰ CountDown カウントダウン ​

⏳ 紹介 ​

時間は流れる水のように貴重です、CountDown カウントダウンコンポーネントはあなた専用の時間管理士です！⏰ それはミリ秒単位でカウントダウンを表示でき、休むことのない時間の番人のようです。

刺激的なイベントのカウントダウン 🎉、緊張感のある認証コードのカウントダウン 📱、その他時間のアラートが必要な様々なシーンでも、CountDown は親切なアシスタントのように正確に計時し、一秒一秒を儀式感いっぱいに演出します！

📦 導入 ​

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

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

🎯 コードデモ ​

🔧 基本的な使い方 - あなたの時間の旅を始めましょう ​

目覚まし時計を設定するのと同じくらい簡単です！time 属性でカウントダウンの総時間（ミリ秒単位）を設定すると、CountDown は正確な時計のように一秒ずつカウントダウンを始めます。

html
js
import { ref } from'vue'; exportdefault { setup() { const time = ref(30 * 60 * 60 * 1000); return { time }; }, };

🎨 カスタムフォーマット - 時間に美しい衣装を着せましょう ​

時間も美しく表示する必要があります！format 属性を使用すると、デザイナーのようにカウントダウン用の専門的な表示形式をカスタマイズでき、時間が最も優雅な姿でユーザーの目の前に現れます。

html

⚡ ミリ秒レベルのレンダリング - 究極の時間精度を追求 ​

よりスムーズなカウントダウン体験を求めていますか？デフォルトでは、カウントダウンは一秒ごとに更新され、心拍のように安定しています。しかし、millisecond 属性を有効にすると、高精度のタイマーに変身し、ミリ秒単位で動き、ユーザーに究極の滑らかな視覚体験をもたらします！

html

🎭 カスタムスタイル - あなたの創造力を解放 ​

デフォルトのスタイルに不満ですか？問題ありません！スロット機能を使用すると、アーティストのように自由に創作し、ユニークなカウントダウンインターフェイスを作成できます。timeData オブジェクトはあなたのカラーパレットのように、すべての時間データを含み、あなたの創造性を存分に発揮できます！

html

🎮 手動制御 - 時間の支配者になりましょう ​

時間のリズムを完全に制御したいですか？ref でコンポーネントのインスタンスを取得すると、時間魔法の3つのスペルを手に入れます：start（開始）、pause（一時停止）、reset（リセット）。リモコンのように、あなたの指先で時間を踊らせましょう！

html
js
import { showToast } from'vant'; exportdefault { setup() { const countDown = ref(null); conststart = () => { countDown.value.start(); }; constpause = () => { countDown.value.pause(); }; constreset = () => { countDown.value.reset(); }; constonFinish = () => showToast('カウントダウン終了'); return { start, pause, reset, onFinish, countDown, }; }, };

API ​

Props ​

パラメータ説明タイプデフォルト値
timeカウントダウン時間、単位ミリ秒number | string0
format時間フォーマットstringHH:mm:ss
auto-start自動的にカウントダウンを開始するかどうかbooleantrue
millisecondミリ秒レベルのレンダリングを有効にするかどうかbooleanfalse

format フォーマット ​

フォーマット説明
DD日数
HH時間
mm分
ss秒数
Sミリ秒（1桁）
SSミリ秒（2桁）
SSSミリ秒（3桁）

Events ​

イベント名説明コールバック引数
finishカウントダウンが終了したときにトリガーされます-
changeカウントダウンが変化したときにトリガーされますcurrentTime: CurrentTime

Slots ​

名前説明パラメータ
defaultカスタムコンテンツcurrentTime: CurrentTime

CurrentTime フォーマット ​

名前説明タイプ
total残りの総時間（単位ミリ秒）number
days残りの日数number
hours残りの時間number
minutes残りの分number
seconds残りの秒数number
milliseconds残りのミリ秒number

メソッド ​

ref を使用して CountDown インスタンスを取得し、インスタンスメソッドを呼び出すことができます。詳細についてはコンポーネントインスタンスメソッドを参照してください。

メソッド名説明パラメータ戻り値
startカウントダウンを開始します--
pauseカウントダウンを一時停止します--
resetカウントダウンをリセットします、auto-start が true の場合、リセット後に自動的にカウントダウンが開始されます--

型定義 ​

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

ts
importtype { CountDownProps, CountDownInstance, CountDownCurrentTime, } from'vant';

CountDownInstance はコンポーネントインスタンスの型で、以下のように使用します：

ts
import { ref } from'vue'; importtype { CountDownInstance } from'vant'; const countDownRef = ref<CountDownInstance>(); countDownRef.value?.start();

テーマカスタマイズ ​

スタイル変数 ​

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

名称デフォルト値説明
--van-count-down-text-colorvar(--van-text-color)-
--van-count-down-font-sizevar(--van-font-size-md)-
--van-count-down-line-heightvar(--van-line-height-md)-

❓ よくある質問 ​

iOS システムでカウントダウンが効かない？ ​

iOS でカウントダウンが効かない問題に遭遇した場合は、Date オブジェクトを作成する際にnew Date('2020-01-01')のような書き方を使用していないか確認してください。iOS はハイフンで区切られた日付形式をサポートしていません。正しい書き方はnew Date('2020/01/01')です。

この問題の詳細な説明：stackoverflow。

🌟 ベストプラクティス ​

パフォーマンス最適化の提案 ​

javascript
// 必要がない限り、ミリ秒レベルのレンダリングを避けてください
<van-count-down 
  :time="time" 
  :millisecond="false"  // デフォルトで十分です、パフォーマンスが向上します
  format="HH:mm:ss" 
/>

// 大量のカウントダウンコンポーネントの場合、スロットリングを使用します
import { throttle } from 'lodash-es';

const handleChange = throttle((currentTime) => {
  console.log('カウントダウン変化:', currentTime);
}, 100);

ユーザーエクスペリエンスの最適化 ​

javascript
// 音声アラートを追加
const onFinish = () => {
  // 警告音を再生
  const audio = new Audio('/sounds/countdown-finish.mp3');
  audio.play();
  
  // 振動フィードバック（モバイル端末）
  if (navigator.vibrate) {
    navigator.vibrate([200, 100, 200]);
  }
};

// 視覚フィードバック
const getCountdownClass = (seconds) => {
  if (seconds <= 10) return 'countdown-urgent';
  if (seconds <= 30) return 'countdown-warning';
  return 'countdown-normal';
};

💡 使用テクニック ​

動的カウントダウンシーン ​

javascript
// サーバー時間同期
const syncServerTime = async () => {
  const response = await fetch('/api/server-time');
  const serverTime = await response.json();
  const localTime = Date.now();
  const timeDiff = serverTime - localTime;
  
  // カウントダウンを調整
  const adjustedTime = targetTime - timeDiff;
  return Math.max(0, adjustedTime);
};

// ネットワーク再接続後の同期
window.addEventListener('online', () => {
  syncServerTime().then(time => {
    countDownRef.value?.reset();
    // 時間を再設定
  });
});

多言語時間フォーマット ​

javascript
const formatByLocale = (locale) => {
  const formats = {
    'zh-CN': 'DD天 HH:mm:ss',
    'en-US': 'DD days HH:mm:ss',
    'ja-JP': 'DD日 HH:mm:ss'
  };
  return formats[locale] || formats['zh-CN'];
};

🔧 よくある問題と解決策 ​

時間精度の問題 ​

javascript
// Q: なぜカウントダウンが正確でないのですか？
// A: 不正確な時間計算の使用を避けてください

// ❌ 間違った方法
const endTime = new Date('2024-12-31 23:59:59');
const now = new Date();
const time = endTime - now; // 不正確な可能性があります

// ✅ 正しい方法
const getAccurateTime = async () => {
  const response = await fetch('/api/server-time');
  const serverTime = await response.json();
  const endTime = new Date('2024-12-31T23:59:59Z').getTime();
  return Math.max(0, endTime - serverTime);
};

ページ切り替え後にカウントダウンが停止する ​

javascript
// Page Visibility API を使用してページ切り替えを処理
let pausedTime = 0;

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    // ページが非表示のときに時間を記録
    pausedTime = Date.now();
  } else {
    // ページが表示されたときに時間を同期
    if (pausedTime) {
      const elapsed = Date.now() - pausedTime;
      // カウントダウンを調整
      syncCountdown(elapsed);
    }
  }
});

メモリリークの防止 ​

javascript
// コンポーネントが破棄されたときにタイマーをクリーンアップ
onUnmounted(() => {
  if (countDownRef.value) {
    countDownRef.value.pause();
  }
});

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

創造的なカウントダウンスタイル ​

css
/* ネオン効果 */
.neon-countdown {
  color: #00ffff;
  text-shadow: 
    0 0 5px #00ffff,
    0 0 10px #00ffff,
    0 0 15px #00ffff;
  animation: neon-flicker 2s infinite alternate;
}

/* ページめくり効果 */
.flip-countdown {
  perspective: 1000px;
}

.flip-countdown .digit {
  transform-style: preserve-3d;
  transition: transform 0.6s;
}

/* プログレスリングカウントダウン */
.circular-countdown {
  position: relative;
  width: 120px;
  height: 120px;
}

.circular-countdown svg {
  transform: rotate(-90deg);
}

.circular-countdown .progress-ring {
  stroke-dasharray: 377; /* 2 * π * 60 */
  stroke-dashoffset: 377;
  animation: countdown-progress linear;
}

テーマバリエーション ​

javascript
// 緊急カウントダウンテーマ
const urgentTheme = {
  '--van-count-down-text-color': '#ff4444',
  '--van-count-down-font-size': '24px',
  '--van-count-down-font-weight': 'bold'
};

// エレガントなカウントダウンテーマ
const elegantTheme = {
  '--van-count-down-text-color': '#666',
  '--van-count-down-font-size': '16px',
  '--van-count-down-font-family': 'serif'
};

🚀 高度な機能拡張 ​

カスタムカウントダウンコンポーネント ​

vue
<template>
  <div class="advanced-countdown">
    <van-count-down
      ref="countDown"
      :time="time"
      :format="format"
      @change="handleChange"
      @finish="handleFinish"
    >
      <template #default="{ currentTime }">
        <div class="time-blocks">
          <div class="time-block">
            <span class="number">{{ currentTime.days }}</span>
            <span class="label">日</span>
          </div>
          <div class="time-block">
            <span class="number">{{ currentTime.hours }}</span>
            <span class="label">時</span>
          </div>
          <div class="time-block">
            <span class="number">{{ currentTime.minutes }}</span>
            <span class="label">分</span>
          </div>
          <div class="time-block">
            <span class="number">{{ currentTime.seconds }}</span>
            <span class="label">秒</span>
          </div>
        </div>
      </template>
    </van-count-down>
  </div>
</template>

📚 関連リンク ​

技術ドキュメント ​

デザインリソース ​

関連コンポーネント ​

Vant に基づく企業向けモバイルソリューション

Copyright © 2025 siex.cn ｜ sitemap