vue如何实现alert功能

这篇文章主要介绍了vue如何实现alert功能，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

原生alert的缺点

1. 会阻塞一切操作，影响用户体验

2. 很多浏览器会默认静止alert，例如微信。

3. 原生alert框样式丑陋。

项目地址: web-style 项目里有css样式和vue组件。目标是快速构建后台系统。有一定自适应的设计。

css

思路:最外层是一个黑色透明撑满全屏幕的div并且是fixed的div.modal-mask。

在mask内部是一个垂直居中的div框大小可以固定。垂直居中方法有几种可选。我选用的是flex。关键性的css代码如下

.modal-mask{  position: fixed;  top: 0;  left: 0;  right: 0;  bottom: 0;  background-color: rgba(55,55,55,.6);  z-index: 100;  display: flex;  align-items: center;  justify-content: center; } .modal-confirm{  width: 400px;  box-sizing: border-box;  padding: 30px 40px;  background-color: #fff;  border-radius: 6px; } @media only screen and (max-width: 640px) {  .modal-confirm{   width: 100%;   margin: 0 20px;   padding: 10px 20px;   } }

其中modal-confirm是alert框,有固定的宽度400px 还有padding。 然后我们做了一个小小的自适应。 在小屏上(屏幕宽度小于640px)取消了固定宽度。减少了padding的值，看起来更小巧。

开发vue组件

vue template

首先我希望这个组件功能能像原生的alert事件一样随时随地的方便调用。 不希望每次都new Vue({})一个实例。 所以我做了一些不一样的设计。

<div class="modal-mask" v-show="show">     <div class="modal-confirm">       <h3 class="confirm-header">         <i class="iconfont icon-questioncircle"></i> {{ title }}       </h3>       <div class="confirm-content">         {{ content }}       </div>       <div class="confirm-btns">         <button class="btn" @click="op(1)">取 消</button>         <button class="btn btn-primary" @click="op(2)">确 定</button>       </div>     </div>   </div>

v-show是控制alert组件的显示和隐藏的指令。 {{ }}是vue默认的模版标记。

@click 是绑定click事件的指令

vue data

new Vue({   el: '#V-confirm',   data: {        show: false,        onCancel: false,        onOk: false,        title: '',        content: ''      }   })

1. show 是控制显示隐藏的标记。

2. onCancel onOk 是点击取消或者确定时候触发的回调。

3. title content 是alert显示的文本。

vue methods

 methods: {    op(type){     this.show = false     if(type == '1'){      if(this.onCancel) this.onCancel()     }else{      if(this.onOk) this.onOk()     }     this.onCancel = false     this.onOk = false          document.body.style.overflow = ''    },    alert(setting){     this.title = setting.title || '标题'     this.content = setting.content || '内容'     this.onOk = setting.onOk || false     this.onCancel = setting.onCancel || false     this.show = true     document.body.style.overflow = 'hidden'    }   }  }

1. alert(setting) 方法是控制显示alert组件的方法。接受一个object的参数配置。

2. op(type) 方法是点击取消和确定按钮的时候触发的时候。

hack代码

 var element = document.createElement('div');  element.id = 'V-confirm'  element.innerHTML = template  document.body.appendChild(element)

这一段代码作用是一开始就把vue实例插入到 body 底部,方便直接 alert 调用。

加入一些动画效果

依赖的是vue指令 transition 具体的用法教程 大家去过渡-传送门

.modal-enter, .modal-leave {  opacity: 0; } .modal-transition{  transition: all .3s ease; } .modal-enter .modal-confirm, .modal-leave .modal-confirm {  transform: scale(1.1); } .modal-transition{  transition: all .3s ease; }

用法

var setting = {}   setting.title = '你确定删除吗?'   setting.content = '删除不可以恢复...'   setting.onOk = function(){}   setting.onCancel = function(){}       $confirm.alert(setting)

感谢你能够认真阅读完这篇文章，希望小编分享的“vue如何实现alert功能”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!