本文实例为大家分享了vue弹窗消息组件的具体代码,供大家参考,具体内容如下
本来打算写一个那种提示完了自动消失的弹窗的,但是没有想好淡入淡出的效果。所以暂时算是半成品。
练习代码如下:
ys-alert-componentinput {
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;
}
icon-bar="O"
type="info"
v-if="info"
alert-content="我是默认的按钮哟">
icon-bar="V"
type="success"
v-if="success"
alert-content="我是成功的按钮哟">
icon-bar="X"
type="error"
v-if="error"
alert-content="我是失败的按钮哟">
icon-bar="!"
type="waring"
v-if="warning"
alert-content="我是警告的按钮哟">
icon-bar="E"
type=""
v-if="yuki"
alert-content="我是灰色定制的按钮哟"
style="background-color: #ccc; color: #fff;">
章鱼不丸子
/*
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:`
{{ alertContent }}
})
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);
}
}
}
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。