九宫格抽奖 js jquery 小程序 vue 插件(原创)

所属分类： JQ特效其他游戏

查看演示立即下载

插件描述：九宫格抽奖,奖品文字图片颜色按钮均可配置，支持同步异步抽奖，概率前后端可控，自动根据 dpr 调整清晰度

更新时间：2020-12-24 09:23:29

在 Js / JQuery 中使用

方式 1：通过 script 标签引入

为了避免 CDN 链接出现异常或波动，我非常建议你缓存到本地或服务器

在 vue2.x / vue3.x 中使用

方式 1：通过 import 引入

首先安装插件

# npm 安装：
npm install vue-luck-draw
# yarn 安装：
yarn add vue-luck-draw

然后找到 main.js 引入插件并 use

// vue2.x
import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)
// vue3.x
import LuckDraw from 'vue-luck-draw/vue3'
createApp(App).use(LuckDraw).mount('#app')

最后在组件内使用 <LuckyWheel />大转盘组件或 <LuckyGrid />九宫格组件

<template>
  <div>
    <!-- 大转盘抽奖 -->
    <LuckyWheel
      width="300px"
      height="300px"
      ...你的配置
    />
    <!-- 九宫格抽奖 -->
    <LuckyGrid
      width="300px"
      height="300px"
      ...你的配置
    />
  </div>
</template>

#方式 2：通过 script 标签引入

为了避免 CDN 链接出现异常或波动，我非常建议你缓存到本地或服务器

vue2.x：

1 2	`最新版本： /` `指定版本： /`

vue3.x：

1 2	`最新版本： /` `指定版本： /`

<div id="app">
  <!-- 大转盘抽奖 -->
  <lucky-wheel
    width="300px"
    height="300px"
    ...你的配置
  />
  <!-- 九宫格抽奖 -->
  <lucky-grid
    width="300px"
    height="300px"
    ...你的配置
  />
</div>
<script src="/"></script>
<script src="/"></script>
<script>
  new Vue({
    el: '#app'
    data () {
      return {}
    }
  })
</script>

在 uni-app 中使用

当前 uni-app 中各端适配情况

H5端编译正常
app端待测试
微信小程序编译正常
其他小程序待测试

#方式 1：通过 import 引入

#1. 安装插件

你可以选择通过 HBuilderX 导入插件：

/

也可以选择通过 npm / yarn 安装

# npm 安装：
npm install uni-luck-draw
# yarn 安装：
yarn add uni-luck-draw

#2. 引入并使用

<template>
  <view>
    <!-- 大转盘抽奖 -->
    <LuckyWheel
      width="600rpx"
      height="600rpx"
      ...你的配置
    />
    <!-- 九宫格抽奖 -->
    <LuckyGrid
      width="600rpx"
      height="600rpx"
      ...你的配置
    />
  </view>
</template>
<script>
  // npm 下载会默认到 node_modules 里面，直接引入包名即可
  import LuckyWheel from 'uni-luck-draw/lucky-wheel' // 大转盘
  import LuckyGrid from 'uni-luck-draw/lucky-grid' // 九宫格
  // 如果你是通过 HBuilderX 导入插件，那你需要指定一下路径
  // import LuckyWheel from '@/components/uni-luck-draw/lucky-wheel' // 大转盘
  // import LuckyGrid from '@/components/uni-luck-draw/lucky-grid' // 九宫格
  export default {
    // 注册组件
    components: { LuckyWheel, LuckyGrid },
  }
</script>

#3. 我这里提供了一个最基本的 demo 供你用于尝试

<template>
  <view>
    <LuckyWheel
      ref="luckyWheel"
      width="600rpx"
      height="600rpx"
      :blocks="blocks"
      :prizes="prizes"
      :buttons="buttons"
      :defaultStyle="defaultStyle"
      @start="startCallBack"
      @end="endCallBack"
    />
  </view>
</template>
<script>
  import LuckyWheel from 'uni-luck-draw/lucky-wheel'
  export default {
    components: { LuckyWheel },
    data () {
      return {
        blocks: [
          { padding: '13px', background: '#d64737' }
        ],
        prizes: [
          { title: '1元红包', background: '#f9e3bb', fonts: [{ text: '1元红包', top: '18%' }] },
          { title: '100元红包', background: '#f8d384', fonts: [{ text: '100元红包', top: '18%' }] },
          { title: '0.5元红包', background: '#f9e3bb', fonts: [{ text: '0.5元红包', top: '18%' }] },
          { title: '2元红包', background: '#f8d384', fonts: [{ text: '2元红包', top: '18%' }] },
          { title: '10元红包', background: '#f9e3bb', fonts: [{ text: '10元红包', top: '18%' }] },
          { title: '50元红包', background: '#f8d384', fonts: [{ text: '50元红包', top: '18%' }] },
        ],
        buttons: [
          { radius: '50px', background: '#d64737' },
          { radius: '45px', background: '#fff' },
          { radius: '41px', background: '#f6c66f', pointer: true },
          {
            radius: '35px', background: '#ffdea0',
            fonts: [{ text: '开始\n抽奖', fontSize: '18px', top: -18 }]
          }
        ],
        defaultStyle: {
          fontColor: '#d64737',
          fontSize: '14px'
        },
      }
    },
    methods: {
      // 点击抽奖按钮触发回调
      startCallBack () {
        // 先开始旋转
        this.$refs.luckyWheel.play()
        // 使用定时器来模拟请求接口
        setTimeout(() => {
          // 3s后得到中奖索引
          let index = Math.random() * 6 >> 0
          // 缓慢停止游戏
          this.$refs.luckyWheel.stop(index)
        }, 3000)
      },
      // 抽奖结束触发回调
      endCallBack (prize) {
        // 奖品详情
        console.log(prize)
      }
    }
  }
</script>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： 2D板材切割源码算法
下一个特效：原生js待办事项清单