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

1. Analisis keseluruhan proses loteri:

1. Mengklik penunjuk di tengah-tengah karusel ( iaitu butang mulakan loteri), tentukan sama ada ia boleh diputarkan (logik khusus terkandung dalam 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.
2. Dapatkan kedudukan di mana meja putar harus berhenti, dan ia harus berinteraksi dengan latar belakang, tetapi ia hanya untuk tujuan tunjuk cara dan 0~5 dipilih secara rawak secara tempatan.
3. Selepas berjaya berinteraksi dengan latar belakang untuk mendapatkan kedudukan berhenti, kunci meja putar dan kurangkan bilangan cabutan.
4. Beritahu komponen meja putar untuk mula berputar dan berhenti di tempat yang ditetapkan dalam langkah 2 selepas animasi tamat.
5. Meja putar berputar dan berhenti di tempat yang ditetapkan dalam langkah 3 sebelum menggesa untuk menang dan membuka kunci.

2. Apa yang perlu dilakukan untuk komponen roda loteri bulat

1. Anda boleh menyesuaikan warna latar belakang dan warna sempadan luar setiap roda. (turntableStyleOptionHartanah)
2. Saiz dan kedudukan meja putar. (Apabila memanggil, tambahkan kelas pada komponen, iaitu turntable dalam kod)
3. Sesuaikan bilangan pusingan yang perlu dibuat oleh meja putar semasa ia berjalan. (rotateCircleAtribut)
4. Anda boleh menyesuaikan tempoh animasi berjalan. (duringTime atribut)
5. memaparkan kedudukan setiap roda dengan menerima maklumat hadiah (prizeData) yang diluluskan oleh komponen induk. (Kira sudut yang hendak diputar mengikut kaedah pusat bulatan getRotateAngle())
6. mula berputar selepas dipanggil oleh komponen induk, dan berhenti pada kedudukan yang ditentukan (rotate). animasi tamat, ia memberitahu komponen induk bahawa ia telah berhenti.
7. Nama dan gambar hadiah boleh disesuaikan.

3. Pratonton halaman

4. >

Penyata

import roundTurntable from './components/roundTurntable';

Panggil

components: {
  roundTurntable
},

3. 5 🎜>

6. Penerangan acara bagi komponen RoundTurntable

<round-turntable>
    <template>
      <p>{{ scope.item.prizeName }}</p>
      <p>
        <img  src="/static/imghw/default1.png" data-src="scope.item.prizeImg" class="lazy" 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 projek

https://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	—

Imej hadiah dan imej penunjuk yang digunakan adalah daripada:

事件名称	说明	回调参数
endRotation	转盘停下来后触发的事件回调	—

http://sc.chinaz.com/jiaobendemo.aspx?downloadid=12018113053246

Atas ialah kandungan terperinci Bolehkah vuejs membuat meja putar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!