Rumah >hujung hadapan web >View.js >Bolehkah vuejs membuat meja putar?
vuejs boleh membuat meja putar Cara pelaksanaannya ialah: 1. Buat butang loteri 2. Dapatkan kedudukan di mana meja putar harus berhenti; langkah 2 selepas animasi tamat 5. Tetapkan gesaan untuk membuka kunci fungsi memenangi hadiah.
Persekitaran pengendalian artikel ini: sistem Windows 7, versi Vue 2.9.6, komputer Dell G3.
Bolehkah vuejs membuat meja putar?
Komponen karusel loteri bulat yang boleh dikonfigurasikan dalam Vue
canBeRotated()
- ① Sama ada bilangan cabutan semasa lebih besar daripada 0 ② Sama ada ia sedang berputar (dikunci)), jika penghakiman diluluskan , teruskan ke langkah seterusnya Jika tidak, gesaan yang sepadan akan muncul. turntableStyleOption
Hartanah) turntable
dalam kod) rotateCircle
Atribut) duringTime
atribut) prizeData
) yang diluluskan oleh komponen induk. (Kira sudut yang hendak diputar mengikut kaedah pusat bulatan getRotateAngle()
) rotate
). animasi tamat, ia memberitahu komponen induk bahawa ia telah berhenti. import roundTurntable from './components/roundTurntable';
components: { roundTurntable },
<round-turntable> <template> <p>{{ scope.item.prizeName }}</p> <p> <img alt="Bolehkah vuejs membuat meja putar?" > </p> </template> </round-turntable>
data() { return { // 转盘上的奖品数据 prizeData: [ { id: 1, prizeName: '2000元京东券', prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/1.png', }, { id: 2, prizeName: '300元京东券', prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/7.png', }, { id: 3, prizeName: '50个比特币', prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/3.png', }, { id: 4, prizeName: '50元话费券', prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/4.png', }, { id: 5, prizeName: '100元话费券', prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/5.png', }, { id: 6, prizeName: '100个比特币', prizeImg: 'http://demo.sc.chinaz.net/Files/DownLoad/webjs1/201803/jiaoben5789/images/6.png', } ], // 转动的圈数 rotateCircle: 6, // 转动需要持续的时间(s) duringTime: 4.5, // 转盘样式的选项 turntableStyleOption: { // 背景色 prizeBgColors: ['#AE3EFF', '#4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F'], // 转盘的外边框颜色 borderColor: '#199301', }, } }, methods: { // 已经转动完转盘触发的函数 endRotation() { // 提示中奖 alert(`恭喜您获奖啦,您的奖品是:${this.prizeData[this.prizeIndex].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(100% - 20px); font-size: 26px; text-align: center; color: #fff; } .turntable-img { position: absolute; /*要居中就要50% - 宽度 / 2*/ left: calc(50% - 80px / 2); top: 60px; width: 80px; height: 80px; img { display: inline-block; width: 100%; height: 100%; } }7 Lengkapkan kod projekhttps://github.com/LiaPig/vue-round-turntable.
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
ref | 获取这组件的dom节点,调用子组件的开始转动动画方法要用到this.$refs[refName].rotate(index)
|
string | — |
prizeData | 显示在转盘上的奖品数据 | array | — |
rotateCircle | 转盘要转过的圈数 | number | 6 |
duringTime | 转动需要持续的时间(单位为秒s ) |
number | 4.5 |
turntableStyleOption | 转盘的样式选项(背景色、外边框颜色) | object | { prizeBgColors: ['#AE3EFF', '#4D3FFF', '#FC262C', '#3A8BFF', '#EE7602', '#FE339F'], borderColor: '#199301' } |
class | 用来定义转盘位置和大小的样式 | string | — |
事件名称 | 说明 | 回调参数 |
---|---|---|
endRotation | 转盘停下来后触发的事件回调 | — |
Atas ialah kandungan terperinci Bolehkah vuejs membuat meja putar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!