vue封裝元件寫toast彈出框
阿新 • • 發佈：2019-01-12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="lib/vue.js"></script> <style> .toast{ position: fixed; top: 45%; left: 45%; width: 200px; height: 100px; background: pink; text-align: center; line-height: 100px; font-size: 50px; opacity: 0.6; } </style> </head> <body> <div id="out"> <button @click="btn()">toast彈出框</button> </div> <script> var Toast = Vue.component("v-toast",{ template:` <div class="toast" v-if="isshow"> {{text}} </div> `, data:function(){ return{ isshow:true, text:"登陸成功", duration:2000 } } }) var toast = function () { let ToastVue = new Toast({ el:document.createElement("div") }) document.body.appendChild(ToastVue.$el) setTimeout(function () { ToastVue.isshow=false },ToastVue.duration) } var vm = new Vue({ el:"#out", data:{ }, methods:{ btn(){ toast() } } }) </script> </body> </html>