Vue移动端抽奖组件,用于刮刮卡抽奖场景,支持背景是图片,回调等功能。下面编程教程网小编给大家简单介绍一下具体实现代码!
vue组件安装
import { createApp } from "vue";
// vue
import { Scratchcard } from "@nutui/nutui-bingo";
const app = createApp();
app.use(Scratchcard);
vue基础用法
<template>
<nutbig-scratch-card
content="1000万"
:coverImg="coverImage"
></nutbig-scratch-card>
</template>
<script>
import { ref, onMounted } from "vue";
export default {
setup() {
const coverImage = ref("图片地址");
const opencard = () => {
console.log("刮开事件完成!");
};
return { coverImage };
},
};
</script>
以上是编程学习网小编为您介绍的“vue年会刮刮卡抽奖活动代码”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vue年会刮刮卡抽奖活动代码
基础教程推荐
猜你喜欢
- html5的表单标签 2023-10-27
- JavaScript 中创建私有成员 2023-08-12
- CSS两列布局实现方式总结 2024-03-10
- layui插件可以兼容IE8浏览器吗 2024-12-13
- CSS3 clip-path 用法介绍详解 2024-01-20
- javascript 解析url的search方法 2024-02-07
- 解析js中获得父窗口链接getParent方法以及各种打开窗口的方法 2023-11-30
- 微信小程序如何调用json数据接口并解析 2024-02-08
- 纯CSS实现网页内部锚点跳转时上下偏移的示例代码 2023-12-22
- vue3脚手架删除严模格式 即校验 2023-10-08