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特性用來配置彈出框是否可見。

這是一個簡單的在線示例。

接口

Prop

屬性名	描述	類型	可選值	預設值
append-to-body	是否放到body 下	Boolean	-	true
arrow-class	箭頭的類	String	-	-
direction	彈出框方向	String	top / topStart / topEnd / right / rightStart / rightEnd / bottom / bottomStart / bottomEnd / left / leftStart / leftEnd	bottom
display (.sync)	是否可見	Boolean	-	false
padding	彈出框與觸發元素的間距	Number	-	0
trigger	觸發彈出框的事件類型	String	hover / focus / click	hover
scroll-show	頁面滾動時彈出框是否可見	Boolean	-	true

事件

事件名	描述	回調參數
show	彈出框展示事件	value
hide	彈出框隱藏事件	value

指令

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 >

樣式

彈出框組件只會添加必要的樣式和類，如top, left...具體的樣式需要用戶給出。

彈出框在改變方向時，會分別為彈出框的根元素添加以下四個類，用以匹配不同方向的樣式。

• 彈出框在觸發元素上方時：popup-top
• 彈出框在觸發元素下方時：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

License

MIT