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

RollingText \u7FFB\u6EDA\u6587\u672C\u52A8\u6548

\n

\u4ECB\u7ECD

\n

\u6587\u672C\u7FFB\u6EDA\u52A8\u6548\uFF0C\u53EF\u4EE5\u7FFB\u6EDA\u6570\u5B57\u548C\u5176\u4ED6\u7C7B\u578B\u6587\u672C\u3002\u8BF7\u5347\u7EA7 vant \u5230 >= 4.6.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 { RollingText } from 'vant';\n\nconst app = createApp();\napp.use(RollingText);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u4F60\u53EF\u4EE5\u901A\u8FC7 start-num \u8BBE\u7F6E\u8D77\u59CB\u6570\u503C\uFF0Ctarget-num \u8BBE\u7F6E\u76EE\u6807\u6570\u503C\u3002RollingText \u7EC4\u4EF6\u4F1A\u81EA\u52A8\u5F00\u59CB\u52A8\u753B\uFF0C\u4ECE\u8D77\u59CB\u6570\u503C\u7FFB\u6EDA\u5230\u76EE\u6807\u6570\u503C\u3002

\n
<van-rolling-text :start-num="0" :target-num="123" />\n
\n

\u8BBE\u7F6E\u7FFB\u6EDA\u65B9\u5411

\n

\u4F60\u53EF\u4EE5\u901A\u8FC7 direction \u5C5E\u6027\u8BBE\u7F6E\u6570\u5B57\u7684\u7FFB\u6EDA\u65B9\u5411\uFF0C\u9ED8\u8BA4\u4E3A\u5411\u4E0B\u7FFB\u6EDA\uFF0C\u8BBE\u7F6E\u4E3A up \u5373\u53EF\u5411\u4E0A\u7FFB\u6EDA\u3002

\n
<van-rolling-text :start-num="0" :target-num="432" direction="up" />\n
\n

\u8BBE\u7F6E\u5404\u6570\u4F4D\u505C\u6B62\u987A\u5E8F

\n

\u4F60\u53EF\u4EE5\u901A\u8FC7 stop-order \u5C5E\u6027\u8BBE\u7F6E\u52A8\u753B\u5404\u4E2A\u6570\u4F4D\u7684\u505C\u6B62\u5148\u540E\u987A\u5E8F\u3002\u9ED8\u8BA4\u5148\u505C\u6B62\u9AD8\u4F4D\uFF0C\u8BBE\u7F6E\u4E3A rtl \u53EF\u4EE5\u5148\u4ECE\u4E2A\u4F4D\u505C\u6B62\u3002

\n
<van-rolling-text :start-num="0" :target-num="54321" stop-order="rtl" />\n
\n

\u7FFB\u8F6C\u975E\u6570\u5B57\u5185\u5BB9

\n

\u4F60\u53EF\u4EE5\u4F7F\u7528 text-list \u5C5E\u6027\u8BBE\u7F6E\u975E\u6570\u5B57\u5185\u5BB9\u7684\u7FFB\u8F6C\u3002\u7EC4\u4EF6\u4F1A\u4ECE\u6570\u7EC4\u7684\u7B2C\u4E00\u9879\u7FFB\u8F6C\u5230\u6700\u540E\u4E00\u9879\uFF0C\u8BF7\u786E\u4FDD\u6570\u7EC4\u957F\u5EA6\u5927\u4E8E\u7B49\u4E8E 2\uFF0C\u4EE5\u53CA\u6BCF\u4E00\u9879\u7684\u957F\u5EA6\u4E00\u81F4\u3002

\n
<van-rolling-text :text-list="textList" :duration="1" />\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const textList = ref([\n      'aaaaa',\n      'bbbbb',\n      'ccccc',\n      'ddddd',\n      'eeeee',\n      'fffff',\n      'ggggg',\n    ]);\n    return { textList };\n  },\n};\n
\n

\u81EA\u5B9A\u4E49\u6837\u5F0F

\n

RollingText \u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E00\u4E9B CSS \u53D8\u91CF\uFF0C\u4F60\u53EF\u4EE5\u8986\u76D6\u8FD9\u4E9B\u53D8\u91CF\u6765\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4E5F\u53EF\u4EE5\u76F4\u63A5\u4FEE\u6539\u7EC4\u4EF6\u7684\u6837\u5F0F\u3002\u6B64\u5916\uFF0C\u4F60\u8FD8\u53EF\u4EE5\u901A\u8FC7 height \u5C5E\u6027\u8BBE\u7F6E\u6570\u5B57\u9AD8\u5EA6\u3002

