041_Popover弹出框

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