前端Vue自定义签到积分获取弹框抽取红包弹框 自定义弹框内容 弹框顶部logo

news2024/9/23 13:16:43

前端Vue自定义签到积分获取弹框抽取红包弹框 自定义弹框内容 弹框顶部logo, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=13204

效果图如下:

 

format,png

format,png

# cc-downloadDialog

#### 使用方法

```使用方法

<!-- show:是否显示 peanNum:获取的积分/豆数量 type:类型 word:按钮文字 money:金额 @close:关闭弹框事件  -->

<cc-downloadDialog :show="show" :peanNum="20" :type="1" word="去App领取" :money="0.6"

@close="closeDiologClick"></cc-downloadDialog>

```

#### HTML代码实现部分

```html

<template>

<view class="content">

<view style="height: 52px;"></view>

<button @click="openDiologClick">显示积分弹框</button>

<!-- show:是否显示 peanNum:获取的积分/豆数量 type:类型 word:按钮文字 money:金额 @close:关闭弹框事件  -->

<cc-downloadDialog :show="show" :peanNum="20" :type="1" word="去App领取" :money="0.6"

@close="closeDiologClick"></cc-downloadDialog>

</view>

</template>

<script>

export default {

data() {

return {

show: false

}

},

onLoad() {

},

methods: {

// 打开弹框

openDiologClick() {

this.show = true;

},

// 关闭弹框

closeDiologClick() {

this.show = false;

}

}

}

</script>

<style>

.content {

display: flex;

flex-direction: column;

}

</style>

```

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/689911.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

用VSCode开发的Vue项目请求HBuilder项目的JSON数据

在学Vue之前采用HBuilder学习了HTML,CSS.JavaScript&#xff0c;jQuery&#xff0c;AJAX&#xff0c;最方便的就是可以请求项目中的JSON数据&#xff0c;当然也可以请求【聚合数据】的数据。 现在用VSCode开发&#xff0c;去访问HBuilder发布的项目中的json数据&#xff0c;因…

chatgpt赋能python:Python计算器程序代码:一种简单却强大的工具

Python计算器程序代码&#xff1a;一种简单却强大的工具 如果你是一名计算机编程爱好者&#xff0c;那你一定不会陌生于Python编程语言。Python是如今最受欢迎的编程语言之一&#xff0c;它简单易学、功能强大&#xff0c;也有着庞大的社区支持&#xff0c;使得它成为了很多人…

嵌入式ppt

第二章 第五章 第六章 第七章 第八章 第九章 第十章 考点 条件编译 volatile、static、 union、 struct、 const指针 堆与栈的不同点 3.功能模块应用题 (1) GPIO 的应用:流水灯的电路及软件编码、驱动数码管的电路及编码。 (2)外部中断的应用:电路及回调函数编码。 (3) …

云原生安全取决于开源

本文首发微信公众号网络研究院&#xff0c;关注获取更多。 Kubernetes 和 K3S 等技术是云原生计算的成功和开源力量的代名词。他们在竞争中大获全胜绝非偶然。当企业寻求安全的云原生环境时&#xff0c;开源是难题中的关键部分。 工具法则是众所周知的认知偏差。当你只有一把…

openeuler22.03系统salt-minion启动报“Invalid version: ‘cpython‘“错的问题处理

某日&#xff0c;检查发现一台openeuler22.03 SP1系统的服务器上之前正常运行的saltstack客户端minion未运行&#xff0c;查看服务状态&#xff0c;报"Invalid version: cpython"错&#xff0c;无法正常运行&#xff0c;本文记录问题处理过程。 一、检查salt-minion…

【Nginx】第三章 Nginx常用的命令和配置文件

第3章 Nginx常用的命令和配置文件 3.1 nginx常用的命令 &#xff08;1&#xff09;启动命令 在/usr/local/nginx/sbin目录下执行 ./nginx &#xff08;2&#xff09;关闭命令 在/usr/local/nginx/sbin目录下执行 ./nginx -s stop &#xff08;3&#xff09;重新加载命令…

docker报错 driver failed programming external connectivity on e

Error response from daemon: driver failed programming external connectivity on e ndpoint mj 原因&#xff1a;在我们启动了Docker后&#xff0c;我们再对防火墙firewalld进行操作&#xff0c;就会发生上述报错&#xff0c; 详细原因&#xff1a;docker服务启动时定义的…

分别用最小二乘法和梯度下降法实现线性回归

下面代码中包含了两种方法 import numpy as npnp.random.seed(1234)x np.random.rand(500, 3) # x为数据&#xff0c;500个样本&#xff0c;每个样本三个自变量 y x.dot(np.array([4.2, 5.7, 10.8])) # y为标签&#xff0c;每个样本对应一个y值# 最小二乘法 class LR_LS():d…