\n
<van-rolling-text\n  class="my-rolling-text"\n  :height="54"\n  :start-num="12345"\n  :target-num="54321"\n/>\n
\n
.my-rolling-text {\n  --van-rolling-text-background: #1989fa;\n  --van-rolling-text-color: white;\n  --van-rolling-text-font-size: 24px;\n  --van-rolling-text-gap: 6px;\n  --van-rolling-text-item-border-radius: 5px;\n  --van-rolling-text-item-width: 40px;\n}\n
\n

\u624B\u52A8\u63A7\u5236

\n

\u901A\u8FC7 ref \u83B7\u53D6\u5230\u7EC4\u4EF6\u5B9E\u4F8B\u540E\uFF0C\u4F60\u53EF\u4EE5\u8C03\u7528 start\u3001reset \u65B9\u6CD5\uFF0Cstart \u65B9\u6CD5\u7528\u4E8E\u5F00\u59CB\u52A8\u753B\uFF0Creset \u65B9\u6CD5\u7528\u4E8E\u91CD\u7F6E\u52A8\u753B\u3002

\n
<van-rolling-text\n  ref="rollingTextRef"\n  :start-num="0"\n  :target-num="54321"\n  :auto-start="false"\n/>\n<van-grid clickable :column-num="3">\n  <van-grid-item icon="play-circle-o" :text="start" @click="start" />\n  <van-grid-item icon="replay" :text="reset" @click="reset" />\n</van-grid>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const rollingTextRef = ref(null);\n    const start = () => {\n      rollingTextRef.value.start();\n    };\n    const reset = () => {\n      rollingTextRef.value.reset();\n    };\n    return { rollingTextRef, start, reset };\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\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
start-num\u8D77\u59CB\u6570\u503Cnumber0
target-num\u76EE\u6807\u6570\u503Cnumber-
text-list\u5185\u5BB9\u6570\u7EC4\uFF0C\u7528\u4E8E\u7FFB\u8F6C\u975E\u6570\u5B57\u5185\u5BB9string[][]
duration\u52A8\u753B\u65F6\u957F\uFF0C\u5355\u4F4D\u4E3A\u79D2number2
direction\u6587\u672C\u7FFB\u6EDA\u65B9\u5411\uFF0C\u503C\u4E3A down \u548C upstringdown
auto-start\u662F\u5426\u81EA\u52A8\u5F00\u59CB\u52A8\u753Bbooleantrue
stop-order\u5404\u4E2A\u6570\u4F4D\u52A8\u753B\u505C\u6B62\u5148\u540E\u987A\u5E8F\uFF0C\u503C\u4E3A ltr \u548C rtlstringltr
height\u6570\u5B57\u9AD8\u5EA6\uFF0C\u5355\u4F4D\u4E3A pxnumber40
\n

\u65B9\u6CD5

\n

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 RollingText \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
start\u5F00\u59CB\u52A8\u753B--
reset\u91CD\u7F6E\u52A8\u753B--
\n

\u7C7B\u578B\u5B9A\u4E49

\n

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

\n
import type {\n  RollingTextProps,\n  RollingTextInstance,\n  RollingTextDirection,\n  RollingTextStopOrder,\n} from 'vant';\n
\n

RollingTextInstance \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A

\n
import { ref } from 'vue';\nimport type { RollingTextInstance } from 'vant';\n\nconst rollingTextRef = ref<RollingTextInstance>();\n\nrollingTextRef.value?.start();\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\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-rolling-text-backgroundinherit\u5355\u4E2A\u6570\u4F4D\u80CC\u666F\u8272
--van-rolling-text-colorvar(--van-text-color)\u6570\u5B57\u989C\u8272
--van-rolling-text-font-sizevar(--van-font-size-md)\u5B57\u4F53\u5927\u5C0F
--van-rolling-text-gap0px\u6570\u4F4D\u4E4B\u95F4\u7684\u95F4\u9694
--van-rolling-text-item-width15px\u5355\u4E2A\u6570\u4F4D\u5BBD\u5EA6
--van-rolling-text-item-border-radius0px\u5355\u4E2A\u6570\u4F4D\u8FB9\u6846\u5706\u89D2
\n
'},null,8,l))}}}]);