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

fix popover

pull/2/head
Leopoldthecoder 2016-09-02 14:51:01 +08:00
parent 07a0943d6b
commit 26037506a4
2 changed files with 51 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/docs/popover.md
View File

@ -185,11 +185,11 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
ref="popover5" ref="popover5"
placement="top" placement="top"
width="160" width="160"
:visible.sync="visible2"> :visible="visible2">
<p>这是一段内容这是一段内容确定删除吗？</p> <p>这是一段内容这是一段内容确定删除吗？</p>
<div style="text-align: right; margin: 0"> <div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button> <el-button size="mini" type="text" @click.native="visible2 = false">取消</el-button>
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button> <el-button type="primary" size="mini" @click.native="visible2 = false">确定</el-button>
</div> </div>
</el-popover> </el-popover>
@ -200,14 +200,14 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
### Attributes ### Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|--------------------|----------------------------------------------------------|-------------------|-------------|--------| |--------------------|----------------------------------------------------------|-------------------|-------------|--------|
| trigger | 触发方式 | String | 'click', 'focus', 'hover' | click | | trigger | 触发方式 | String | click/focus/hover | click |
| title | 标题 | String | — | — | | title | 标题 | String | — | — |
| content | 显示的内容，也可以通过 `slot#` 传入 DOM | String | — | — | | content | 显示的内容，也可以通过 `slot` 传入 DOM | String | — | — |
| width | 宽度 | String, Number | — | 最小宽度 150px | | 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 | | placement | 出现位置 | String | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | bottom |
| visible | 初始状态是否可见 | Boolean | — | false | | visible | 初始状态是否可见 | Boolean | — | false |
| offset | 出现位置的偏移量 | Number | — | 0 | | offset | 出现位置的偏移量 | Number | — | 0 |
| transition | 定义渐变动画 | String | — | `fade-in-linear` | | transition | 定义渐变动画 | String | — | fade-in-linear |
| visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true | | visible-arrow | 是否显示 Tooltip 箭头，更多参数可见[Vue-popper](https://github.com/element-component/vue-popper) | Boolean | — | true |
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` | | options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |

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

@ -54,9 +54,9 @@ export default {
}, },
mounted() { mounted() {
setTimeout(() => {
let _timer; let _timer;
const reference = this.reference || this.$refs.reference; const reference = this.reference || this.$refs.reference;
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; });
@ -100,6 +100,7 @@ export default {
} }
} }
}); });
}, 100);
}, },
destroyed() { destroyed() {