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

This article will explain in detail whether vuejs can be used as a turntable, and the content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Can vuejs make a turntable?

Configurable round raffle turntable assembly in Vue

First, the train of thought analysis of the whole lottery process:

Click the pointer in the middle of the turntable (that is, start the lottery button) to determine whether it can be rotated (the specific logic is encapsulated in canBeRotated ()-whether the number of raffles currently owned by ① is greater than 0 ② is now rotating (locked)), and then proceed to the next step, otherwise the corresponding prompt pops up.

Get the location where the turntable should stop, should interact with the background, but here for demonstration purposes only, the local random sampling of 0: 5.

After the interaction with the background successfully obtains the position of the stop, lock the turntable and reduce the number of lucky draw.

Tell the turntable assembly to start turning and stop at the place set in step 2 at the end of the animation.

When the turntable rotates, stop at the place set in step 3 and then prompt to win the prize and unlock it.

Second, what needs to be done by the turntable assembly of the round raffle

You can customize the background color and outer border color of each turntable. (turntableStyleOption attribute)

The size and position of the turntable. (when calling, add a class to the component, with turntable in the code)

Customize the number of turns to turn when the turntable is running. (rotateCircle attribute)

You can customize how long it takes to run the animation. (duringTime attribute)

By receiving the prize information (prizeData) transmitted by the parent component, it is displayed in the position of each turntable. (getRotateAngle () method for calculating the angle to rotate according to the center of the circle)

The method (rotate) that starts turning after being called by the parent component and stops at the specified position tells the parent component that it has stopped at the end of the animation.

The name and picture of the prize can be customized.

III. Page preview

IV. Basic usage

Quote

Import roundTurntable from'. / components/roundTurntable'

Statement

Components: {roundTurntable}

Call

{{scope.item.prizeName}}

Data () {return {/ / the prize data on the turntable prizeData: [{id: 1, prizeName: '2000 yuan Jingdong coupon', prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/1.png',}, {id: 2, prizeName:' 300RMB Jingdong coupon' PrizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/7.png',}, {id: 3, prizeName:' 50 bitcoins', prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/3.png',}, {id: 4, prizeName:' 50 CNY phone coupon' PrizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/4.png',}, {id: 5, prizeName:' 100RMB phone coupon', prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/5.png',}, {id: 6, prizeName:' 100bitcoin' PrizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/6.png',}], / / number of turns rotateCircle: 6, / / duration of rotation (s) duringTime: 4.5, / / options for turntable style turntableStyleOption: {/ / background color prizeBgColors: [' # AE3EFF','# 4D3FFFF,'# FC262C','# 3A8BFFF' '# EE7602',' # FE339F'], / / the outer border color of the turntable borderColor:'# 199301 rotation,}},}}, methods: {/ / the function triggered by the turntable has been rotated () {/ / prompt to win the prize alert (`Congratulations on winning the prize, your prize is: ${this.prizeDatathis.prizeName} `) },}, .turntable {position: absolute; left: calc (50%-200px); top: calc (50%-200px); width: 400px; height: 400px;} .turntable-name {/ * background: pink;*/ position: absolute; left: 10px; top: 20px; width: calc (10px); font-size: 26px; text-align: center; color: # fff;}. Turntable-img {position: absolute / * 50%-width / 2cm / left: calc (50-80px / 2); top: 60px; width: 80px; height: 80px; img {display: inline-block; width: 100%; height: 100% 5. Attribute description of roundTurntable component Parameter description Type default value ref get the dom node of the component The start rotation animation method of the invocation subcomponent uses the prize data displayed on the turntable by the this.$ refs [refName] .rotation (index) string-prizeData the number of laps to turn the array-rotateCircle turntable needs to last (in seconds) the style option of the number4.5turntableStyleOption turntable (background color, outer frame color) object {prizeBgColors: ['# AE3EFF','# 4D3FFF,'# FC262C','# 3A8BFF,'# EE7602' '# FE339F'], borderColor:' # 199301'} style string- used to define the location and size of the turntable 6. Event description of the roundTurntable component event name description of the callback parameter endRotation event callback triggered after the turntable stops-7. Complete project code

Https://github.com/LiaPig/vue-round-turntable

About whether vuejs can do turntable to share here, I hope the above content can help you to a certain extent, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.