素材牛VIP会员

基于vue的大转盘抽奖效果

 所属分类:网页特效-Vue.js,游戏/抽奖,转盘

 浏览:118次  评论:3次  更新时间:2024-07-04
牛币素材VIP可免积分下载
基于vue的大转盘抽奖效果
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
项目地址(website):https://100px.net/
素材描述:一个基于vue的大转盘抽奖插件, 奖品/文字/颜色样式均可配置

详细介绍

安装

使用 npm 安装:

npm i vue-luck-draw

使用 yarn 安装:

yarn add vue-luck-draw

使用

方式1: 通过 import 引入

找到 main.js 引入插件并 use, 可实现全局引入<LuckyWheel />和<LuckyGrid />两个组件

import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)

然后在 vue 模板里面就可以开始使用了

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

方式2: 通过 script 标签引入

从下面的链接里下载一个叫index.umd.min.js的 js 文件, 然后使用 script 标签引入

下载地址:

 https://github.com/buuing/vue-luck-draw/tree/master/dist
<div id="app">
  <!-- 大转盘抽奖 -->
  <LuckyWheel
    style="width: 200px; height: 200px"
    ...你的配置
  />
  <!-- 九宫格抽奖 -->
  <LuckyGrid
    style="width: 200px; height: 200px"
    ...你的配置
  />
</div>
<script src="./vue.min.js"></script>
<script src="./index.umd.min.js"></script>
<script>
  new Vue({
    el: '#app'
  })
</script>

更新时间:2020-03-27 18:26:07

vue-luck-draw

安装

npm i vue-luck-draw

使用

先找到main.js引入插件并use

import LuckDraw from 'vue-luck-draw'
Vue.use(LuckDraw)

然后就可以使用插件了, 以下是最基本的使用

<template>
  <div id="app">
    <LuckDraw
      v-model="currIndex"
      :awards="awards"
      @start="handleStart"
      @end="handleEnd"
    />
  </div>
</template>
<script>
export default {
  data () {
    return {
      currIndex: 0, // 奖品的索引
      awards: [     // 奖品
        { name: '价值5988元华为 P30pro', color: '#f9e3bb' },
        { name: '价值398元车载空气净化器', color: '#f8d384' },
        { name: '价值25元百叶帘遮阳挡', color: '#f9e3bb' },
        { name: '16元油卡套餐红包', color: '#f8d384' },
        { name: '5元油卡直冲红包', color: '#f9e3bb' },
        { name: '3元话费直冲红包', color: '#f8d384' },
        { name: '价值32元重力感应手机支架', color: '#f9e3bb' },
        { name: '价值198元手提迷你车在保温冷藏箱', color: '#f8d384' },
      ],
    }
  },
  methods: {
    handleStart () {
      console.log('开始抽奖')
    },
    handleEnd (index) {
      alert('恭喜您抽到大奖, 奖品为' + this.awards[this.currIndex].name)
    }
  }
}
</script>

但我提供了更多可配置的参数, 比如:

<template>
  <div id="app">
    <!-- 以下是默认配置参数, 可以根据个人需要进行修改 -->
    <LuckDraw
      v-model="currIndex"
      :awards="awards"
      :rate="rate"
      :radius="radius"
      :textFontSize="textFontSize"
      :lineHeight="lineHeight"
      :textColor="textColor"
      :textMargin="textMargin"
      :textPadding="textPadding"
      :btnFontSize="btnFontSize"
      :btnColor="btnColor"
      :btnBorderColor1="btnBorderColor1"
      :btnBorderColor2="btnBorderColor2"
      :btnBorderColor3="btnBorderColor3"
      :btnBgColor="btnBgColor"
      :btnText="btnText"
      :btnRadius="btnRadius"
      :borderColor="borderColor"
      @start="handleStart"
      @end="handleEnd"
    />
  </div>
</template>
<script>
export default {
  data () {
    return {
      currIndex: 0,               // 奖品的索引
      rate: 80,                   // 转盘速率
      radius: 180,                // 转盘半径
      textFontSize: '13px',       // 文字大小
      lineHeight: 20,             // 文字行高
      textColor: '#d64737',       // 文字颜色
      textMargin: 30,             // 文字距离边框距离
      textPadding: 0,             // 文字补偿宽度
      btnFontSize: '26px',        // 按钮文字大小
      btnColor: '#d64737',        // 按钮文件颜色
      btnBorderColor1: '#d64737', // 按钮外边框颜色
      btnBorderColor2: '#ffffff', // 按钮内边框颜色
      btnBorderColor3: '#f6c66f', // 按钮指针颜色
      btnBgColor: '#ffdea0',      // 按钮背景颜色
      btnText: '抽奖',            // 按钮内容
      btnRadius: 60,              // 按钮半径
      borderColor: '#d64737',     // 边框颜色
      awards: [                   // 奖品
        { name: '价值5988元华为 P30pro', color: '#f9e3bb' },
        { name: '价值398元车载空气净化器', color: '#f8d384' },
        { name: '价值25元百叶帘遮阳挡', color: '#f9e3bb' },
        { name: '16元油卡套餐红包', color: '#f8d384' },
        { name: '5元油卡直冲红包', color: '#f9e3bb' },
        { name: '3元话费直冲红包', color: '#f8d384' },
        { name: '价值32元重力感应手机支架', color: '#f9e3bb' },
        { name: '价值198元手提迷你车在保温冷藏箱', color: '#f8d384' },
      ],
    }
  },
  methods: {
    handleStart () {
      console.log('开始抽奖')
    },
    handleEnd (index) {
      alert('恭喜您抽到大奖, 奖品为' + this.awards[this.currIndex].name)
    }
  }
}
</script>

文件目录结构

  • css
    • ┝ app.6ae6e68a.css
  • ┝ favicon.ico
  • img
    • ┝ 0.efbe4dff.png
    • ┝ 1.de299995.png
    • ┝ 2.8f1949c9.png
    • ┝ 3.9307595d.png
    • ┝ 4.1349538d.png
    • ┝ 5.b92ceb2f.png
    • ┝ 6.02483a09.png
    • ┝ 7.48cda152.png
    • ┝ button.2f4ac3e9.png
  • ┝ index.html
  • js
    • ┝ app.1a04fa5c.js
    • ┝ chunk-vendors.fc3c1414.js

讨论这个素材(3)回答他人问题或分享使用心得会奖励牛币

醋***1  
2024年01月17日

您好,能通过后台配置设置奖品区域大小的占比吗??而不是只有等分,谢谢~

回复
bi***am  
2024年03月01日

奖品的索引值可以变成-1吗?

回复
阁***起  
2024年06月11日

currIndex是设置抽完奖哪个商品中奖吗?是awards[currIndex]这个奖品吗?

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:5 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)