本文實例為大家分享了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> <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 rel="external nofollow" >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>
新聞熱點
疑難解答
圖片精選
