ホーム エクスプローラ ヘルプ
サインイン
githab
/
nutui
3
0
Fork 0
ファイル
ツリー: fe7f7c7a0b
ブランチ タグ
nutui
/
3.1.5
/
doc.99ba13a6.js

doc.99ba13a6.js 11 KB
履歴 Raw

1 
  1. import{e as s,o as a,G as n}from"./vendor.6bc94963.js";const t={class:"markdown-body"},l=[n('<h1>CountUp 数字滚动</h1><h3>介绍</h3><p>数字滚动组件，用于数字的动态效果展示</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-comment">// vue</span>\n<span class="hljs-keyword">import</span> { CountUp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n<span class="hljs-comment">// taro</span>\n<span class="hljs-keyword">import</span> { CountUp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui-taro&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(CountUp);\n</code></pre><h2>代码演示</h2><h2>基本用法</h2><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-countup</span> <span class="hljs-attr">:init-num</span>=<span class="hljs-string">&#39;0&#39;</span> <span class="hljs-attr">:end-num</span>=<span class="hljs-string">&#39;200&#39;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-countup</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-countup</span> <span class="hljs-attr">:init-num</span>=<span class="hljs-string">&#39;150.00&#39;</span> <span class="hljs-attr">:end-num</span>=<span class="hljs-string">&#39;0.00&#39;</span> <span class="hljs-attr">:speed</span>=<span class="hljs-string">&#39;2.62&#39;</span> <span class="hljs-attr">:to-fixed</span>=<span class="hljs-string">&#39;2&#39;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-countup</span>&gt;</span>\n\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-countup</span> <span class="hljs-attr">:init-num</span>=<span class="hljs-string">&#39;1000.00&#39;</span> <span class="hljs-attr">:end-num</span>=<span class="hljs-string">&#39;0.00&#39;</span> <span class="hljs-attr">:speed</span>=<span class="hljs-string">&#39;6.3&#39;</span> <span class="hljs-attr">:start-flag</span>=<span class="hljs-string">&#39;startNum&#39;</span> <span class="hljs-attr">:to-fixed</span>=<span class="hljs-string">&#39;2&#39;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-countup</span>&gt;</span>\n</code></pre><h2>数字滚动</h2><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-countup</span> <span class="hljs-attr">:scrolling</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">:init-num</span>=<span class="hljs-string">&#39;17.618&#39;</span> <span class="hljs-attr">:during</span>=<span class="hljs-string">&quot;600&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">nut-countup</span>&gt;</span>\n</code></pre><h2>自定义数字图片展示</h2><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-countup</span>\n    <span class="hljs-attr">:custom-change-num</span>=<span class="hljs-string">&quot;customNumber&quot;</span>\n    <span class="hljs-attr">:custom-bg-img</span>=<span class="hljs-string">&quot;bgImage&quot;</span>\n    <span class="hljs-attr">:custom-spac-num</span>=<span class="hljs-string">&quot;11&quot;</span>\n    <span class="hljs-attr">:num-width</span>=<span class="hljs-string">&quot;33&quot;</span>\n    <span class="hljs-attr">:num-height</span>=<span class="hljs-string">&quot;47&quot;</span>\n    <span class="hljs-attr">:during</span>=<span class="hljs-string">&quot;5000&quot;</span>\n&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-countup</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n    <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span> {\n        <span class="hljs-keyword">return</span> {\n            <span class="hljs-attr">customNumber</span>: <span class="hljs-number">618</span>, \n            <span class="hljs-attr">bgImage</span>: <span class="hljs-string">&#39;https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png&#39;</span>\n        };\n    },\n    <span class="hljs-attr">methods</span>: {\n        <span class="hljs-function"><span class="hljs-title">run</span>(<span class="hljs-params"></span>)</span> {\n            <span class="hljs-keyword">let</span> timer = <span class="hljs-literal">null</span>;\n            timer = <span class="hljs-built_in">setInterval</span>(<span class="hljs-function">() =&gt;</span> {\n                <span class="hljs-built_in">this</span>.customNumber = <span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random() * (<span class="hljs-number">700</span> - <span class="hljs-number">100</span> + <span class="hljs-number">1</span>) + <span class="hljs-number">100</span>);\n            }, <span class="hljs-number">5000</span>);\n        }\n    },\n    <span class="hljs-function"><span class="hljs-title">mounted</span>(<span class="hljs-params"></span>)</span> {\n        <span class="hljs-built_in">this</span>.run();\n    }\n};\n</code></pre><h2>抽奖</h2><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-countup</span>\n    <span class="hljs-attr">ref</span>=<span class="hljs-string">&quot;countup-machine&quot;</span>\n    <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;machine&quot;</span>\n    <span class="hljs-attr">:machine-num</span>=<span class="hljs-string">&quot;machineNum&quot;</span>\n    <span class="hljs-attr">:machine-prize-num</span>=<span class="hljs-string">&quot;5&quot;</span>\n    <span class="hljs-attr">:machine-prize-level</span>=<span class="hljs-string">&quot;prizeLevel&quot;</span>\n    <span class="hljs-attr">:custom-bg-img</span>=<span class="hljs-string">&quot;bgImage&quot;</span>\n    <span class="hljs-attr">:num-width</span>=<span class="hljs-string">&quot;100&quot;</span>\n    <span class="hljs-attr">:num-height</span>=<span class="hljs-string">&quot;100&quot;</span>\n    <span class="hljs-attr">:during</span>=<span class="hljs-string">&quot;3000&quot;</span>\n    @<span class="hljs-attr">scroll-end</span>=<span class="hljs-string">&quot;scrollAniEnd&quot;</span>\n&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-countup</span>&gt;</span>\n<span class="hljs-tag">&lt;<span class="hljs-name">nut-button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">&quot;startRole&quot;</span> <span class="hljs-attr">:disabled</span>=<span class="hljs-string">&quot;startFlag&quot;</span>&gt;</span>抽奖<span class="hljs-tag">&lt;/<span class="hljs-name">nut-button</span>&gt;</span>\n</code></pre><pre><code class="language-javascript"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> {\n    <span class="hljs-function"><span class="hljs-title">data</span>(<span class="hljs-params"></span>)</span> {\n        <span class="hljs-keyword">return</span> {\n            <span class="hljs-attr">startFlag</span>: <span class="hljs-literal">false</span>,\n            <span class="hljs-attr">machineNum</span>: <span class="hljs-number">3</span>,\n            <span class="hljs-attr">bgImage</span>: <span class="hljs-string">&#39;https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png&#39;</span>,\n            <span class="hljs-attr">prizeLevel</span>: <span class="hljs-number">0</span>\n        };\n    },\n    <span class="hljs-attr">methods</span>: {\n        <span class="hljs-function"><span class="hljs-title">startRole</span>(<span class="hljs-params"></span>)</span> {\n            <span class="hljs-built_in">this</span>.prizeLevel = <span class="hljs-built_in">Math</span>.floor(<span class="hljs-built_in">Math</span>.random() * <span class="hljs-number">5</span> + <span class="hljs-number">1</span>);\n            <span class="hljs-built_in">this</span>.startFlag = <span class="hljs-literal">true</span>;\n            <span class="hljs-built_in">this</span>.$refs[<span class="hljs-string">&#39;countup-machine&#39;</span>].machineLuck();\n        },\n        <span class="hljs-function"><span class="hljs-title">scrollAniEnd</span>(<span class="hljs-params"></span>)</span> {\n            <span class="hljs-built_in">this</span>.$toast.text(<span class="hljs-string">&#39;恭喜中奖！！！&#39;</span>);\n            <span class="hljs-built_in">setTimeout</span>(<span class="hljs-function">() =&gt;</span> {\n                <span class="hljs-built_in">this</span>.startFlag = <span class="hljs-literal">false</span>;\n            }, <span class="hljs-number">300</span>);\n        }\n    }\n};\n</code></pre><h2>Prop</h2><table><thead><tr><th>字段</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>init-num</td><td>初始数字</td><td>Number</td><td>0</td></tr><tr><td>end-num</td><td>结束数字</td><td>Number</td><td>0</td></tr><tr><td>speed</td><td>间隔数字，目前仅支持基本用法</td><td>Number</td><td>1</td></tr><tr><td>to-fixed</td><td>保留小数点后几位</td><td>Number</td><td>以传入的数字为准</td></tr><tr><td>start-flag</td><td>触发数字滚动的标识</td><td>Boolean</td><td>true</td></tr><tr><td>during</td><td>滚动一次运行时间</td><td>Number</td><td>1000</td></tr><tr><td>num-width</td><td>数字宽度，常用于自定义无缝滚动</td><td>Number</td><td>20</td></tr><tr><td>num-height</td><td>数字高度，常用于自定义无缝滚动（抽奖功能必传）</td><td>Number</td><td>20</td></tr><tr><td>scrolling</td><td>用于数字滚动展示</td><td>Boolean</td><td>false</td></tr><tr><td>custom</td><td>用于自定义图片数字滚动</td><td>Boolean</td><td>false</td></tr><tr><td>custom-change-num</td><td>要变化的数字（用于自定义图片,initNum\\endNum在此无效）</td><td>Number</td><td>1</td></tr><tr><td>custom-bg-img</td><td>自定义图片（建议使用雪碧图实现，使用抽奖功能必须使用雪碧图）</td><td>-</td><td>-</td></tr><tr><td>custom-spac-num</td><td>图片中数字之间可能会存在间距</td><td>Number</td><td>0</td></tr><tr><td>type</td><td>使用抽奖功能必传“machine”</td><td>string</td><td>‘’</td></tr><tr><td>machine-prize-num</td><td>奖品个数，一共多少个奖品，必传</td><td>number</td><td>4</td></tr><tr><td>machine-num</td><td>抽奖位，即滚动几个，必传</td><td>number</td><td>3</td></tr><tr><td>machine-prize-level</td><td>中奖图标，图标在雪碧图中的位置</td><td>number</td><td>0</td></tr><tr><td>machine-trun-more</td><td>滚动圈数</td><td>number</td><td>0</td></tr></tbody></table><blockquote><p>说明：抽奖功能需要结合图标位置计算，故需传入雪碧图中单个图标的高度 num-height；中奖奖品根据雪碧图中的奖品位数来定位，从 1 到 N；</p></blockquote><h2>Event</h2><table><thead><tr><th>字段</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>scroll-end</td><td>滚动结束后回调函数</td><td>-</td></tr></tbody></table>',21)],p={setup:(n,{expose:p})=>(p({frontmatter:{}}),(n,p)=>(a(),s("div",t,l)))};export{p as default};
    2.