import{e as a,o as n,G as t}from"./vendor.js";const l={class:"markdown-body"},p=t(`

CountUp \u6570\u5B57\u6EDA\u52A8

\u4ECB\u7ECD

\u6570\u5B57\u6EDA\u52A8\u7EC4\u4EF6\uFF0C\u7528\u4E8E\u6570\u5B57\u7684\u52A8\u6001\u6548\u679C\u5C55\u793A

\u5B89\u88C5

import { createApp } from 'vue';
// vue
import { CountUp } from '@nutui/nutui';
// taro
import { CountUp } from '@nutui/nutui-taro';

const app = createApp();
app.use(CountUp);

\u4EE3\u7801\u6F14\u793A

\u57FA\u672C\u7528\u6CD5

<nut-countup :init-num='0' :end-num='200'></nut-countup>

<nut-countup :init-num='150.00' :end-num='0.00' :speed='2.62' :to-fixed='2'></nut-countup>

<nut-countup :init-num='1000.00' :end-num='0.00' :speed='6.3' :start-flag='startNum' :to-fixed='2'></nut-countup>

\u6570\u5B57\u6EDA\u52A8

<nut-countup :scrolling="true" :init-num='17.618' :during="600"></nut-countup>

\u81EA\u5B9A\u4E49\u6570\u5B57\u56FE\u7247\u5C55\u793A

<nut-countup
    :custom-change-num="customNumber"
    :custom-bg-img="bgImage"
    :custom-spac-num="11"
    :num-width="33"
    :num-height="47"
    :during="5000"
>
</nut-countup>

export default {
    data() {
        return {
            customNumber: 618, 
            bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/133024/3/2251/2646/5ee7549aE8dc02d7e/de6901b6c72db396.png'
        };
    },
    methods: {
        run() {
            let timer = null;
            timer = setInterval(() => {
                this.customNumber = Math.floor(Math.random() * (700 - 100 + 1) + 100);
            }, 5000);
        }
    },
    mounted() {
        this.run();
    }
};

\u62BD\u5956

<nut-countup
    ref="countup-machine"
    type="machine"
    :machine-num="machineNum"
    :machine-prize-num="5"
    :machine-prize-level="prizeLevel"
    :custom-bg-img="bgImage"
    :num-width="100"
    :num-height="100"
    :during="3000"
    @scroll-end="scrollAniEnd"
>
</nut-countup>
<nut-button @click="startRole" :disabled="startFlag">\u62BD\u5956</nut-button>

export default {
    data() {
        return {
            startFlag: false,
            machineNum: 3,
            bgImage: 'https://img10.360buyimg.com/imagetools/jfs/t1/121466/20/6784/28830/5f06e7f2Edbb8998c/9bdd9e7b24dff9fe.png',
            prizeLevel: 0
        };
    },
    methods: {
        startRole() {
            this.prizeLevel = Math.floor(Math.random() * 5 + 1);
            this.startFlag = true;
            this.$refs['countup-machine'].machineLuck();
        },
        scrollAniEnd() {
            this.$toast.text('\u606D\u559C\u4E2D\u5956\uFF01\uFF01\uFF01');
            setTimeout(() => {
                this.startFlag = false;
            }, 300);
        }
    }
};

Prop

\u5B57\u6BB5	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
init-num	\u521D\u59CB\u6570\u5B57	Number	0
end-num	\u7ED3\u675F\u6570\u5B57	Number	0
speed	\u95F4\u9694\u6570\u5B57\uFF0C\u76EE\u524D\u4EC5\u652F\u6301\u57FA\u672C\u7528\u6CD5	Number	1
to-fixed	\u4FDD\u7559\u5C0F\u6570\u70B9\u540E\u51E0\u4F4D	Number	\u4EE5\u4F20\u5165\u7684\u6570\u5B57\u4E3A\u51C6
start-flag	\u89E6\u53D1\u6570\u5B57\u6EDA\u52A8\u7684\u6807\u8BC6	Boolean	true
during	\u6EDA\u52A8\u4E00\u6B21\u8FD0\u884C\u65F6\u95F4	Number	1000
num-width	\u6570\u5B57\u5BBD\u5EA6\uFF0C\u5E38\u7528\u4E8E\u81EA\u5B9A\u4E49\u65E0\u7F1D\u6EDA\u52A8	Number	20
num-height	\u6570\u5B57\u9AD8\u5EA6\uFF0C\u5E38\u7528\u4E8E\u81EA\u5B9A\u4E49\u65E0\u7F1D\u6EDA\u52A8\uFF08\u62BD\u5956\u529F\u80FD\u5FC5\u4F20\uFF09	Number	20
scrolling	\u7528\u4E8E\u6570\u5B57\u6EDA\u52A8\u5C55\u793A	Boolean	false
custom	\u7528\u4E8E\u81EA\u5B9A\u4E49\u56FE\u7247\u6570\u5B57\u6EDA\u52A8	Boolean	false
custom-change-num	\u8981\u53D8\u5316\u7684\u6570\u5B57\uFF08\u7528\u4E8E\u81EA\u5B9A\u4E49\u56FE\u7247,initNum\\endNum\u5728\u6B64\u65E0\u6548\uFF09	Number	1
custom-bg-img	\u81EA\u5B9A\u4E49\u56FE\u7247\uFF08\u5EFA\u8BAE\u4F7F\u7528\u96EA\u78A7\u56FE\u5B9E\u73B0\uFF0C\u4F7F\u7528\u62BD\u5956\u529F\u80FD\u5FC5\u987B\u4F7F\u7528\u96EA\u78A7\u56FE\uFF09	-	-
custom-spac-num	\u56FE\u7247\u4E2D\u6570\u5B57\u4E4B\u95F4\u53EF\u80FD\u4F1A\u5B58\u5728\u95F4\u8DDD	Number	0
type	\u4F7F\u7528\u62BD\u5956\u529F\u80FD\u5FC5\u4F20\u201Cmachine\u201D	string	\u2018\u2019
machine-prize-num	\u5956\u54C1\u4E2A\u6570\uFF0C\u4E00\u5171\u591A\u5C11\u4E2A\u5956\u54C1\uFF0C\u5FC5\u4F20	number	4
machine-num	\u62BD\u5956\u4F4D\uFF0C\u5373\u6EDA\u52A8\u51E0\u4E2A\uFF0C\u5FC5\u4F20	number	3
machine-prize-level	\u4E2D\u5956\u56FE\u6807\uFF0C\u56FE\u6807\u5728\u96EA\u78A7\u56FE\u4E2D\u7684\u4F4D\u7F6E	number	0
machine-trun-more	\u6EDA\u52A8\u5708\u6570	number	0

\u8BF4\u660E\uFF1A\u62BD\u5956\u529F\u80FD\u9700\u8981\u7ED3\u5408\u56FE\u6807\u4F4D\u7F6E\u8BA1\u7B97\uFF0C\u6545\u9700\u4F20\u5165\u96EA\u78A7\u56FE\u4E2D\u5355\u4E2A\u56FE\u6807\u7684\u9AD8\u5EA6 num-height\uFF1B\u4E2D\u5956\u5956\u54C1\u6839\u636E\u96EA\u78A7\u56FE\u4E2D\u7684\u5956\u54C1\u4F4D\u6570\u6765\u5B9A\u4F4D\uFF0C\u4ECE 1 \u5230 N\uFF1B

Event

\u5B57\u6BB5	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
scroll-end	\u6EDA\u52A8\u7ED3\u675F\u540E\u56DE\u8C03\u51FD\u6570	-

`,21),c=[p],o={setup(r,{expose:s}){return s({frontmatter:{}}),(e,d)=>(n(),a("div",l,c))}};export{o as default};