1. Popover彈出框

1.1. Popover的屬性與Tooltip很類似, 它們都是基于Vue-popper開發的, 因此對于重復屬性, 請參考Tooltip的文檔。

1.2. Attributes

參數	說明	類型	可選值	默認值
trigger	觸發方式	String	click/focus/hover/manual	click
title	標題	String	無	無
content	顯示的內容, 也可以通過slot#content傳入DOM	String	無	無
width	寬度	String, Number	無	最小寬度150px
placement	出現位置	String	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end	bottom
value / v-model	?狀態是否可見	Boolean	無	false
disabled	Popover是否可用	Boolean	無	false
offset	出現位置的偏移量	Number	無	0
transition	定義漸變動畫	String	無	el-fade-in-linear
visible-arrow	是否顯示Popover箭頭, 更多參數可見Vue-popper	Boolean	無	true
popper-options	popper.js的參數	Object	參考popper.js文檔	{ boundariesElement: 'body', gpuAcceleration: false }
manual	手動控制模式	Boolean	無	false
popper-class	為popper添加類名	String	無	無
open-delay	觸發方式為hover時的顯示延遲, 單位為毫秒	Number	無	無
close-delay	觸發方式為hover時的隱藏延遲, 單位為毫秒	Number	無	200
tabindex	Tooltip組件的tabindex	Number	無	0

1.3. Slot

Name	說明
—	Popover內嵌HTML文本
reference	觸發Popover顯示的HTML元素

1.4. Events

事件名稱	說明	回調參數
show	顯示時觸發	無
after-enter	顯示動畫播放完畢后觸發	無
hide	隱藏時觸發	無
after-leave	隱藏動畫播放完畢后觸發	無

2. Popover彈出框例子

2.1. 使用腳手架新建一個名為element-ui-popover的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import Popover from '../components/Popover.vue' import TablePopover from '../components/TablePopover.vue' import DialogPopover from '../components/DialogPopover.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Popover' },{ path: '/Popover', component: Popover },{ path: '/TablePopover', component: TablePopover },{ path: '/DialogPopover', component: DialogPopover } ]const router = new VueRouter({routes })export default router

2.3. 在components下創建Popover.vue

<template><div><h1>基礎用法</h1><h4>Popover的通過trigger屬性, 設置click、focus、hover、manual, 4種觸發方式。</h4><el-row><el-col :span="3"><el-popover placement="top-start" title="標題" width="200" trigger="hover" content="hover這是一段內容。"><el-button slot="reference">hover 激活</el-button></el-popover></el-col><el-col :span="3"><el-popover placement="bottom" title="標題" width="200" trigger="click" content="click這是一段內容。"><el-button slot="reference">click 激活</el-button></el-popover></el-col><el-col :span="3"><el-popover ref="popover" placement="right" title="標題" width="200" trigger="focus" content="focus這是一段內容。"></el-popover><el-button v-popover:popover>focus 激活</el-button></el-col><el-col :span="3"><el-popover placement="bottom" title="標題" width="200" trigger="manual" content="manual這是一段內容。" v-model="visible"><el-button slot="reference" @click="visible = !visible">手動激活</el-button></el-popover></el-col></el-row></div> </template><script> export default {data () {return {visible: false}} } </script>

2.4. 在components下創建TablePopover.vue

<template><div><h1>嵌套信息</h1><h4>可以在Popover中嵌套多種類型信息, 以下為嵌套表格的例子。</h4><el-popover placement="bottom" width="600" trigger="click"><el-table :data="gridData"><el-table-column width="150" property="date" label="日期"></el-table-column><el-table-column width="100" property="name" label="姓名"></el-table-column><el-table-column width="300" property="address" label="地址"></el-table-column></el-table><el-button slot="reference">click 激活</el-button></el-popover></div> </template><script> export default {data () {return {gridData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀區金沙江路 1518 弄'}]}} } </script>

2.5. 在components下創建DialogPopover.vue

<template><div><h1>嵌套操作</h1><h4>當然, 你還可以嵌套操作, 這相比Dialog更為輕量。</h4><el-popover placement="top" width="160" v-model="visible"><p>這是一段內容這是一段內容確定刪除嗎?</p><div style="text-align: right; margin: 0"><el-button size="mini" type="text" @click="visible = false">取消</el-button><el-button type="primary" size="mini" @click="visible = false">確定</el-button></div><el-button slot="reference">刪除</el-button></el-popover></div> </template><script> export default {data () {return {visible: false}} } </script>

2.6. 運行項目, 訪問http://localhost:8080/#/Popover

2.7. 運行項目, 訪問http://localhost:8080/#/TablePopover

2.8. 運行項目, 訪問http://localhost:8080/#/DialogPopover

總結

以上是生活随笔為你收集整理的041_Popover弹出框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。