link-ui 如何自定义UI提示弹窗

SoberChi

已于 2022-06-12 23:51:21 修改

阅读量599

点赞数

分类专栏： vue 文章标签： ui javascript html

于 2020-10-29 17:59:51 首次发布

本文链接：https://blog.csdn.net/weixin_44959182/article/details/109365329

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

不想成为大牛的程序员不是一个好的程序员。
今天给大家讲解写自定义UI弹窗是如何实现的

首先需要创建一个html页面写好弹窗的样式名称和组成结构。如下图

<div class="link-popup">
	<div class="link-popup-content"><p>自定义弹窗内容</p></div>
</div>

写好之后创建一个css样式表开始写弹窗的css样式如下图！并且在上个页面引入
！如果大家有什么疑问可以留言交流。另外本人擅长：微信小程序、支付宝小程序、后台管理系统。如果大家有这边的项目也可以跟我合作。微信：wyk1364630428!


/* 弹窗 */
.link-popup {
	width: 100%;
	position: absolute;
	top: 10%;
	z-index: 2000;
	color: #fff;
	animation: link-popup-animation 1s;
}

@keyframes link-popup-animation {
	0% {
		top: 0%;

	}

	100% {

		top: 10%;
	}
}

/* 弹窗消失样式 */
.link-popup-remove {
	width: 100%;
	position: absolute;
	top: 0%;
	z-index: 2000;
	color: #fff;
	animation: link-popup-remove-animation 0.5s;
}

@keyframes link-popup-remove-animation {
	0% {
		top: 10%;

	}

	100% {
		opacity: 0;
		top: 0%;
	}
}

.link-popup-content {
	width: 500px;
	padding: 10px 15px;
	margin: 0 auto;
	background-color: rgba(254, 67, 101, 0.8);
	border-radius: 10px;
	font-size: 14px;
}

现在通过原生JS开始对刚开的代码进行整理处理

// 弹窗提示
const message = function(row) {
	//获取html页面赋值
	const html = document.getElementById("app")
	//定义添加内容
	const content = `<div class="link-popup-content"><p>${row.message}</p></div>`
	//创建新的html
	var dom = document.createElement("div");
	//给新的html添加html
	dom.innerHTML = content
	//给新的html添加class
	dom.className = 'link-popup'
	//获取添加的元素
	var element = document.getElementsByTagName('body')[0]
	//添加添加的元素中
	element.appendChild(dom);
	

	// 定时删除添加的元素
	if(row.time){
		//自定义删除时间
		setTimeout(function() {
			dom.className = 'link-popup-remove'
			setTimeout(function() {
				element.removeChild(dom)
			}, 500)
		}, row.time)
	}else{
		//默认删除时间
		setTimeout(function() {
			dom.className = 'link-popup-remove'
			setTimeout(function() {
				element.removeChild(dom)
			}, 500)
		}, 2000)
	}
	
}

实战应用如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>link-ui框架</title>
		<script type="text/jscript" src="./vue.js"></script>
		<link rel="stylesheet" href="link-ui.css">
		<style>
			#app{
				padding-left: 20px;
			}
		.list-type{
			margin-top: 40px;
		}
		.list-title{
			font-size: 26px;
			font-weight: 500;
			margin-bottom: 20px;
		}
		.list-content{
			padding: 25px 15px 25px 15px;
			border: solid 1px #ccc;
		}
		</style>
	</head>
	<body>
		<div id="app" v-cloak>
			<div class="list-type">
				<h3 class="list-title">按钮组件</h3>
				<div class="list-content">
					<button class="link-primary" @click="primary">主要按钮</button>
				</div>
			</div>

		</div>
	</body>

	<script type="text/jscript" src="./link-ui.js"></script>

	<script>
		const app = new Vue({

			el: '#app',
			data: function() {
				return {
				
				}

			},
			mounted() {
				
			},
			methods: {
				primary() {
				//提示弹窗
					message({
						message: '点击成功'//传入的内容
						time:3000//显示的时间
					})
				}
			}
		})
	</script>
</html>

效果图
在这里插入图片描述
如果大家有什么疑问可以留言交流

SoberChi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
link-ui 如何自定义UI提示弹窗

不想成为大牛的程序员不是一个好的程序员。今天给大家讲解写自定义UI弹窗是如何实现的首先需要创建一个html页面写好弹窗的样式名称和组成结构。如下图<div class="link-popup"> <div class="link-popup-content"><p>自定义弹窗内容</p></div></div>写好之后创建一个css样式表开始写弹窗的css样式如下图！并且在上个页面引入！如果大家有什么疑问可以留言交流。另
复制链接

扫一扫