不想成为大牛的程序员不是一个好的程序员。
今天给大家讲解写自定义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>
效果图
如果大家有什么疑问可以留言交流