LENOVO联想笔记本拯救者Legion R7000P APH8 2023款(82Y9)原厂Windows11系统原装出厂状态预装系统

lenovo联想笔记本电脑&#xff0c;拯救者Legion R7000P APH8(2023款)(82Y9)原装出厂Windows11系统安装&#xff0c;预装系统重装镜像&#xff0c;恢复出厂状态 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、联想电脑管家等预装程序 所需要工具&#xff1a;16G或以上…

element ui - el-select 手动设置高度

el-select 手动设置高度 场景代码 场景 当我们的页面想要手动设置 element ui 中 el-select 的高度时&#xff0c;如果只是通过设置 el-select 的 height 属性时&#xff0c;会发现调整无效。 继续对 el-select 中的 input 元素 .el-input__inner 设置。会发现高度生效了&…

机器视觉硬件选型-机器视觉三大技术之一打光(图像采集技术)

机器视觉halcon-胶水轮廓检测 针对被测物的不同特征,要用不同打光方式,才可以突出被测物,便于图像处技术进一步处理。 机器视觉作为当前的热门行业,是计算机视觉的延伸,集结了光学、机械、电子、计算机软硬件等各方面技术,旨在于将所需求的图像特征提取出来,以方便视觉系…

读发布!设计与部署稳定的分布式系统(第2版)笔记13_断路器与舱壁

1. 电路保险丝 1.1. 保险丝通过自身率先失效&#xff0c;控制整体的系统失效方式 1.2. 当遇到电阻时&#xff0c;电流产生的热量与电流强度的平方和电阻的乘积&#xff08;I^2R&#xff09;成正比 1.3. 在房子着火前先行熔断&#xff0c;切断电路并避免火灾 1.4. 民用保险丝…

HOT22-相交链表

leetcode原题链接&#xff1a;相交链表 题目描述 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结…

可视化低代码编程平台项目

后端Spring BootMySQL 前端Vue 同学通过这个项目练手&#xff0c;简历上写出来也蛮有亮点的。 技术栈比较全面&#xff0c; 项目可以提高公司的开发效率&#xff0c;特别是方便产品经理或者业务线人员直接可视化生成UI

java之路——带你了解springboot框架与其基本使用

文章目录 一、springboot的发展背景二、什么是springboot三、springboot的地位四、开发步骤 一、springboot的发展背景 要了解springboot&#xff0c;我们先要了解Spring Boot的发展背景。 Spring Boot的发展背景可以追溯到Spring Framework的诞生和演进过程。 首先&#xff…

Linux常用命令——free命令

在线Linux命令查询工具 free 显示内存的使用情况 补充说明 free命令可以显示当前系统未使用的和已使用的内存数目&#xff0c;还可以显示被内核使用的内存缓冲区。 语法 free(选项)选项 -b # 以Byte为单位显示内存使用情况&#xff1b; -k # 以KB为单位显示内存使用情况…

【Docker】Exited 139解决Window下docker启动oracle11g失败Exited 139

前几天&#xff0c;在docker安装了oracle11&#xff0c;安装非常简单&#xff0c;但是启动的时候启动不起来&#xff0c;且没有任何log日志输出&#xff01; docker 拉取安装oracle11 docker pull registry.cn-hangzhou.aliyuncs.com/helowin/oracle_11g安装完成后启动oracle …

Nature Biomedical Engineering --利用白细胞“吃掉”实体瘤

癌症仍然是美国死亡率最高的疾病之一&#xff0c;每年导致的死亡人数超过60万人。形成实体肿瘤的癌症&#xff0c;如乳房、大脑或皮肤肿瘤&#xff0c;尤其难以治疗。外科手术通常是对抗实体肿瘤的第一道防线。但是&#xff0c;手术可能无法完全清除癌细胞&#xff0c;残留的细…

Linux运维监控学习笔记6

触发器&#xff08;重点&#xff09; 触发器&#xff08;trigger&#xff09;&#xff1a;定义监控项到达一个临界值&#xff08;阈值&#xff09;或者满足一个条件&#xff0c;就会发现状态变化&#xff08;OK变为Problem&#xff0c;Problem变为OK&#xff09;。 监控agent1…

FFmpeg工具使用(一)

转码 指令 ffmpeg -i input.mp4 output.avi 这个指令是使用FFmpeg工具对视频进行格式转换的命令。 其中&#xff0c;"-i input.mp4"表示指定输入文件为"input.mp4"&#xff0c;而"output.avi"则是指定输出文件名&#xff0c;并将视频转码成A…