toast弹窗代码_app加弹窗软件

toast弹窗代码_app加弹窗软件效果图代码:<!DOCTYPEhtml><htmllang=”en”> <head> <title>弹窗</title> <metacharset=”UTF-8″> <metaname=”viewport”content=”width=device-width,initial-s…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

效果图

toast弹窗代码_app加弹窗软件

代码:

<!DOCTYPE html>
<html lang="en">
	<head>
		<title>弹窗</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style type="text/css">
			.toast {
				padding: 10px 25px 10px 25px ;
				background: rgba(0, 0, 0, .5);
				border-radius: 5px;
				color: #ffffff;
				text-align: center;
				position: fixed;
				left: 50%;
				top: 40%;
				transform: translate(-50%, -50%);
				z-index: 100;
			}
		</style>
	</head>
	<body>
		<div id="test">
			<toast v-if='isShow' :message='isShowMsg'></toast>
			<div class="container" @click="showToast">
				点击显示 showToast
			</div>
		</div>
		<script>
			var that;
			Vue.component('toast', {
				props: ['message'],
				template: `
			    <div class="toast_bg_transparent">
			        <div class="toast">
			            <span>{
  
  {message}}</span>
			        </div>
			    </div>
			    `
			})
			new Vue({
				el: '#test',
				data() {
					return {
						isShow: false,
						isShowMsg: '', //弹窗提示
					}
				},
				methods: {
 
					showToast() {
						console.log('点击了 showToast')
						this.isShow = true;
						this.isShowMsg = '错误提示';
 
						setTimeout(() => {
							this.isShow = false;
						}, 1000);
					}
				},
				mounted() {}
			})
		</script>
	</body>
</html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189977.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 网站的推广方案有哪些_推广方案范例

    网站的推广方案有哪些_推广方案范例做网站推广也已经有了5、6年了,看了很多网站推广的方法方案,网上流传的100种主要推广方法方案都是一样的,2017年又不什么新的100种主要方法方案吗?在这里厦门网站推广公司领众品牌就2017网站推广

  • 51单片机系列有哪些类型_51单片机1602液晶显示原理

    51单片机系列有哪些类型_51单片机1602液晶显示原理Lcd液晶屏幕带有背光显示,可选择蓝光白光黄光三种背光颜色的屏幕,它更具有美光性,在实际生活中有广泛的应用。实物图原理图RS:1为数据/0为指令;RW:1为读/0为写;E1为数据有效,下降沿执行指令示例代码main.c#include”reg52.h” //此文件中定义了单片机的一些特殊功能寄存器#include”lcd.h”typedefunsignedintu16; //对数据类型进行声明定义typedefunsignedcharu8;u8Disp

  • 【模式识别】OpenCV中使用神经网络 CvANN_MLP

    【模式识别】OpenCV中使用神经网络 CvANN_MLPOpenCV的ml模块实现了人工神经网络(ArtificialNeuralNetworks,ANN)最典型的多层感知器(multi-layerperceptrons,MLP)模型。由于ml模型实现的算法都继承自统一的CvStatModel基类,其训练和预测的接口都是train(),predict(),非常简单。下面来看神经网络CvANN_MLP的使用~定义神经网络及参数:…

  • 超全MyBatis动态SQL详解!( 看完SQL爽多了)

    超全MyBatis动态SQL详解!( 看完SQL爽多了)MyBatis令人喜欢的一大特性就是动态SQL。在使用JDBC的过程中,根据条件进行SQL的拼接是很麻烦且很容易出错的。MyBatis动态SQL的出现,解决了这个麻烦。MyBatis通过OGNL来进行动态SQL的使用的。目前,动态SQL支持以下几种标签:1数据准备为了后面的演示,创建了一个Maven项目mybatis-dynamic,创建了对…

  • ubuntu修改hostname

    在Ubuntu系统中,快速查看主机名有多种方法:其一,打开一个GNOME终端窗口,在命令提示符中可以看到主机名,主机名通常位于“@”符号后;其二,在终端窗口中输入命令:hostname或uname–

    2021年12月23日
  • java断言assertequals_junit 方法:assertEquals 和 assertTrue

    java断言assertequals_junit 方法:assertEquals 和 assertTrueassertEquals和assertTrue区别相同之处:都能判断两个值是否相等assertTrue如果为true,则运行success,反之FailureassertEquals如果预期值与真实值相等,则运行success,反之Failure不同之处:assertEquals运行Failure会有错误提示,提示预期值是xxx,而实际值是xxx。容易调式assertTrue没有错误…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号