mirror of https://github.com/ElemeFE/element
fix popover
Leopoldthecoder
parent
07a0943d6b
commit
26037506a4
|
|
@ -185,11 +185,11 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
ref="popover5"
|
||||
placement="top"
|
||||
width="160"
|
||||
:visible.sync="visible2">
|
||||
:visible="visible2">
|
||||
<p>这是一段内容这是一段内容确定删除吗？</p>
|
||||
<div style="text-align: right; margin: 0">
|
||||
<el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>
|
||||
<el-button size="mini" type="text" @click.native="visible2 = false">取消</el-button>
|
||||
<el-button type="primary" size="mini" @click.native="visible2 = false">确定</el-button>
|
||||
</div>
|
||||
</el-popover>
|
||||
|
||||
|
|
@ -200,14 +200,14 @@ Popover 的属性与 Tooltip 很类似，它们都是基于`Vue-popper`开发的
|
|||
### Attributes
|
||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||
|--------------------|----------------------------------------------------------|-------------------|-------------|--------|
|
||||
| trigger | 触发方式 | String | 'click', 'focus', 'hover' | click |
|
||||
| trigger | 触发方式 | String | click/focus/hover | click |
|
||||
| title | 标题 | String | — | — |
|
||||
| content | 显示的内容，也可以通过 `slot#` 传入 DOM | String | — | — |
|
||||
| content | 显示的内容，也可以通过 `slot` 传入 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 |
|
||||
| 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 |
|
||||
| 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 |
|
||||
| options | [popper.js](https://popper.js.org/documentation.html) 的参数 | Object | 参考 [popper.js](https://popper.js.org/documentation.html) 文档 | `{ boundariesElement: 'body', gpuAcceleration: false }` |
|
||||
|
||||
|
|
|
|||
|
|
@ -54,52 +54,53 @@ export default {
|
|||
},
|
||||
|
||||
mounted() {
|
||||
let _timer;
|
||||
const reference = this.reference || this.$refs.reference;
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (this.trigger === 'click') {
|
||||
on(reference, 'click', () => { this.showPopper = !this.showPopper; });
|
||||
on(document, 'click', (e) => {
|
||||
if (!this.$el ||
|
||||
!reference ||
|
||||
this.$el.contains(e.target) ||
|
||||
reference.contains(e.target)) return;
|
||||
this.showPopper = false;
|
||||
});
|
||||
} else if (this.trigger === 'hover') {
|
||||
on(reference, 'mouseenter', () => {
|
||||
this.showPopper = true;
|
||||
clearTimeout(_timer);
|
||||
});
|
||||
on(reference, 'mouseleave', () => {
|
||||
_timer = setTimeout(() => {
|
||||
setTimeout(() => {
|
||||
let _timer;
|
||||
const reference = this.reference || this.$refs.reference;
|
||||
this.$nextTick(() => {
|
||||
if (this.trigger === 'click') {
|
||||
on(reference, 'click', () => { this.showPopper = !this.showPopper; });
|
||||
on(document, 'click', (e) => {
|
||||
if (!this.$el ||
|
||||
!reference ||
|
||||
this.$el.contains(e.target) ||
|
||||
reference.contains(e.target)) return;
|
||||
this.showPopper = false;
|
||||
}, 200);
|
||||
});
|
||||
} else {
|
||||
if ([].slice.call(reference.children).length) {
|
||||
const children = reference.childNodes;
|
||||
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
if (children[i].nodeName === 'INPUT') {
|
||||
on(children[i], 'focus', () => { this.showPopper = true; });
|
||||
on(children[i], 'blur', () => { this.showPopper = false; });
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
reference.nodeName === 'INPUT' ||
|
||||
reference.nodeName === 'TEXTAREA'
|
||||
) {
|
||||
on(reference, 'focus', () => { this.showPopper = true; });
|
||||
on(reference, 'blur', () => { this.showPopper = false; });
|
||||
});
|
||||
} else if (this.trigger === 'hover') {
|
||||
on(reference, 'mouseenter', () => {
|
||||
this.showPopper = true;
|
||||
clearTimeout(_timer);
|
||||
});
|
||||
on(reference, 'mouseleave', () => {
|
||||
_timer = setTimeout(() => {
|
||||
this.showPopper = false;
|
||||
}, 200);
|
||||
});
|
||||
} else {
|
||||
on(reference, 'mousedown', () => { this.showPopper = true; });
|
||||
on(reference, 'mouseup', () => { this.showPopper = false; });
|
||||
if ([].slice.call(reference.children).length) {
|
||||
const children = reference.childNodes;
|
||||
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
if (children[i].nodeName === 'INPUT') {
|
||||
on(children[i], 'focus', () => { this.showPopper = true; });
|
||||
on(children[i], 'blur', () => { this.showPopper = false; });
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else if (
|
||||
reference.nodeName === 'INPUT' ||
|
||||
reference.nodeName === 'TEXTAREA'
|
||||
) {
|
||||
on(reference, 'focus', () => { this.showPopper = true; });
|
||||
on(reference, 'blur', () => { this.showPopper = false; });
|
||||
} else {
|
||||
on(reference, 'mousedown', () => { this.showPopper = true; });
|
||||
on(reference, 'mouseup', () => { this.showPopper = false; });
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
}, 100);
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue