mirror of https://github.com/ElemeFE/element
Merge pull request #590 from QingWei-Li/feat/tooltip-manual
Tooltip: add manual featurepull/596/head
commit
f396715df5
|
@ -44,7 +44,7 @@
|
||||||
.item {
|
.item {
|
||||||
margin: 4px;
|
margin: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left .el-tooltip__popper,
|
.left .el-tooltip__popper,
|
||||||
.right .el-tooltip__popper {
|
.right .el-tooltip__popper {
|
||||||
padding: 8px 10px;
|
padding: 8px 10px;
|
||||||
|
@ -150,19 +150,6 @@ Tooltip 组件提供了两个不同的主题:`dark`和`light`。
|
||||||
<el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
|
<el-button @click.native="disabled=true">点击关闭 tooltip 功能</el-button>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style>
|
|
||||||
.slide-fade-enter-active {
|
|
||||||
transition: all .3s ease;
|
|
||||||
}
|
|
||||||
.slide-fade-leave-active {
|
|
||||||
transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
|
|
||||||
}
|
|
||||||
.slide-fade-enter, .expand-fade-leave-active {
|
|
||||||
margin-left: 20px;
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
```
|
```
|
||||||
:::
|
:::
|
||||||
|
|
||||||
|
@ -179,3 +166,4 @@ Tooltip 组件提供了两个不同的主题:`dark`和`light`。
|
||||||
| 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 }` |
|
||||||
| openDelay | 延迟出现,单位毫秒 | Number | — | 0 |
|
| openDelay | 延迟出现,单位毫秒 | Number | — | 0 |
|
||||||
|
| manual | 手动控制模式,设置为 true 后,mouseenter 和 mouseleave 事件将不会生效 | Boolean | true,false| false |
|
||||||
|
|
|
@ -33,6 +33,7 @@ export default {
|
||||||
default: 0
|
default: 0
|
||||||
},
|
},
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
|
manual: Boolean,
|
||||||
effect: {
|
effect: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'dark'
|
default: 'dark'
|
||||||
|
@ -57,12 +58,14 @@ export default {
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleShowPopper() {
|
handleShowPopper() {
|
||||||
|
if (this.manual) return;
|
||||||
this.timeout = setTimeout(() => {
|
this.timeout = setTimeout(() => {
|
||||||
this.showPopper = true;
|
this.showPopper = true;
|
||||||
}, this.openDelay);
|
}, this.openDelay);
|
||||||
},
|
},
|
||||||
|
|
||||||
handleClosePopper() {
|
handleClosePopper() {
|
||||||
|
if (this.manual) return;
|
||||||
clearTimeout(this.timeout);
|
clearTimeout(this.timeout);
|
||||||
this.showPopper = false;
|
this.showPopper = false;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { createVue } from '../util';
|
import { createVue, triggerEvent } from '../util';
|
||||||
|
|
||||||
describe('Tooltip', () => {
|
describe('Tooltip', () => {
|
||||||
it('create', () => {
|
it('create', () => {
|
||||||
|
@ -10,6 +10,44 @@ describe('Tooltip', () => {
|
||||||
expect(vm.$el.querySelector('.el-tooltip__popper')).to.have.property('textContent', '提示文字');
|
expect(vm.$el.querySelector('.el-tooltip__popper')).to.have.property('textContent', '提示文字');
|
||||||
});
|
});
|
||||||
|
|
||||||
|
describe('manual', () => {
|
||||||
|
const vm = createVue({
|
||||||
|
template: `
|
||||||
|
<el-tooltip ref="tooltip" manual content="abc" v-model="show">
|
||||||
|
<button>click</button>
|
||||||
|
</el-tooltip>
|
||||||
|
`,
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return { show: false };
|
||||||
|
}
|
||||||
|
}, true);
|
||||||
|
const tooltip = vm.$refs.tooltip;
|
||||||
|
|
||||||
|
it('showPopper is false', () => {
|
||||||
|
triggerEvent(tooltip.$el, 'mouseenter');
|
||||||
|
expect(tooltip.showPopper).to.false;
|
||||||
|
});
|
||||||
|
it('show', done => {
|
||||||
|
vm.show = true;
|
||||||
|
vm.$nextTick(_ => {
|
||||||
|
expect(tooltip.showPopper).to.true;
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
it('still show when trigger mouseleave', () => {
|
||||||
|
triggerEvent(tooltip.$el, 'mouseleave');
|
||||||
|
expect(tooltip.showPopper).to.true;
|
||||||
|
});
|
||||||
|
it('hidden', done => {
|
||||||
|
vm.show = false;
|
||||||
|
vm.$nextTick(_ => {
|
||||||
|
expect(tooltip.showPopper).to.false;
|
||||||
|
done();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
describe('hover', () => {
|
describe('hover', () => {
|
||||||
const vm = createVue(`
|
const vm = createVue(`
|
||||||
<el-tooltip ref="tooltip" content="提示文字">
|
<el-tooltip ref="tooltip" content="提示文字">
|
||||||
|
@ -18,11 +56,11 @@ describe('Tooltip', () => {
|
||||||
`);
|
`);
|
||||||
const tooltip = vm.$refs.tooltip;
|
const tooltip = vm.$refs.tooltip;
|
||||||
|
|
||||||
tooltip.handleShowPopper();
|
triggerEvent(tooltip.$el, 'mouseenter');
|
||||||
it('popperElm is exist', () => expect(tooltip.popperElm).to.exist);
|
it('popperElm is exist', () => expect(tooltip.popperElm).to.exist);
|
||||||
it('showPopper is true', () => expect(tooltip.showPopper).to.true);
|
it('showPopper is true', () => expect(tooltip.showPopper).to.true);
|
||||||
it('close popper', () => {
|
it('close popper', () => {
|
||||||
tooltip.handleClosePopper();
|
triggerEvent(tooltip.$el, 'mouseleave');
|
||||||
expect(tooltip.showPopper).to.false;
|
expect(tooltip.showPopper).to.false;
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue