admin管理员组

文章数量:1566998

2023年12月14日发(作者：)

vue移动端h5项目使用vue-luck-draw插件实现大转盘抽奖

实现效果如下：

使用：

1.安装插件：npm install --save vue-luck-draw。

2.引入插件：在 文件中全局加载插件；或者在组件中按需引入插件。

// 完整加载

import LuckDraw from 'vue-luck-draw'

(LuckDraw)

// 按需引入

import { LuckyWheel, LuckyGrid } from 'vue-luck-draw'

ents('LuckyWheel', LuckyWheel)

ents('LuckyGrid', LuckyGrid)

3.使用插件：将转盘抽奖封装成一个子组件，在父组件页面中引用该子组件，并监听抽奖成功函数。

子组件代码如下：

父组件中获取奖品数组，代码如下：

async getInfo() {

const data = {

activityId: tyId,

};

(data, "getInfo 传参");

const resp = await getDetailInfo(data);

if (resp && == 0) {

const prizes = [];

st = st;

h((item) => {

({

title: me,

imgs: [

{

src: ctureUrl,

width: "34px",

top: "55%",

},

],

fonts: [

{

text: me,

top: "30%",

fontColor: "#642D33",

fontSize: "12px",

fontWeight: "bold",

},

],

});

});

= prizes;

(, st);

}

},

本文标签： 插件组件奖品转盘字体大小

版权声明：本文标题：vue移动端h5项目使用vue-luck-draw插件实现大转盘抽奖 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1702484521a9422.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。