vue一步步實現alert功能。

BDEEFE 發布于2019-08-19 18:30 / 3329人閱讀

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

原生alert的缺點

會阻塞一切操作，影響用戶體驗

很多瀏覽器會默認靜止alert，例如微信。

原生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({})一個實例。所以我做了一些不一樣的設計。


        
            
                 {{ title }}
            
            
                {{ content }}

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)

GPU云服務器云服務器一步步搭建框架一步步搭建物聯網系統 VUE實現webrtc Vue實現分頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79627.html

一步步帶你做vue后臺管理框架(一)——介紹框架

摘要：組件已經有了，我們的框架還有哪些特性呢自適應自適應現在很多框架都沒有自適應功能，而很多使用場景也在手機上會有，這也是后臺管理框架誕生的原因之一。系列教程《一步步帶你做vue后臺管理框架》第一課 github地址：vue-framework-wz線上體驗地址：立即體驗??《一步步帶你做vue后臺管理框架》第一課：介紹框架《一步步帶你做vue后臺管理框架》第二課：上手使用《一步步帶你做v...

XiNGRZ 2019-08-21 16:19 評論0 收藏0
vue1.x 基礎使用（一）

摘要：最近項目進度慢下來了，花點時間總結一下。文章會從到的一些說明以及使用，也會文章中的代碼共享出來。詳細請關注后續。后面陸續會換到其他的一些工具，如，等。也會介紹一些常用的工具。如下一代的語法編譯器，的路由，的交互。最近項目進度慢下來了，花點時間總結一下。文章會從vue1.x 到2.x的一些說明以及使用，也會文章中的代碼共享出來。詳細請關注后續。簡介：感慨是會用到一些第三方的模塊下載工...

xuexiangjys 2019-08-21 12:00 評論0 收藏0
vue1.x 基礎使用（一）

摘要：最近項目進度慢下來了，花點時間總結一下。文章會從到的一些說明以及使用，也會文章中的代碼共享出來。詳細請關注后續。后面陸續會換到其他的一些工具，如，等。也會介紹一些常用的工具。如下一代的語法編譯器，的路由，的交互。最近項目進度慢下來了，花點時間總結一下。文章會從vue1.x 到2.x的一些說明以及使用，也會文章中的代碼共享出來。詳細請關注后續。簡介：感慨是會用到一些第三方的模塊下載工...

pkhope 2019-08-01 17:25 評論0 收藏0
認識Vue組件

摘要：認識組件組件是強大的功能之一。注意，所有的組件同時也都是的實例，可接受相同的選項對象。組件全局注冊時通過方式注冊。考慮到會出現禁止使用的場景，需要禁止和啟用組件的功能，所以需要。同樣也是先在子組件的選項中定義好傳遞過來的數據。前言 Vue.js是一套構建用戶界面的漸進式框架（官方說明）。通俗點來說，Vue.js是一個輕量級的，易上手易使用的，便捷，靈活性強的前端MVVM框架。簡潔的A...

xumenger 2019-08-22 11:19 評論0 收藏0
一步步帶你做vue后臺管理框架(二)——上手使用

摘要：系列教程一步步帶你做后臺管理框架第二課地址線上體驗地址立即體驗閑扯再多不會用也沒白搭，這節課我來帶大家直接上手框架，體驗到簡單方便之后你就會愛上這個框架欲罷不能的。在中加入一個新的屬性，是一個函數。系列教程《一步步帶你做vue后臺管理框架》第二課 github地址：vue-framework-wz線上體驗地址：立即體驗　　閑扯再多不會用也沒白搭，這節課我來帶大家直接上手框架，體驗到...

yy13818512006 2019-08-21 16:25 評論0 收藏0