Barrage 弹幕 - Vant 4
バラゲーコンポーネントでアプリに瞬時に活気を与えます！動画視聴中にコメントが流れる機能を実現し、ユーザーに没入感のあるインタラクティブ体験を提供します
導入
js
import { Barrage } from 'vant';
app.use(Barrage);コード例
基本的な使い方
v-model でバラゲーデータを双方向バインドできます。Barrage はコンポーネント領域内でテキストバラゲーを再生し、配列データに push() を使用してバラゲーテキストを送信できます。簡単で使いやすく、効果がカッコ良いです！
html
<van-barrage v-model="list" />
<van-button type="primary" @click="add">送信バラゲー</van-button>ts
export default {
setup() {
const defaultList = [
{ id: 100, text: '軽量' },
{ id: 101, text: 'カスタマイズ可能' },
{ id: 102, text: 'モバイル端末' },
{ id: 103, text: 'Vue' },
{ id: 104, text: 'コンポーネントライブラリ' },
{ id: 105, text: 'VantUI' },
{ id: 106, text: '666' },
];
const list = ref([...defaultList]);
const add = () => {
list.value.push({
id: Math.random(),
text: 'Barrage',
});
};
return { list, add };
},
};動画バラゲーのシミュレーション
auto-play を false に設定すると、play() を使用してバラゲーを再生する必要があります。一時停止は pause() で実現できます。動画再生と完璧に連携し、本物のバラゲー体験を実現します！
html
<van-barrage
ref="barrage"
v-model="list"
auto-play="false"
style="height: 200px; background: #000"
/>
<van-button type="primary" @click="toggle" v-if="!isPlay">再生</van-button>
<van-button type="default" @click="toggle" v-else>一時停止</van-button>
<van-button type="danger" @click="add">送信バラゲー</van-button>ts
export default {
setup() {
const defaultList = [
{ id: 100, text: '軽量' },
{ id: 101, text: 'カスタマイズ可能' },
{ id: 102, text: 'モバイル端末' },
{ id: 103, text: 'Vue' },
{ id: 104, text: 'コンポーネントライブラリ' },
{ id: 105, text: 'VantUI' },
{ id: 106, text: '666' },
];
const list = ref([...defaultList]);
const barrage = ref<BarrageInstance>();
const add = () => {
list.value.push({
id: Math.random(),
text: 'Barrage',
});
};
const [isPlay, toggle] = useToggle(false);
watch(isPlay, () => {
if (isPlay.value) barrage.value?.play();
else barrage.value?.pause();
});
return { list, barrage, isPlay, toggle, add };
},
};API
Props
| パラメータ | 説明 | 型 | デフォルト値 |
|---|---|---|---|
| v-model | バラゲーデータ | BarrageItem[] | - |
| auto-play | バラゲーを自動再生するかどうか | boolean | true |
| rows | バラゲーテキストの行数 | number | string | 4 |
| top | バラゲーテキスト領域の上部間隔、単位 px | number | string | 10 |
| duration | バラゲーテキストがコンテナを横切る時間、単位 ms | number | string | 4000 |
| delay | バラゲーアニメーションの遅延、単位 ms | number | 300 |
メソッド
ref を使用して Barrage インスタンスを取得し、インスタンスメソッドを呼び出すことができます。詳細については、コンポーネントインスタンスメソッドを参照してください。
| メソッド名 | 説明 | パラメータ | 戻り値 |
|---|---|---|---|
| play | バラゲーを再生 | - | - |
| pause | バラゲーを一時停止 | - | - |
Slots
| 名前 | 説明 |
|---|---|
| default | バラゲーコンポーネントの子要素 |
タイプ定義
コンポーネントは次のTypeScriptタイプをエクスポートしています：
ts
export type BarrageProps = {
vModel: BarrageItem[];
autoPlay?: boolean;
rows?: number | string;
top?: number | string;
duration?: number | string;
delay?: number;
};
export type BarrageItem = {
id: number | string;
text: string;
};
export type BarrageInstance = {
play: () => void;
pause: () => void;
};テーマカスタマイズ
CSS変数
以下のCSS変数を使用して、コンポーネントのスタイルをカスタマイズできます。カスタマイズ方法については、テーマカスタマイズガイドを参照してください。
| 変数名 | デフォルト値 | 説明 |
|---|---|---|
| --van-barrage-font-size | 16px | - |
| --van-barrage-space | 10px | - |
| --van-barrage-color | var(--van-white) | - |
| --van-barrage-font | inherit | - |
📝 まとめ
Barrage バラゲーコンポーネントは、アプリに活気を注入する魔法のツールです！💬 静的なコンテンツを瞬時に生き生きとさせ、ユーザーに没入感のあるインタラクティブ体験を提供します。動画再生、ライブ配信、イベントページなど、あらゆる場面でアプリをより魅力的にします。
🎯 主な特徴：
- 🎬 動画同期：動画再生制御と完璧に連携
- 🎨 柔軟な設定：行数、速度、遅延など多様なパラメータに対応
- 🎭 動的追加：リアルタイムで新しいバラゲーを追加
- 📱 モバイル最適化：モバイル体験のために特別に設計
- 🎪 スムーズなアニメーション：滑らかなバラゲースクロール効果
- 🎮 再生制御：再生、一時停止などの操作をサポート
動画サイトからライブ配信プラットフォーム、イベントページからインタラクティブディスプレイまで、Barrage でアプリに活力と生き生き感を与えましょう！