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

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

序文

ビジネスが発展するにつれて、機能開発だけではフロントエンドのニーズを満たすことができなくなります。この記事では主に、独自のコンポーネント ライブラリを開発する方法を説明します。

使用シナリオ: 内部コンポーネントライブラリの開発、個人用コンポーネントライブラリの開発、プロジェクトからの分離、複数のプロジェクトで同じコンポーネントを使用する、1セットのコンポーネントライブラリのみを維持する必要がある

Toastコンポーネントをカプセル化する方法

コンポーネントの説明:

プロンプト機能を実装します。

エフェクト表示:

実装された機能:

  • 特定の判定条件に基づいて、またはボタンをクリックすると、ポップアップウィンドウがポップアップします。
  • 位置、タイプ、スタイル名などを設定可能。

ユースケース

1. 使いやすい

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

2. オプションパラメータを使用する

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

3. エラーメッセージ

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

具体的な実装

最初の toast.vue

<テンプレート>
    <トランジション名="トーストポップ">
        <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
    }、 間隔)
}

メイン.js

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

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

要約する

これで、Vue プロジェクトでのコンポーネントのカプセル化に関するこの記事は終了です。Vue プロジェクトのカプセル化コンポーネントに関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vuejs ページの地域化とコンポーネントのカプセル化の実装
  • Vue2.0 カスタムコンポーネント方式(Vueコンポーネントのカプセル化)
  • Vueカプセル化コンポーネントjsバージョンの基本手順

<<:  Dockerコンテナ内にkibanaトークナイザーをインストールする方法

>>:  CentOS8 で MySQL 8.0 をインストールしてデプロイする方法

推薦する

MySQL のデータの偶発的な削除の解決策と kill ステートメントの原則

mysql が誤ってデータを削除しました削除ステートメントを使用して誤ってデータ行を削除する誤ってデ...

小さなページングデザイン

ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...

一般的な Linux ディストリビューションのミラーソース構成の概要

最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...

使用場所によって混乱しやすいXHTMLタグ

<br />jb51.net では、常に記事のセマンティクスを重視してきましたが、HTM...

NginxとLuaによるグレースケールリリースの実装

memcachedをインストールする yum インストール -y memcached #memcac...

node.js でマルチコア CPU を最大限に活用する方法

目次概要node.js でマルチコア CPU を最大限に活用する方法Node で子プロセスを作成する...

vue3.0+vant3.0の迅速なプロジェクト構築の実装

目次1. プロジェクトの構築2. Vue3 体験 + Vant 紹介2020年9月18日にvue.j...

PDO を使用して SQL インジェクションを防ぐ原理の分析

序文この記事では、SQL インジェクションを回避するために pdo の前処理メソッドを使用します。詳...

CSS中級者向けアダプティブレイアウトの5つのソリューションの詳細な説明

序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...

VMware 仮想マシンの NAT モードを構成する方法

この記事では、VMware仮想マシンのNAT構成プロセスを詳しく説明します。具体的な内容は次のとおり...

mysql5.6 マスタースレーブ設定と非同期の問題の詳細な説明

目次1. MySQL マスタースレーブレプリケーションの原理2. MySQLのコンパイルとインストー...

MySQL FAQ シリーズ: ibdata1 ファイルのサイズが突然増加しないようにする方法

0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...

Dockerfileを使用してDockerイメージを構築する

目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...

単一の MySQL テーブルで数千万のデータを処理するアイデアを共有する

目次プロジェクトの背景改善案データ特性を観察するマルチプロセスアイデアの要約データ処理スキルプロジェ...

CocosCreator 学習モジュールスクリプト

Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...