How to encapsulate and realize the random number of lottery by vue component

Today, I would like to share with you how the vue component encapsulates the relevant knowledge points about how to achieve random lottery numbers, with detailed content and clear logic. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

1. Sub-component export default {name:'countUp', props: {lastSymbol: {type:String, default: "bit"}, value: {/ / scroll to end the final display of the number type: [String,Number], default:100 }, from: {/ / starting digits type: [String,Number], default:0}, speed: {/ / Total time type: [String,Number], default:2000,} RefreshInterval: {/ / time to refresh once type: [String,Number], default:10,}, beforeSize: {/ / minimum number of displayed digits before decimal point If insufficient, use 0 instead of type: [String,Number], default:0}, decimals: {/ / the number of places after the decimal point Decimal type: [String,Number], default:2}, isstart: {/ / whether to start scrolling type:Boolean, default:true}}, data () {return {loops:'' / / number of refreshes increment:'', / / an increased number of refreshes loopCount:'', / / record the number of refreshes CurrentValue:'', / / starting digits interval:'', / / timer sizeNum:'',// the length of current digits sizeNumBefore:'' / / number of digits before the current decimal point}}, watch: {isstart (val) {if (val) {this.start ()} else {clearInterval (this.interval) }, methods: {start () {this.loops = Math.ceil (this.speed / this.refreshInterval) / / number of refreshes this.increment = (this.value-this.from) / this.loops / / (ending number-starting number) / number of refresh Refresh an increased value this.loopCount = 0 / / record the number of refreshes this.CurrentValue = this.from / / the starting number this.interval = setInterval (this.updateTimer,this.refreshInterval) / / set the timer Execute} without a period of time, updateTimer () {/ / refresh once numerical overlay this.CurrentValue+=this.increment / / currently displayed value this.loopCount++ / / refresh times + 1 var tim = this.CurrentValue.toFixed (this.decimals) / / rounding the current value The current value this.sizeNum = String (tim) .length after tim tetrahedral matter This.sizeNumBefore = this.sizeNum-this.decimals-1 If (this.sizeNumBefore > = this.beforeSize) {/ / the number of decimal places of the current number "= the required number of decimal places this.$emit ('sendValue',tim + this.lastSymbol)} else {tim = Array (this.beforeSize-this.sizeNumBefore + 1). Join (' 0') + tim This.$emit ('sendValue',tim + this.lastSymbol)} if (Number (this.loopCount) > = Number (this.loops)) {/ / clear timer clearInterval (this.interval) },} II. Whether the parent component {{currentNum}} starts scrolling import countUp from'.. / components/countUp/countUp.vue'. / / drop-down box with popup mask export default {name:'cecountUp', components: {/ / register component countUp}, data () {return {currentNum: "lottery is about to begin", / / current value isstart:false, / / whether to start scrolling values} }, methods: {acceptValue (val) {/ / receive the current numerical display to the page this.currentNum = val}, goChoujiang () {/ / change the lottery this.isstart =! this.isstart}},} .changeNum {color:red; font-size: 32px;} .btn {background-color: pink; box-shadow:0px 2px 4px 0px rgba (255pm 130min 00.7)} III.

These are all the contents of the article "how vue components encapsulate raffle random numbers". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.