Vueプロジェクトでコンポーネントをカプセル化する簡単な手順

vm.$toast('ネットワーク異常!')

* メッセージ: プロンプト情報の内容 * 期間: 滞在時間 (ミリ秒単位) * 位置: 表示位置: 上、中、下
* className スタイル名 vm.$toast({
    メッセージ: 'ネットワーク異常! '、
    期間: 2000,
    位置: '中央'、
    クラス名: 'big'
})

vm.$トースト({
    メッセージ: '認証コードエラー! '、
    期間: 2000,
    タイプ: 'エラー'
})

<テンプレート>
    <トランジション名="トーストポップ">
        <div v-show="visible" class="toast" :class="customClass" @click="handleClose">
            <span class="text">{{メッセージ}}</span>
        </div>
    </トランジション>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        名前:「トースト」
        小道具: {
            message: String, // プロンプト情報の内容 className: { // スタイル名 type: String,
                デフォルト： ''
            },
            position: { // 位置: 上、中央、下
                タイプ: 文字列、
                デフォルト: 'middle'
            },
            type: { // プロンプトタイプ: 通常、エラー
                タイプ: 文字列、
                デフォルト: '通常'
            }
        },
        データ （） {
            戻る {
                // 表示するかどうか: false
            }
        },
        計算: {
            // スタイルを取得する customClass() {
                クラスを [] にする
                classes.push('toast-' + this.type)
                スイッチ (this.position) {
                    ケース 'top':
                        クラス.push('is-placetop')
                        壊す
                    ケース「下」:
                        クラス.push('is-placebottom')
                        壊す
                    デフォルト：
                        クラス.push('is-placemiddle')
                }
                this.className && classes.push(this.className)
                戻りクラス
            }
        },
        メソッド: {
            ハンドルクローズ() {
                this.$emit('close')
            }
        }
    }

</スクリプト>

<style lang="scss" スコープ px2rem="false">
    .トースト{
        位置: 固定;
        ボックスのサイズ: 境界線ボックス;
        最小幅: 200px;
        最大幅: 50%;
        最大高さ: 85%;
        上マージン: 0;
        パディング: 18px 30px;
        境界線の半径: 10px;
        背景: rgba(0, 0, 0, 0.7);
        色: #fff;
        テキスト配置: 中央;
        オーバーフロー-y: 自動;
        zインデックス: 2000;
        。文章 {
            表示: ブロック;
            フォントサイズ: 16px;
            行の高さ: 1.5;
            テキスト配置: 中央;
            単語折り返し: 単語を区切る;
        }
    }

    .is-placetop {
        上: 50px;
        左: 50%;
        変換: translate(-50%, 0);
    }
    .is-placemiddle {
        上位: 50%;
        左: 50%;
        変換: translate(-50%, -50%);
    }
    .is-placebottom {
        下: 50px;
        左: 50%;
        変換: translate(-50%, 0);
    }
    .is-placetop.toast-pop-enter-active、.is-placetop.toast-pop-leave-active、
    .is-placemiddle.toast-pop-enter-active、.is-placemiddle.toast-pop-leave-active {
        遷移: 不透明度 .3 秒線形、マージン上部 .3 秒イーズ;
    }

    .is-placetop.toast-pop-enter、.is-placetop.toast-pop-leave-to、
    .is-placemiddle.toast-pop-enter、.is-placemiddle.toast-pop-leave-to {
        上マージン: 30px;
        不透明度: 0;
    }
    .is-placebottom.toast-pop-enter-active、.is-placebottom.toast-pop-leave-active {
        遷移: 不透明度 .3 秒線形、マージン下部 .3 秒イーズ;
    }

    .is-placebottom.toast-pop-enter、.is-placebottom.toast-pop-leave-to {
        下マージン: -30px;
        不透明度: 0;
    }
    .トーストエラー{
        背景: rgba(255,102,104,.9);
    }
</スタイル>

'vue' から Vue をインポートします
'./toast.vue' から Toast をインポートします。

// トーストコンストラクタ const ToastConstructor = Vue.extend({
    拡張: トースト
})

// トーストインスタンスプール let toastPool = []

/** トーストインスタンスを取得します (インスタンスプールにインスタンスがある場合はプールから取得し、ない場合は新しいインスタンスを作成します) */
getInstance = () => {
    // コンソールログ('トーストプール:', トーストプール)
    トーストプールの長さが0より大きい場合
        toastPool.shift() を返す
    }
    新しい ToastConstructor を返します({
        el: document.createElement('div')
    })
}

/** インスタンスをインスタンスプールに返します */
returnInstance = インスタンス => {
    if (インスタンス) {
        toastPool.push(インスタンス)
        // console.log('インスタンスを返します:', インスタンス, toastPool)
    }
}

/** ドキュメントからトーストの DOM ノードを削除します*/
関数removeDom（イベント）{
    イベントターゲットの親ノードの場合
        イベントターゲットの親ノードの子ノードを削除します。
    }
}

// 閉じる ToastConstructor.prototype.close = function () {
    this.visible = false // 非表示 this.closed = true // 閉じた状態 this.$el.addEventListener('transitionend', removeDom) // アニメーションが完了したら DOM ノードを削除します returnInstance(this) // インスタンス オブジェクトはインスタンス プールに返され、インスタンスを再利用できます }

// トーストプロンプト情報を表示するエクスポートデフォルト関数 (オプション = {}) {
    // 表示時間、デフォルトは3秒です。letduration = options.duration || 3000
    インスタンス = getInstance() とする
    // console.log('instance=', インスタンス)
    // 表示タイプ instance.type = options.type || 'normal'
    // コンテンツを表示 instance.message = typeof options === 'string' ? options : options.message
    // 表示位置: 上、中央、下
    インスタンス.位置 = オプション.位置 || '中央'
    インスタンス.className = オプション.className || ''
    // アニメーション完了イベントを削除しますinstance.$el.removeEventListener('transitionend', removeDom)
    インスタンス.$on('close', () => {
        インスタンスを閉じる()
    })
    // console.log('instance.$el=', インスタンス.$el)
    // ドキュメントにノードを追加します document.body.appendChild(instance.$el)
    インスタンス.visible = true
    インスタンスが閉じている = false

    // タイマーをクリアします。instance.timer && clearTimeout(instance.timer)
    // タイマーを設定してトーストを閉じる
    インスタンス.timer = setTimeout(() => {
        // console.log('close', インスタンス)
        !instance.closed && instance.close()
        インスタンスタイマー = null
    }、 間隔）
}

'./plugins/toastPlugin.js' から ToastPlugin をインポートします。

// トーストプロンプト情報プラグイン Vue.use(ToastPlugin)