查看手机演示

大转盘自定义使用

平台兼容

H5	微信小程序	APP(ios/Android)
√	√	√

代码演示

<template>
  <view class="content">
    <!-- 使用默认样式，转盘大小为：470rpx -->
    <k-turn-diy
      ref="dialer"
      @click="setTurn"
      @done="onDone"
      :prizeList="prizeList"
      v-if="status==2"
      dial-style=" padding: 32rpx;background-image: url(http://cdn.k900.top/image/yuan.png)"
    >
    </k-turn-diy>

    <k-turn-diy
      ref="dialer"
      @click="setTurn"
      @done="onDone"
      :prizeList="prizeList"
      v-if="status==3"
    >
      <!-- 自定义转盘奖品内容样式 -->
      <template #prize="{item}">
        <view class="flex flex-direction justify-center align-center">
          <view
            style="font-size: 20rpx; margin-top: 10rpx; width: 100rpx; text-align: center; color: #111111;"
            >{{item.name}}</view
          >
          <image style="width: 60rpx; height: 60rpx;" :src="item.img" />
          <view
            style="font-size: 16rpx; margin-top: 10rpx; width: 100rpx; text-align: center; color: #ff8811; "
            >这是自定义</view
          >
        </view>
      </template>
    </k-turn-diy>
  </view>
</template>

<script>
  export default {

    data() {
      return {
        // 奖品列表，
        prizeList: [{
            id: 'coupon88',
            name: '8.8折',
            img: 'https://img11.360buyimg.com/pop/jfs/t1/175718/35/12595/5477/60b660c6Eb850717b/a1cfe750dcdb5b78.png',
          },
          {
            id: 'coupon900',
            name: '900',
            img: 'https://img11.360buyimg.com/pop/jfs/t1/190845/9/6092/4489/60b65fe8Ebb8f8284/955da889f6d1c13e.png',
          },
          {
            id: 'coupon1',
            name: '1元',
            img: 'https://img11.360buyimg.com/pop/jfs/t1/189927/14/6092/4174/60b66173E23c472ea/44af15a151defca1.png',
          },
          {
            id: 'apple',
            name: '苹果手机 IOSgps',
            img: 'https://img11.360buyimg.com/pop/jfs/t1/177670/26/4591/2514/60a25874Ee0e5332a/99c7bdfede732ae4.png'
          },
          {
            id: 'coupon210',
            name: '210元',
            img: 'https://img11.360buyimg.com/pop/jfs/t1/124578/12/20170/4429/60b635d8E7089ebb0/7a47d76a2a260cc0.png'
          },
          {
            id: 'jd100',
            name: '100京豆',
            img: 'https://img11.360buyimg.com/pop/jfs/t1/162790/37/15087/28046/6062a49aE8f2c10f2/5591ff0ff38a45e2.png',
          },
          {
            id: 'coupon400',
            name: '400元',
            img: 'https://img11.360buyimg.com/pop/jfs/t1/177090/2/7001/4535/60b6607aEe9c1db2a/76c67675f547db3f.png'
          },
          {
            id: 'thanks',
            name: '谢谢参与',
            img: 'https://storage.jd.com/cdn-upload/dialTemplateHeart.png',
          }
        ],


      }
    },
    methods: {

          setTurn() {
        // 指定奖品的索引
        this.$refs.dialer.run(1)
      },


      //返回抽中的奖品列表索引
      onDone(index) {
        console.log('抽中的index', index);
        const prize = this.prizeList[index]
        uni.showModal({
          title: prize.id == 'thanks' ? '很遗憾' : '恭喜您',
          content: (prize.id !== 'thanks' ? `获得` : '') + prize.name
        })
      },

    }
  }
</script>

表框

• 1、通过设置dial-style设置背景的方式设置，必须是网络图片
• 2、通过插槽border设置

// 方式1
<k-turn-diy
  dial-style="color: rgba(60,48,158,0.7); padding: 32rpx;background-image: url(http://a.cn/static/dialer/lottery-bg.png)"
/>

// 方式2
<k-turn-diy>
  <image slot="border" src="static/dialer/lottery-bg.png" />
</k-turn-diy>

指针

• 1、可通过pointer-style设置背景的方式设置，但必须为网络图片
• 2、可通过插槽pointer设置
• 3、因为插件是能过获取内部方法实现抽奖，只要获取方法，任何元素都是指针按钮

// 方式1
<k-turn-diy
  pointer-style="background-image: url(http://a.cn/static/dialer/bg.png)"
/>
// 方式2
<k-turn-diy>
  <image slot="pointer" src="static/dialer/lottery-bg.png" />
</k-turn-diy>

奖品插槽

• 默认会按奖品列表渲染，但想更个性可通过插槽prize设置

<k-turn-diy>
  <template #prize="{item}">
    <image style="width: 72rpx; height: 72rpx;" :src="item.img" />
  </template>
</k-turn-diy>

API

Props

参数	说明	类型	默认值	版本
size	转盘直径，默认单位为 rpx	Number	300	-
prizeList	奖品列表	Array	[]	-
turns	旋转圈数	Number	10	-
duration	旋转过程时间,单位为 s	Number	3	-
styleOpt	自定义 转盘的扇区的背景颜色组+扇区的边框颜色	Object	{prizeBgColors: [],borderColor: ''}	-
customStyle	外容器的自定义样式	String		-
dialStyle	转盘自定义样式	String		-
pointerStyle	指针自定义样式	String	width:30%	-

Event

名称	说明
run(index)	旋转到指定索引，该事件是通过ref获取插件实例的内部方法
done	旋转结束，该事件是通过标签接收的方法
click	点击指针，该事件是通过标签接收的方法

Slots

名称	说明
border	边框插槽
prize	奖品插槽
pointer	指针插槽