mirror of https://github.com/ElemeFE/element
Tooltip: Add lazy
parent
2d05bdea49
commit
c0aecc9ce1
|
@ -210,3 +210,5 @@ Tooltip 组件提供了两个不同的主题:`dark`和`light`,可以通过
|
||||||
| 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 }` |
|
||||||
|
| lazy | 延迟出现,单位毫秒 | Number | | 0 |
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="el-tooltip"
|
class="el-tooltip"
|
||||||
@mouseenter="showPopper = true"
|
@mouseenter="handleShowPopper"
|
||||||
@mouseleave="showPopper = false">
|
@mouseleave="handleClosePopper">
|
||||||
<div class="el-tooltip__rel" ref="reference">
|
<div class="el-tooltip__rel" ref="reference">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
|
@ -28,6 +28,10 @@ export default {
|
||||||
mixins: [Popper],
|
mixins: [Popper],
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
|
lazy: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
effect: {
|
effect: {
|
||||||
type: String,
|
type: String,
|
||||||
|
@ -49,6 +53,19 @@ export default {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleShowPopper() {
|
||||||
|
this.timeout = setTimeout(() => {
|
||||||
|
this.showPopper = true;
|
||||||
|
}, this.lazy);
|
||||||
|
},
|
||||||
|
|
||||||
|
handleClosePopper() {
|
||||||
|
clearTimeout(this.timeout);
|
||||||
|
this.showPopper = false;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -7,6 +7,7 @@ import DropdownItem from '../packages/dropdown-item/index.js';
|
||||||
import Menu from '../packages/menu/index.js';
|
import Menu from '../packages/menu/index.js';
|
||||||
import Submenu from '../packages/submenu/index.js';
|
import Submenu from '../packages/submenu/index.js';
|
||||||
import MenuItem from '../packages/menu-item/index.js';
|
import MenuItem from '../packages/menu-item/index.js';
|
||||||
|
import MenuItemGroup from '../packages/menu-item-group/index.js';
|
||||||
import Input from '../packages/input/index.js';
|
import Input from '../packages/input/index.js';
|
||||||
import InputNumber from '../packages/input-number/index.js';
|
import InputNumber from '../packages/input-number/index.js';
|
||||||
import Radio from '../packages/radio/index.js';
|
import Radio from '../packages/radio/index.js';
|
||||||
|
@ -43,7 +44,7 @@ import Loading from '../packages/loading/index.js';
|
||||||
import Icon from '../packages/icon/index.js';
|
import Icon from '../packages/icon/index.js';
|
||||||
import Row from '../packages/row/index.js';
|
import Row from '../packages/row/index.js';
|
||||||
import Col from '../packages/col/index.js';
|
import Col from '../packages/col/index.js';
|
||||||
// import Upload from '../packages/upload/index.js';
|
import Upload from '../packages/upload/index.js';
|
||||||
import Progress from '../packages/progress/index.js';
|
import Progress from '../packages/progress/index.js';
|
||||||
import Spinner from '../packages/spinner/index.js';
|
import Spinner from '../packages/spinner/index.js';
|
||||||
import Message from '../packages/message/index.js';
|
import Message from '../packages/message/index.js';
|
||||||
|
@ -65,6 +66,7 @@ const install = function(Vue) {
|
||||||
Vue.component(Menu.name, Menu);
|
Vue.component(Menu.name, Menu);
|
||||||
Vue.component(Submenu.name, Submenu);
|
Vue.component(Submenu.name, Submenu);
|
||||||
Vue.component(MenuItem.name, MenuItem);
|
Vue.component(MenuItem.name, MenuItem);
|
||||||
|
Vue.component(MenuItemGroup.name, MenuItemGroup);
|
||||||
Vue.component(Input.name, Input);
|
Vue.component(Input.name, Input);
|
||||||
Vue.component(InputNumber.name, InputNumber);
|
Vue.component(InputNumber.name, InputNumber);
|
||||||
Vue.component(Radio.name, Radio);
|
Vue.component(Radio.name, Radio);
|
||||||
|
@ -98,7 +100,7 @@ const install = function(Vue) {
|
||||||
Vue.component(Icon.name, Icon);
|
Vue.component(Icon.name, Icon);
|
||||||
Vue.component(Row.name, Row);
|
Vue.component(Row.name, Row);
|
||||||
Vue.component(Col.name, Col);
|
Vue.component(Col.name, Col);
|
||||||
// Vue.component(Upload.name, Upload);
|
Vue.component(Upload.name, Upload);
|
||||||
Vue.component(Progress.name, Progress);
|
Vue.component(Progress.name, Progress);
|
||||||
Vue.component(Spinner.name, Spinner);
|
Vue.component(Spinner.name, Spinner);
|
||||||
Vue.component(Message.name, Message);
|
Vue.component(Message.name, Message);
|
||||||
|
@ -134,6 +136,7 @@ module.exports = {
|
||||||
Menu,
|
Menu,
|
||||||
Submenu,
|
Submenu,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
|
MenuItemGroup,
|
||||||
Input,
|
Input,
|
||||||
InputNumber,
|
InputNumber,
|
||||||
Radio,
|
Radio,
|
||||||
|
@ -170,7 +173,7 @@ module.exports = {
|
||||||
Icon,
|
Icon,
|
||||||
Row,
|
Row,
|
||||||
Col,
|
Col,
|
||||||
// Upload,
|
Upload,
|
||||||
Progress,
|
Progress,
|
||||||
Spinner,
|
Spinner,
|
||||||
Message,
|
Message,
|
||||||
|
|
Loading…
Reference in New Issue