コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

vue.js ポップアップ コンポーネントに関する知識ポイントのまとめ

高洛峰
リリース： 2017-01-16 12:44:13
オリジナル
1388 人が閲覧しました

まず、開発時に次の 3 つの点を考慮する必要があります:

1. アニメーション効果の入力とポップアップ。

2. Z-indexの制御

3. オーバーレイ被覆レイヤー

アニメーションについて

vue アニメーションの処理は比較的簡単で、コンポーネントにCSSトランジションアニメーションを追加するだけです

<template>
<div class="modal" transition="modal-scale">
 <!--省略其它内容-->
</div>
</template>
<script>
// ...
</script>
<style>
.modal-scale-transition{
 transition: transform,opacity .3s ease;
}
 
.modal-scale-enter,
.modal-scale-leave {
 opacity: 0;
}
 
.modal-scale-enter {
 transform: scale(1.1);
}
.modal-scale-leave {
 transform: scale(0.8);
}
</style>
ログイン後にコピー

外部的にはユーザーが自分で制御でき、v-if または v-show を使用して表示を制御できます

z-index 制御

z-index の制御に関しては、次の点を完了する必要があります
1.ポップアップ ボックスの Z インデックスが十分であることを確認してください。エネルギーが高いため、最外層になります

2. 後でポップアップ ボックスの Z インデックスが、前にポップアップしたものよりも高くなります

上記の 2 点を満たすには、次のコードで 

const zIndex = 20141223 // 先预设较高值
 
const getZIndex = function () {
 return zIndex++ // 每次获取之后 zindex 自动增加
}
ログイン後にコピー

を実装し、バインドする必要があります コンポーネントに z-index を配置します

<template>
<div class="modal" :style="{&#39;z-index&#39;: zIndex}" transition="modal-scale">
 <!--省略其它内容-->
</div>
</template>
<script>
export default {
 data () {
  return {
   zIndex: getZIndex()
  }
 }
}
</script>
ログイン後にコピー

オーバーレイ コントロール

オーバーレイは最も難しい部分です完璧なオーバーレイ コントロールは、次の点を完了する必要があります:

1、カバー レイヤーとポップアップ レイヤー間のアニメーションは平行である必要があります

2. Z インデックスカバー レイヤーのサイズはポップアップ レイヤーのサイズより小さくする必要があります

3. カバー レイヤーがポップアップ表示されたら、コンポーネント ページをスクロールする必要があります

4. カバーをクリックします レイヤーはポップアップ レイヤーにフィードバックを与える必要があります。アップレイヤー

5. ページ全体に最大でも 1 つのカバーレイヤーがあることを確認します (複数のスタックによりカバーレイヤーの色が暗くなります)

これらの問題に対処するために、すべてのポップアップも確実に配置してください。ボックス コンポーネントは使用されません それぞれが解決されたため、Vue のミックスイン機構を使用して、これらのポップアップ レイヤーの共通ロジックをミックスイン レイヤーにカプセル化し、各ポップアップ ボックス コンポーネントがそれを直接参照できるようにすることにしました。

vue-popup-mixin

は、上記の問題をすべて明らかにし、ミックスインの開発を開始しました。まず、オーバーレイ (カバーレイヤーコンポーネント) が必要です。

<template>
 <div class="overlay" @click="handlerClick" @touchmove="prevent" :style="style" transition="overlay-fade"></div>
</template>
<script>
export default {
 props: {
 onClick: {
  type: Function
 },
 opacity: {
  type: Number,
  default: 0.4
 },
 color: {
  type: String,
  default: &#39;#000&#39;
 }
 },
 computed: {
 style () {
  return {
  &#39;opacity&#39;: this.opacity,
  &#39;background-color&#39;: this.color
  }
 }
 },
 methods: {
 prevent (event) {
  event.preventDefault()
  event.stopPropagation()
 },
 handlerClick () {
  if (this.onClick) {
  this.onClick()
  }
 }
 }
}
</script>
<style lang="less">
.overlay {
 position: fixed;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 background-color: #000;
 opacity: .4;
 z-index: 1000;
}
 
 
.overlay-fade-transition {
 transition: all .3s linear;
 &.overlay-fade-enter,
 &.overlay-fade-leave {
 opacity: 0 !important;
 }
}
</style>
ログイン後にコピー

次に、表示を管理するための JS が必要です。オーバーレイの非表示。 

import Vue from &#39;vue&#39;
import overlayOpt from &#39;../overlay&#39; // 引入 overlay 组件
const Overlay = Vue.extend(overlayOpt)
 
const getDOM = function (dom) {
 if (dom.nodeType === 3) {
 dom = dom.nextElementSibling || dom.nextSibling
 getDOM(dom)
 }
 return dom
}
 
// z-index 控制
const zIndex = 20141223
 
