Tooltip: Add lazy

pull/2/head
qingwei.li 2016-08-25 09:02:53 +08:00
parent 2d05bdea49
commit c0aecc9ce1
3 changed files with 27 additions and 5 deletions

View File

@ -210,3 +210,5 @@ Tooltip 组件提供了两个不同的主题:`dark`和`light`,可以通过
| 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 }` |
| lazy | 延迟出现,单位毫秒 | Number | | 0 |

View File

@ -1,8 +1,8 @@
<template>
<div
class="el-tooltip"
@mouseenter="showPopper = true"
@mouseleave="showPopper = false">
@mouseenter="handleShowPopper"
@mouseleave="handleClosePopper">
<div class="el-tooltip__rel" ref="reference">
<slot></slot>
</div>
@ -28,6 +28,10 @@ export default {
mixins: [Popper],
props: {
lazy: {
type: Number,
default: 0
},
disabled: Boolean,
effect: {
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>

View File

@ -7,6 +7,7 @@ import DropdownItem from '../packages/dropdown-item/index.js';
import Menu from '../packages/menu/index.js';
import Submenu from '../packages/submenu/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 InputNumber from '../packages/input-number/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 Row from '../packages/row/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 Spinner from '../packages/spinner/index.js';
import Message from '../packages/message/index.js';
@ -65,6 +66,7 @@ const install = function(Vue) {
Vue.component(Menu.name, Menu);
Vue.component(Submenu.name, Submenu);
Vue.component(MenuItem.name, MenuItem);
Vue.component(MenuItemGroup.name, MenuItemGroup);
Vue.component(Input.name, Input);
Vue.component(InputNumber.name, InputNumber);
Vue.component(Radio.name, Radio);
@ -98,7 +100,7 @@ const install = function(Vue) {
Vue.component(Icon.name, Icon);
Vue.component(Row.name, Row);
Vue.component(Col.name, Col);
// Vue.component(Upload.name, Upload);
Vue.component(Upload.name, Upload);
Vue.component(Progress.name, Progress);
Vue.component(Spinner.name, Spinner);
Vue.component(Message.name, Message);
@ -134,6 +136,7 @@ module.exports = {
Menu,
Submenu,
MenuItem,
MenuItemGroup,
Input,
InputNumber,
Radio,
@ -170,7 +173,7 @@ module.exports = {
Icon,
Row,
Col,
// Upload,
Upload,
Progress,
Spinner,
Message,