Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.