本來打算寫一個那種提示完了自動消失的彈窗的，但是沒有想好淡入淡出的效果。所以暫時算是半成品。
練習代碼如下：
<!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>
<div 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;">
<div slot="alert-content">
<span>章魚不丸子</span>
<a >http://www.yuki.kim</a>
</div>
</ys-alert-component>
</div>
<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:`
<div class="ys-alert" :class="type">
<slot name="alert-content">
<div class="icon" >{{ iconBar }}</div>
<div class="content">
{{ alertContent }}
</div>
</slot>
</div>`
})
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>
