/*! For license information please see 695.6c3630f9.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["695"],{65882: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 \u5F39\u5E55

\n

\u4ECB\u7ECD

\n

\u5B9E\u73B0\u89C2\u770B\u89C6\u9891\u65F6\u5F39\u51FA\u7684\u8BC4\u8BBA\u6027\u5B57\u5E55\u529F\u80FD\u3002\u8BF7\u5347\u7EA7 vant \u5230 >= 4.4.0 \u7248\u672C\u6765\u4F7F\u7528\u8BE5\u7EC4\u4EF6\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

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

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u53EF\u4EE5\u901A\u8FC7 v-model \u53CC\u5411\u7ED1\u5B9A\u5F39\u5E55\u6570\u636E\uFF0CBarrage \u4F1A\u5728\u7EC4\u4EF6\u533A\u57DF\u5185\u64AD\u653E\u6587\u5B57\u5F39\u5E55\uFF0C\u4F7F\u7528\u6570\u7EC4\u6570\u636E push() \u53EF\u4EE5\u53D1\u9001\u5F39\u5E55\u6587\u5B57\u3002

\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"> \u5F39\u5E55 </van-button>\n</van-space>\n
\n
export default {\n  setup() {\n    const defaultList = [\n      { id: 100, text: '\u8F7B\u91CF' },\n      { id: 101, text: '\u53EF\u5B9A\u5236\u7684' },\n      { id: 102, text: '\u79FB\u52A8\u7AEF' },\n      { id: 103, text: 'Vue' },\n      { id: 104, text: '\u7EC4\u4EF6\u5E93' },\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\n    return { list, add };\n  },\n};\n
\n

\u6A21\u62DF\u89C6\u9891\u5F39\u5E55

\n

\u8BBE\u7F6E auto-play \u4E3A false \u5C5E\u6027\u540E\uFF0C\u9700\u8981\u4F7F\u7528 play() \u8FDB\u884C\u5F39\u5E55\u64AD\u653E\uFF0C\u6682\u505C\u53EF\u4EE5\u4F7F\u7528 pause() \u5B9E\u73B0\u3002

\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    \u5F39\u5E55\n  </van-button>\n  <van-button @click="toggle()" size="small">\n    {{ isPlay ? '\u6682\u505C' : '\u5F00\u59CB' }}\n  </van-button>\n</van-space>\n
\n
export default {\n  setup() {\n    const defaultList = [\n      { id: 100, text: '\u8F7B\u91CF' },\n      { id: 101, text: '\u53EF\u5B9A\u5236\u7684' },\n      { id: 102, text: '\u79FB\u52A8\u7AEF' },\n      { id: 103, text: 'Vue' },\n      { id: 104, text: '\u7EC4\u4EF6\u5E93' },\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
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
v-model\u5F39\u5E55\u6570\u636EBarrageItem[]-
auto-play\u662F\u5426\u81EA\u52A8\u64AD\u653E\u5F39\u5E55booleantrue
rows\u5F39\u5E55\u6587\u5B57\u884C\u6570number | string4
top\u5F39\u5E55\u6587\u5B57\u533A\u57DF\u9876\u90E8\u95F4\u8DDD\uFF0C\u5355\u4F4D pxnumber | string10
duration\u5F39\u5E55\u6587\u5B57\u6ED1\u8FC7\u5BB9\u5668\u7684\u65F6\u95F4\uFF0C\u5355\u4F4D msnumber | string4000
delay\u5F39\u5E55\u52A8\u753B\u5EF6\u65F6\uFF0C\u5355\u4F4D msnumber300
\n

\u65B9\u6CD5

\n

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Barrage \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
play\u64AD\u653E\u5F39\u5E55--
pause\u6682\u505C\u5F39\u5E55--
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u8BF4\u660E
default\u5F39\u5E55\u7EC4\u4EF6\u5B50\u5143\u7D20
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

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

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\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
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-barrage-font-size16px-
--van-barrage-space10px-
--van-barrage-colorvar(--van-white)-
--van-barrage-fontinherit-
\n
'},null,8,l))}}}]);