/*! For license information please see 1722.aac6dcd9.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["1722"],{82726:function(s,a,n){"use strict";n.r(a);var t=n("80681");let l=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Barrage

\n

Intro

\n

To realize the critical subtitle function when watching the video. Please upgrade vant to >= v4.4.0 before using this component.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Barrage } from 'vant';\n\nconst app = createApp();\napp.use(Barrage);\n
\n

Usage

\n

Basic Usage

\n
<van-barrage v-model="list">\n  <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n  <van-button @click="add" type="primary" size="small"> barrage </van-button>\n</van-space>\n
\n
export default {\n  setup() {\n    const defaultList = [\n      { id: 100, text: 'Lightweight' },\n      { id: 101, text: 'Customizable' },\n      { id: 102, text: 'Mobile' },\n      { id: 103, text: 'Vue' },\n      { id: 104, text: 'Library' },\n      { id: 105, text: 'VantUI' },\n      { id: 106, text: '666' },\n    ];\n\n    const list = ref([...defaultList]);\n    const add = () => {\n      list.value.push({ id: Math.random(), text: 'Barrage' });\n    };\n    return { list, add };\n  },\n};\n
\n

Imitate video barrage

\n
<van-barrage v-model="list" ref="barrage" :auto-play="false">\n  <div class="video" style="width: 100%; height: 150px"></div>\n</van-barrage>\n<van-space style="margin-top: 10px">\n  <van-button @click="add" type="primary" size="small" :disabled="!isPlay">\n    barrage\n  </van-button>\n  <van-button @click="toggle()" size="small">\n    {{ isPlay ? 'pause' : 'play' }}\n  </van-button>\n</van-space>\n
\n
export default {\n  setup() {\n    const defaultList = [\n      { id: 100, text: 'Lightweight' },\n      { id: 101, text: 'Customizable' },\n      { id: 102, text: 'Mobile' },\n      { id: 103, text: 'Vue' },\n      { id: 104, text: 'Library' },\n      { id: 105, text: 'VantUI' },\n      { id: 106, text: '666' },\n    ];\n\n    const list = ref([...defaultList]);\n    const barrage = ref<BarrageInstance>();\n    const add = () => {\n      list.value.push({ id: Math.random(), text: 'Barrage' });\n    };\n\n    const [isPlay, toggle] = useToggle(false);\n\n    watch(isPlay, () => {\n      if (isPlay.value) barrage.value?.play();\n      else barrage.value?.pause();\n    });\n\n    return { list, barrage, isPlay, toggle, add };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-modelBarrage dataBarrageItem[]-
auto-playWhether to play the bullet screen automaticallybooleantrue
rowsThe number of lines of textnumber | string4
topSpacing between the top of the barrage area, unit pxnumber | string10
durationText animation duration, unit msnumber | string4000
delayBarrage animation delay, unit msnumber300
\n

Methods

\n

Use ref to get Barrage instance and call instance methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionAttributeReturn value
playPlay barrage--
pausePause barrage--
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultDefault slot
\n

Types

\n

The component exports the following type definitions:

\n
import type { BarrageProps, BarrageItem, BarrageInstance } from 'vant';\n
\n

Theming

\n

CSS Variables

\n

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-barrage-font-size16px-
--van-barrage-space10px-
--van-barrage-colorvar(--van-white)-
--van-barrage-fontinherit-
\n
'},null,8,l))}}}]);