<!-- 提示框 --> <template> <div> <!-- 标题栏 --> <mt-header title= "提示框" > <router-link to= "https://www.jb51.net/" slot= "left" > <mt-button icon= "back" >返回</mt-button> </router-link> </mt-header> <!-- 内容 --> <button @click= "openTop()" >top</button> <button @click= "openCenter()" >center</button> <button @click= "openBottom()" >bottom</button> <button @click= "openLoading()" >loading</button> </div> </template> <script> export default { name: 'Toast' , data(){ return { // } }, methods:{ openTop(){ this .$toast.top( 'top' ); }, openCenter(){ this .$toast.center( 'center' ); }, openBottom(){ this .$toast( 'bottom' ); // or this.$toast.bottom('bottom'); }, openLoading(){ this .$loading( 'loading...' ); let self = this ; setTimeout( function () { self.closeLoading() }, 2000) }, closeLoading(){ this .$loading.close(); } } } </script> <style lang= "less" scoped> // </style>
4.效果图
