php 消息组件,vue弹窗消息组件使用步骤详解

这次给大家带来vue弹窗消息组件使用步骤详解，vue弹窗消息组件使用的注意事项有哪些，下面就是实战案例，一起来看一下。

本来打算写一个那种提示完了自动消失的弹窗的，但是没有想好淡入淡出的效果。所以暂时算是半成品。

练习代码如下：

ys-alert-component

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;

}

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;">

章鱼不丸子

http://www.yuki.kim

/*

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:`

{{ iconBar }}

{{ 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);

}

}

}

})

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：