vue popup

Vue-Popup

VUE 2.xメニューコンポーネントを右クリックします

特性：

• ポップアップボックスの位置を動的に計算します
• ポップアップフレームのエッジがビューエリアを超えないことを確認するためのエッジ検出
• 単一のポップアップは複数のトリガー要素に一致させることができます（複数の要素は同じテンプレートの下に書かれています）

インストール

CDN

 < script src =" //cdn.jsdelivr.net/gh/beyoursun/vue-popup/dist/vue-popup.js " > </ script >

npm

npm install @xunlei/vue-popup --save

使用

まず、プラグインを登録する必要があります。

 import Vue from 'vue'
import VuePopup from '@xunlei/vue-popup'

Vue . use ( VuePopup )

.vueファイルでpopupコンポーネントを使用します。

 < template >
  < div >
    < popup ref =" popup1 " :display.sync =" showPop " >
      < h3 >标题</ h3 >
      < p >这是一段内容。 </ p >
    </ popup >
    < a v-popup:popup1 href =" javascript:; " >展示弹出框</ a >
  </ div >
</ template >

< script >
export default {
  data ( ) {
    return {
      showPop : false
    }
  }
}
</ script >

popupコンポーネントにrefリファレンスを追加し、 v-popupディレクティブを使用してボタンをポップアップボックスにマッピングします。 display機能は、ポップアップボックスが表示されているかどうかを構成するために使用されます。

これが簡単なオンライン例です。

インタフェース

小道具

属性名	説明する	タイプ	オプションの値	デフォルト値
ボディへの付録	それを体の下に置きます	ブール	-	真実
矢印クラス	アローのクラス	弦	-	-
方向	ポップアップボックスの方向	弦	TOP/TOPSTART/TOPEND/右/RightStart/RightEnd/Bottom/BottomStart/BottomEnd/Left/LeftStart/REFTEND	底
display（.sync）	目に見えますか	ブール	-	間違い
パディング	ポップアップボックスとトリガー要素間の間隔	番号	-	0
トリガー	ポップアップボックスをトリガーするイベントタイプ	弦	ホバー /フォーカス /クリック	ホバー
スクロールショー	ページがスクロールしているときにポップアップボックスが表示されますか	ブール	-	真実

イベント

イベント名	説明する	コールバックパラメーター
見せる	ポップアップボックスディスプレイイベント	価値
隠れる	ポップアップボックスはイベントを隠します	価値

命令

v-popup

• 説明：ディレクティブは、ポップアップボックスをトリガーする要素に追加する必要があります。

• パラメーター：

  • popupRef (required) - 特定のポップアップボックスを一致させるために使用されます。

• タイプ：

  • any (optional) - イベントがトリガーされたときに渡されたコールバックパラメーター。

• 例：

 < popup
  ref =" popup1 "
  :display.sync =" showPop "
  @show =" handleShow "
  @hide =" handleHide " >
</ popup >
< a v-popup:popup1 =" val " > </ a >

< scirpt >
export default {
  ...
  methods: {
    handleShow (val) { },
    handleHide (val) { }
  }
}
</ script >

スタイル

ポップアップコンポーネントは、トップ、左などの必要なスタイルとクラスのみを追加します...ユーザーが特定のスタイルを提供する必要があります。

ポップアップボックスが方向を変更すると、次の4つのクラスがポップアップボックスのルート要素に追加され、さまざまな方向のスタイルを一致させます。

• ポップアップボックスがトリガー要素の上にあるとき：ポップアップトップ
• ポップアップボックスがトリガー要素の下にあるとき：Popup-Bottom
• ポップアップボックスが要素の左にトリガーされたとき：Popup-Left
• ポップアップボックスが要素の右側にトリガーされたとき：Popup-Right

ステップを構築します

 # clone the project repo
git clone https://github.com/beyoursun/vue-popup.git

# install dependencies
cd vue-popup && npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

ライセンス

mit