Vue はアラート機能を段階的に実装します。 _html/css_WEB-ITnose

ネイティブ アラートの欠点

1. すべての操作がブロックされ、ユーザー エクスペリエンスに影響します

2. 多くのブラウザーでは、デフォルトは WeChat などの固定アラートです。

3. ネイティブのアラート ボックスのスタイルは醜いです。

デモアドレス: もっとクリックしてください

プロジェクトアドレス: Web スタイル 皆様にもっと注目していただければ幸いです。プロジェクトには CSS スタイルと Vue コンポーネントがあります。目標は、バックエンド システムを迅速に構築することです。特定の適応設計があります。

css

アイデア: 最も外側のレイヤーは、画面全体を埋める黒い透明な div で、div.modal-mask が固定されています。

マスク内には垂直方向に中央に配置された div ボックスがあり、そのサイズは固定できます。垂直方向の中央揃えにはいくつかのオプションがあります。私はフレックスを選択しました。重要な 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 は、400 ピクセルの固定幅とパディングを持つアラート ボックスです。 それから私たちは小さな適応を加えました。 小さい画面（画面幅640px未満）では固定幅が解除されます。小さく見えるようにパディングの値を減らします。

vue コンポーネントの開発

vue テンプレート

まず、このコンポーネント関数をネイティブのアラート イベントのように、いつでもどこでも簡単に呼び出すことができれば幸いです。 毎回インスタンスを 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 は、アラート コンポーネントの表示と非表示を制御するコマンドです。 {{ }} は vue のデフォルトのテンプレートタグです。

@click はクリックイベントをバインドする命令です

vue data

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

• show は非表示の表示を制御しますタグ。

• onCancel onOk は、「キャンセル」または「OK」をクリックしたときにトリガーされるコールバックです。

• タイトル内容はアラートで表示されるテキストです。

vue メソッド

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

アラート(設定)メソッドは、アラートコンポーネントの表示を制御するメソッドです。オブジェクトのパラメータ設定を受け入れます。

op(type) メソッドは、「キャンセル」ボタンと「OK」ボタンがクリックされるとトリガーされます。

ハック コード

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

このコード部分の機能は、直接のアラート呼び出しを容易にするために、最初から本体の下部に vue インスタンスを挿入することです。

いくつかのアニメーション効果を追加します

これは vue コマンド トランジションに依存しています。具体的な使用方法のチュートリアルについては、Transition-Portal

.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)