vue一步步實(shí)現(xiàn)alert功能。

BDEEFE 發(fā)布于2019-08-19 18:30 / 3337人閱讀

摘要：原生框樣式丑陋。有一定自適應(yīng)的設(shè)計(jì)。在內(nèi)部是一個(gè)垂直居中的框大小可以固定。在小屏上屏幕寬度小于取消了固定寬度。不希望每次都一個(gè)實(shí)例。是默認(rèn)的模版標(biāo)記。接受一個(gè)的參數(shù)配置。代碼這一段代碼作用是一開始就把實(shí)例插入到底部方便直接調(diào)用。

原生alert的缺點(diǎn)

會(huì)阻塞一切操作，影響用戶體驗(yàn)

很多瀏覽器會(huì)默認(rèn)靜止alert，例如微信。

原生alert框樣式丑陋。

demo地址: 用力點(diǎn)我
項(xiàng)目地址: web-style 希望大家多多關(guān)注。項(xiàng)目里有css樣式和vue組件。目標(biāo)是快速構(gòu)建后臺(tái)系統(tǒng)。有一定自適應(yīng)的設(shè)計(jì)。

css

思路:最外層是一個(gè)黑色透明撐滿全屏幕的div并且是fixed的div.modal-mask。

在mask內(nèi)部是一個(gè)垂直居中的div框大小可以固定。垂直居中方法有幾種可選。我選用的是flex。
關(guān)鍵性的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。然后我們做了一個(gè)小小的自適應(yīng)。在小屏上(屏幕寬度小于640px)取消了固定寬度。減少了padding的值，看起來(lái)更小巧。

開發(fā)vue組件 vue template

首先我希望這個(gè)組件功能能像原生的alert事件一樣隨時(shí)隨地的方便調(diào)用。不希望每次都new Vue({})一個(gè)實(shí)例。所以我做了一些不一樣的設(shè)計(jì)。


        
            
                 {{ title }}
            
            
                {{ content }}

v-show是控制alert組件的顯示和隱藏的指令。 {{ }}是vue默認(rèn)的模版標(biāo)記。
@click 是綁定click事件的指令

vue data

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

show 是控制顯示隱藏的標(biāo)記。

onCancel onOk 是點(diǎn)擊取消或者確定時(shí)候觸發(fā)的回調(diào)。

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 ||  "標(biāo)題"
        this.content = setting.content || "內(nèi)容"
        this.onOk = setting.onOk || false
        this.onCancel = setting.onCancel || false
        this.show = true
        document.body.style.overflow = "hidden"
      }
    }
  }

alert(setting) 方法是控制顯示alert組件的方法。接受一個(gè)object的參數(shù)配置。
op(type) 方法是點(diǎn)擊取消和確定按鈕的時(shí)候觸發(fā)的時(shí)候。

hack代碼

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

這一段代碼作用是一開始就把vue實(shí)例插入到 body 底部,方便直接 alert 調(diào)用。

加入一些動(dòng)畫效果

依賴的是vue指令 transition 具體的用法教程大家去過(guò)渡-傳送門

.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 = "刪除不可以恢復(fù)..."
    setting.onOk = function(){}
    setting.onCancel = function(){}
    
    
$confirm.alert(setting)