如何使用vue弹窗消息组件
程序员文章站
2022-05-12 15:01:11
...
这次给大家带来如何使用vue弹窗消息组件，使用vue弹窗消息组件的注意事项有哪些，下面就是实战案例，一起来看一下。
本来打算写一个那种提示完了自动消失的弹窗的，但是没有想好淡入淡出的效果。所以暂时算是半成品。
练习代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ys-alert-component</title>
<style>
input {
border-radius: 5px;
border: 1px solid #2f9df9;
background-color: #39befb;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#39befb),
to(#2091fc));
background: -moz-gradient(linear, 0 0, 0 100%, from(#39befb),
to(#2091fc));
background: -o-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
background: -ms-gradient(linear, 0 0, 0 100%, from(#39befb), to(#2091fc));
color: #FFFFFF;
height: 28px;
padding: 0 20px;
cursor: pointer;
line-height: 28px;
display: inline-block;
margin-right: 5px;
outline: none;
}
.ys-alert {
display: inline-block;
height: 26px;
padding: 8px 25px;
min-width: 200px;
border-radius: 5px;
box-shadow: 0 4px 12px rgba(0,0,0,.5);
background: #b8d2f3;
margin: 50px;
}
.icon {
float: left;
width: 26px;
height: 26px;
border: 3px solid #fff;
border-radius: 50%;
font-size: 16px;
line-height: 20px;
font-weight: bold;
text-align: center;
color: #fff;
box-sizing: border-box;
margin-right: 8px;
}
.content {
float: left;
line-height: 26px;
font-size: 15px;
color: #fff;
}
/*成功的样式*/
.success {
background: #9bdda7;
}
/*失败的样式*/
.error {
background: #f7d13b;
}
/*警告样式*/
.warning {
background: #e98c97;
}
</style>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
<input type="button" value="呼唤默认的按钮" @click="alertShow('info')">
<input type="button" value="呼唤成功的按钮" @click="alertShow('success')">
<input type="button" value="呼唤失败的按钮" @click="alertShow('error')">
<input type="button" value="呼唤警告的按钮" @click="alertShow('warning')">
<input type="button" value="呼唤美美哒博客" @click="alertShow('yuki')">
<ys-alert-component
icon-bar="O"
type="info"
v-if="info"
alert-content="我是默认的按钮哟">
</ys-alert-component>
<ys-alert-component
icon-bar="V"
type="success"
v-if="success"
alert-content="我是成功的按钮哟">
</ys-alert-component>
<ys-alert-component
icon-bar="X"
type="error"
v-if="error"
alert-content="我是失败的按钮哟">
</ys-alert-component>
<ys-alert-component
icon-bar="!"
type="waring"
v-if="warning"
alert-content="我是警告的按钮哟">
</ys-alert-component>
<ys-alert-component
icon-bar="E"
type=""
v-if="yuki"
alert-content="我是灰色定制的按钮哟"
style="background-color: #ccc; color: #fff;">
<p slot="alert-content">
<span>章鱼不丸子</span>
<a href="http://www.yuki.kim" rel="external nofollow" >http://www.yuki.kim</a>
</p>
</ys-alert-component>
</p>
<script>
/*
props：
type:
info: 默认
success: 成功
error: 失败
warning：警告
iconBar： 字符串，我没有图标，就用字母写的。很low...
alertContent： 定制提醒的内容
hideIcon: 隐藏或者显示丑丑的图标
slot：
alert-content: 定制提醒信息内容及icon整套模板
methods：
无，没有写方法
*/
Vue.component("ys-alert-component", {
props: {
iconBar: {
type: String,
default: ""
},
alertContent: {
type: String,
default: "请定制提醒内容"
},
hideIcon: {
type: Boolean,
default: false
},
type: {
type: String,
default: ""
}
},
template:`
<p class="ys-alert" :class="type">
<slot name="alert-content">
<p class="icon" >{{ iconBar }}</p>
<p class="content">
{{ alertContent }}
</p>
</slot>
</p>`
})
var vm = new Vue({
el: "#app",
data: {
info: false,
error: false,
success: false,
warning: false,
yuki: false
},
methods: {
alertShow (type) {
switch (type) {
case "info" :
this.info = !this.info;
//setTimeout("vm.info = !vm.info", 2000);
break;
case "error" :
this.error = !this.error;
//setTimeout("vm.error = !vm.error", 2000);
break;
case "success" :
this.success = !this.success;
//setTimeout("vm.success = !vm.success", 2000);
break;
case "warning" :
this.warning = !this.warning;
//setTimeout("vm.warning = !vm.warning", 2000);
break;
default:
this.yuki = !this.yuki;
//setTimeout("vm.yuki = !vm.yuki", 2000);
}
}
}
})
</script>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是如何使用vue弹窗消息组件的详细内容，更多请关注其它相关文章！