vuejs로 턴테이블을 만들 수 있나요?

vuejs는 턴테이블을 만들 수 있으며 구현 방법은 다음과 같습니다. 1. 추첨 버튼을 만듭니다. 2. 턴테이블이 멈춰야 하는 위치를 가져옵니다. 3. 배경과 상호 작용합니다. 4. 이후 2단계에서 설정한 장소에서 멈춥니다. 5. 프롬프트를 설정하면 상품이 잠금 해제됩니다.

이 문서의 운영 환경: Windows 7 시스템, Vue 버전 2.9.6, Dell G3 컴퓨터.

vuejs로 턴테이블을 만들 수 있나요?

Vue

에서 구성 가능한 원형 복권 턴테이블 구성 요소 1. 전체 복권 프로세스 분석:

1. 턴테이블 중앙에 있는 포인터(예: 복권 시작 버튼)를 클릭하여 회전할 수 있는지 확인합니다(특정 논리). In canBeRotated()에 캡슐화되어 있습니다. - ① 현재 그리기 횟수가 0보다 큰지 여부 ② 현재 회전 중인지(잠김)인지 여부를 전달하면 다음 단계로 진행하고, 그렇지 않으면 해당 프롬프트가 표시됩니다. 팝업됩니다.
canBeRotated()里--①当前拥有的抽奖次数是否大于0②现在是否正在转动着（被锁着）），判断通过则进行下一步, 否则弹出相应提示。
2. 获取转盘应该停止的位置，应该与后台交互，但这里仅作演示用途, 本地随机抽取0~5。
3. 与后台交互成功获取到该停止的位置后，锁定转盘且减少抽奖次数。
4. 告诉转盘组件，开始转动了，并且动画结束后停在步骤2设置的地方。
5. 转盘转动，停在步骤3设置的地方后再提示中奖，解锁。

二、圆形抽奖转盘组件需要做的事情

1. 可以自定义每一格转盘的背景颜色，外边框的颜色。（turntableStyleOption属性）
2. 转盘的大小与位置。（在调用时，给组件加个class，代码里为turntable）
3. 自定义这个转盘运转起来要转过的圈数。（rotateCircle属性）
4. 可以自定义运转动画的时长。（duringTime属性）
5. 通过接收到父组件传递过来的奖品信息（prizeData），显示在每一格转盘的位置。（计算要根据圆心旋转的角度getRotateAngle()方法）
6. 被父组件调用后就开始转动，并在指定位置停下的方法（rotate），结束动画后告诉父组件已停下。
7. 奖品的名称和图片可以自定义样式。

三、页面预览

四、基础用法

1. 引用

import roundTurntable from './components/roundTurntable';

2. 声明

components: {
  roundTurntable
},

3. 调用

<round-turntable>
    <template>
      <p>{{ scope.item.prizeName }}</p>
      <p>
        <img  src="/static/imghwm/default1.png" data-src="scope.item.prizeImg" class="lazy" alt="vuejs로 턴테이블을 만들 수 있나요?" >
      </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%;
  }
}

五、roundTurntable组件的属性说明

배경과 성공적으로 상호작용하여 정지 위치를 얻은 후 턴테이블을 잠그고 추첨 횟수를 줄이세요. 턴테이블 구성요소에 회전을 시작하고 애니메이션이 끝난 후 2단계에서 설정한 위치에서 멈추도록 지시합니다. 턴테이블이 회전하고 3단계에서 설정한 위치에서 정지한 후 승리 및 잠금 해제 메시지가 표시됩니다. 각 바퀴의 배경색과 외부 테두리 색상을 맞춤 설정할 수 있습니다. (turntableStyleOption속성)턴테이블이 실행될 때 필요한 회전 수를 사용자 정의하세요. (rotateCircle 속성)상위 컴포넌트에서 전달한 경품 정보(prizeData)를 받아 각 바퀴 위치에 표시합니다. (원 getRotateAngle() 메소드의 중심에 따라 회전할 각도를 계산합니다.)상위 컴포넌트에 의해 호출된 후 회전을 시작하고 지정된 위치에서 정지하는 메소드(rotate), 애니메이션이 끝난 후 상위 구성 요소에 중지되었음을 알립니다. 상품 이름과 사진은 맞춤 설정할 수 있습니다.

参数	说明	类型	默认值
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' }턴테이블이 멈춰야 할 위치를 구하고 배경과 상호작용하지만 이는 시연용일 뿐이며 로컬에서 0~5가 무작위로 선택됩니다.
2. 원형 복권 바퀴 구성 요소에 대해 수행해야 할 작업		턴테이블의 크기와 위치입니다. (호출 시 코드에서 턴테이블인 구성 요소에 클래스를 추가하세요.)	실행 중인 애니메이션의 지속 시간을 맞춤 설정할 수 있습니다. (duringTime 속성)

3. 페이지 미리보기

4. 기본 사용법설명 li> li>rrreee

5. roundTurntable 구성 요소의 속성 설명Parameter

인용문rrreee	Callrrreeerrreeerrreee
Description	Type	기본값

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 ) 이름🎜🎜Description🎜🎜콜백 매개변수🎜🎜🎜🎜🎜🎜endRotation🎜🎜턴테이블이 중지된 후 트리거되는 이벤트 콜백🎜🎜—🎜🎜🎜🎜🎜 7. 전체 프로젝트 코드🎜🎜https://github. com/LiaPig/ vue-round-turntable🎜🎜에서 사용하는 상품 이미지와 포인터 이미지의 출처: 🎜🎜http://sc.chinaz.com/jiaobendemo.aspx?downloadid=12018113053246🎜

위 내용은 vuejs로 턴테이블을 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!