vue一步步實現alert功能。

原生alert的缺點

1. 會阻塞一切操做，影響用戶體驗

2. 不少瀏覽器會默認靜止alert，例如微信。

3. 原生alert框樣式醜陋。

demo地址: 用力點我
項目地址: 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">
            <h2 class="confirm-header">
                <i class="iconfont icon-questioncircle"></i> {{ title }}
            </h2>
            <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: ''
          }
    })

• show 是控制顯示隱藏的標記。

• onCancel onOk 是點擊取消或者肯定時候觸發的回調。

• 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'
      }
    }
  }

alert(setting) 方法是控制顯示alert組件的方法。接受一個object的參數配置。
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)