序文ビジネスが発展するにつれて、機能開発だけではフロントエンドのニーズを満たすことができなくなります。この記事では主に、独自のコンポーネント ライブラリを開発する方法を説明します。 使用シナリオ: 内部コンポーネントライブラリの開発、個人用コンポーネントライブラリの開発、プロジェクトからの分離、複数のプロジェクトで同じコンポーネントを使用する、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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Dockerコンテナ内にkibanaトークナイザーをインストールする方法
>>: CentOS8 で MySQL 8.0 をインストールしてデプロイする方法
mysql が誤ってデータを削除しました削除ステートメントを使用して誤ってデータ行を削除する誤ってデ...
ユーザーが目的のものを探すために前進するか後退するかを選択できるようにします。たとえば、Taobao...
最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...
<br />jb51.net では、常に記事のセマンティクスを重視してきましたが、HTM...
memcachedをインストールする yum インストール -y memcached #memcac...
目次概要node.js でマルチコア CPU を最大限に活用する方法Node で子プロセスを作成する...
目次1. プロジェクトの構築2. Vue3 体験 + Vant 紹介2020年9月18日にvue.j...
序文この記事では、SQL インジェクションを回避するために pdo の前処理メソッドを使用します。詳...
序文ページを作っていく上で、ページレイアウトに関する内容に遭遇することが多く、面接でも聞かれることも...
この記事では、VMware仮想マシンのNAT構成プロセスを詳しく説明します。具体的な内容は次のとおり...
目次1. MySQL マスタースレーブレプリケーションの原理2. MySQLのコンパイルとインストー...
0. はじめにibdata1 ファイルとは何ですか? ibdata1 は、innodb システム テ...
目次Dockerfileを使用してDockerイメージを構築する1. Dockerfile とは何で...
目次プロジェクトの背景改善案データ特性を観察するマルチプロセスアイデアの要約データ処理スキルプロジェ...
Cocos Creator モジュラースクリプトCocos Creator を使用すると、コードを複...