const getZIndex = function () {
 return zIndex++
}
// 管理
const PopupManager = {
 instances: [], // 用来储存所有的弹出层实例
 overlay: false,
 // 弹窗框打开时 调用此方法
 open (instance) {
 if (!instance || this.instances.indexOf(instance) !== -1) return
  
 // 当没有遮盖层时，显示遮盖层
 if (this.instances.length === 0) {
  this.showOverlay(instance.overlayColor, instance.overlayOpacity)
 }
 this.instances.push(instance) // 储存打开的弹出框组件
 this.changeOverlayStyle() // 控制不同弹出层 透明度和颜色
  
 // 给弹出层加上z-index
 const dom = getDOM(instance.$el)
 dom.style.zIndex = getZIndex()
 },
 // 弹出框关闭方法
 close (instance) {
 let index = this.instances.indexOf(instance)
 if (index === -1) return
  
 Vue.nextTick(() => {
  this.instances.splice(index, 1)
   
  // 当页面上没有弹出层了就关闭遮盖层
  if (this.instances.length === 0) {
  this.closeOverlay()
  }
  this.changeOverlayStyle()
 })
 },
 showOverlay (color, opacity) {
 let overlay = this.overlay = new Overlay({
  el: document.createElement(&#39;div&#39;)
 })
 const dom = getDOM(overlay.$el)
 dom.style.zIndex = getZIndex()
 overlay.color = color
 overlay.opacity = opacity
 overlay.onClick = this.handlerOverlayClick.bind(this)
 overlay.$appendTo(document.body)
 
 // 禁止页面滚动
 this.bodyOverflow = document.body.style.overflow
 document.body.style.overflow = &#39;hidden&#39;
 },
 closeOverlay () {
 if (!this.overlay) return
 document.body.style.overflow = this.bodyOverflow
 let overlay = this.overlay
 this.overlay = null
 overlay.$remove(() => {
  overlay.$destroy()
 })
 },
 changeOverlayStyle () {
 if (!this.overlay || this.instances.length === 0) return
 const instance = this.instances[this.instances.length - 1]
 this.overlay.color = instance.overlayColor
 this.overlay.opacity = instance.overlayOpacity
 },
 // 遮盖层点击处理，会自动调用 弹出层的 overlayClick 方法
 handlerOverlayClick () {
 if (this.instances.length === 0) return
 const instance = this.instances[this.instances.length - 1]
 if (instance.overlayClick) {
  instance.overlayClick()
 }
 }
}
 
window.addEventListener(&#39;keydown&#39;, function (event) {
 if (event.keyCode === 27) { // ESC
 if (PopupManager.instances.length > 0) {
  const topInstance = PopupManager.instances[PopupManager.instances.length - 1]
  if (!topInstance) return
  if (topInstance.escPress) {
  topInstance.escPress()
  }
 }
 }
})
 
export default PopupManager
ログイン後にコピー

最後に、ミックスインにカプセル化されます

import PopupManager from &#39;./popup-manager&#39;
 
export default {
 props: {
 show: {
  type: Boolean,
  default: false
 },
 // 是否显示遮盖层
 overlay: {
  type: Boolean,
  default: true
 },
 overlayOpacity: {
  type: Number,
  default: 0.4
 },
 overlayColor: {
  type: String,
  default: &#39;#000&#39;
 }
 },
 // 组件被挂载时会判断show的值开控制打开
 attached () {
 if (this.show && this.overlay) {
  PopupManager.open(this)
 }
 },
 // 组件被移除时关闭
 detached () {
 PopupManager.close(this)
 },
 watch: {
 show (val) {
  // 修改 show 值是调用对于的打开关闭方法
  if (val && this.overlay) {
  PopupManager.open(this)
  } else {
  PopupManager.close(this)
  }
 }
 },
 beforeDestroy () {
 PopupManager.close(this)
 }
}
ログイン後にコピー


上記のコードをすべて使用して、すべてのポップアップレイヤーの共通ロジックを完成させます

使用するときは、ロードするだけです。 mixin として

概要

上記は、vue.js ポップアップ コンポーネントに関するいくつかの知識ポイントです。ご質問があれば、お気軽にお問い合わせください。コミュニケーション用のメッセージ PHP 中国語 Web サイトをご利用いただきありがとうございます。

vue.js ポップアップ コンポーネントに関する知識ポイントの概要と関連記事については、PHP 中国語 Web サイトに注目してください。


関連ラベル：
vue 弹窗 组件
ソース：php.cn
前の記事：Vue.js コンポーネントとコンポーネント通信の詳細 次の記事：vue.jsテーブルコンポーネント開発例を詳しく解説
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
クリア後​​も自分のファイル入力の値が残る スクリーンショットでわかるように。ファイルを選択し、ページを更新せずにポップアップを保持し、再度開くと、ファイル入力は選択したファイルのままです。 <inputid=&quo...
から 2024-04-06 15:44:52
0
1
384
Vue3 Webコンポーネントのプロダクションビルドの問題を解決する vue2web コンポーネントを vue3 に移行しようとしていますが、運用用のビルドを作成するときに問題が発生します。 --targetwc を指定して vue-cli を使用し...
から 2024-04-06 12:43:37
0
1
473
VueJS スケジューリング関数の実行順序により問題が発生する APIから取得したお知らせのリストをページに表示しようとしています。私は Vuex ストアを使用しており、アナウンスと呼ばれる状態があります。また、ユーザーがページを更新/入力する...
から 2024-04-06 10:37:58
0
1
385
Vue コンポーネントが完全に初期化されたことを知るにはどうすればよいでしょうか? したがって、私の Vue コンポーネントには、非同期で作成されたメソッドと、非同期ウォッチャーを備えたいくつかの変数があります。これらの変数は、一部のコンポーネントのテンプレート ...
から 2024-04-05 14:20:24
0
1
1442
奥まったものを取り除くのに苦労する 私の Vue コンポーネントは、オブジェクト内のオブジェクトを使用して要素を表示します。ページ上のボタンをクリックすると、ネストされたオブジェクトの 1 つを削除したいと考えていま...
から 2024-04-03 21:48:14
0
1
302
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート