github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #33 from QingWei-Li/fix/popover 

Popover: add reference slot
pull/36/head
SkyAo 2016-09-08 11:25:48 +08:00 committed by GitHub
parent 9c0fbef1ed a77b6850e1
commit 69b0ed7928
3 changed files with 22 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
examples/docs/popover.md
View File

@ -107,7 +107,7 @@
.el-input { .el-input {
width: 360px; width: 360px;
} }
.el-button + .el-button { .el-button {
margin-left: 10px; margin-left: 10px;
} }
} }
@ -118,7 +118,7 @@
### 基础用法 ### 基础用法
Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。 Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。
:::demo 必须设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`。 :::demo 设置索引`ref`，在按钮中，我们注册了自定义指令`v-popover`，指向索引ID。`trigger`属性用于设置何时触发 Popover ，提供三种触发方式：`hover`, `click` 和 `focus`。或者通过 `slot` 指定 reference。
```html ```html
<el-popover <el-popover
ref="popover1" ref="popover1"
@ -138,18 +138,16 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
content="这是一段容,这是一段容,这是一段容,这是一段容。"> content="这是一段容,这是一段容,这是一段容,这是一段容。">
</el-popover> </el-popover>
<el-button v-popover:popover1>hover 激活</el-button>
<el-button v-popover:popover2>click 激活</el-button>
<el-popover <el-popover
ref="popover3"
placement="right" placement="right"
title="标题" title="标题"
width="200" width="200"
trigger="focus" trigger="focus"
content="这是一段容,这是一段容,这是一段容,这是一段容。"> content="这是一段容,这是一段容,这是一段容,这是一段容。">
<el-button slot="reference">focus 激活</el-button>
</el-popover> </el-popover>
<el-button v-popover:popover1>hover 激活</el-button>
<el-button v-popover:popover2>click 激活</el-button>
<el-button v-popover:popover3>focus 激活</el-button>
``` ```
::: :::

28
packages/popover/src/main.vue
View File

@ -1,14 +1,17 @@
<template> <template>
<transition :name="transition"> <span>
<div <transition :name="transition">
class="el-popover" <div
ref="popper" class="el-popover"
v-show="showPopper" ref="popper"
:style="{ width: width + 'px' }"> v-show="showPopper"
<div class="el-popover__title" v-if="title" v-text="title"></div> :style="{ width: width + 'px' }">
<slot>{{ content }}</slot> <div class="el-popover__title" v-if="title" v-text="title"></div>
</div> <slot>{{ content }}</slot>
</transition> </div>
</transition>
<slot name="reference"></slot>
</span>
</template> </template>
<script> <script>
@ -56,7 +59,8 @@ export default {
mounted() { mounted() {
setTimeout(() => { setTimeout(() => {
let _timer; let _timer;
const reference = this.reference || this.$refs.reference; const reference = this.reference || this.$refs.reference || this.$slots.reference[0].elm;
this.$nextTick(() => { this.$nextTick(() => {
if (this.trigger === 'click') { if (this.trigger === 'click') {
on(reference, 'click', () => { this.showPopper = !this.showPopper; }); on(reference, 'click', () => { this.showPopper = !this.showPopper; });
@ -104,7 +108,7 @@ export default {
}, },
destroyed() { destroyed() {
const reference = this.reference || this.$refs.reference; const reference = this.reference;
off(reference, 'mouseup'); off(reference, 'mouseup');
off(reference, 'mousedown'); off(reference, 'mousedown');

2
src/utils/vue-popper.js
View File

@ -63,7 +63,7 @@ export default {
const options = this.options; const options = this.options;
const popper = this.popper || this.$refs.popper; const popper = this.popper || this.$refs.popper;
const reference = this.reference || this.$refs.reference; const reference = this.reference || this.$refs.reference || this.$slots.reference[0].elm;;
if (!popper || !reference) return; if (!popper || !reference) return;
if (this.visibleArrow) { if (this.visibleArrow) {