vue.js模态提示框，多用在数据验证时给出一些友好提示，该组件包含了成功和失败时，两种不同的样式，还加入了提示结束之后执行回调函数。该组件为完整代码，复制即可用。欢迎批评指正~~
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 |
<template> <div class="error_container"> <section class="error_text_container"> <p class="error_text" :style="{color: fontColor}">{{errorText}}</p> </section> </div> </template> <script> export default { data(){ return{ } }, mounted(){ }, errorPop: function(obj, msg, isError=true, callback, delay=2000){ if (!msg || msg == null) { msg = '系统错误'; } if (isError) { obj.fontColor = '#ffffff'; }else{ obj.fontColor = '#00ff00'; } obj.error = true; obj.errorText = msg; obj.status = false; setTimeout(function(){ obj.error = false; obj.status = true; }, delay); let timer = setInterval(function(){ if(obj.status){ clearInterval(timer); delete obj.status; if (typeof callback == 'function') { callback(); } } },500); }, props: ['errorText', 'fontColor'], methods: {} } </script> <style lang="stylus" scoped> /*.error_container{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 200; }*/ .error_text_container{ /*position: absolute;*/ position: fixed; top: 40%; left: 50%; margin-left: -4.5rem; width: 9rem; animation: tipMove .4s ; background-color: #b7b5b5; opacity: .9; border: 1px; display: flex; justify-content: center; align-items: center; flex-direction: column; border: 1px; border-radius: .25rem; .error_text{ font-size: .8rem; color: white; line-height: .9rem; text-align: center; margin: 10% auto; } } </style> |
在页面内调用方法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<hint-modal v-show="error" :fontColor='fontColor' :errorText="errorText"></hint-modal> <script> import hintModal from '../components/common/hintModal' data () { return { error: false, errorText: null, fontColor: null, } }, ~~~ hintModal.errorPop(this, '登录成功', false, function(){ self.$router.push({ path: '/' }); }); </script> |
效果图
