mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-30 02:57:50 +08:00
update: [Tooltip] receive updates
This commit is contained in:
wanlei
parent
65b36f3bff
commit
0651911ce7
@ -20,11 +20,22 @@
|
||||
.motion-common-leave(@duration);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-enter-active,
|
||||
.@{className}-appear-active {
|
||||
animation-name: ~"@{keyframeName}In";
|
||||
animation-play-state: running;
|
||||
.motion-common(@duration);
|
||||
}
|
||||
.@{className}-enter.@{className}-enter-active,
|
||||
.@{className}-appear.@{className}-appear-active {
|
||||
animation-name: ~"@{keyframeName}In";
|
||||
animation-play-state: running;
|
||||
}
|
||||
.@{className}-leave-active {
|
||||
animation-name: ~"@{keyframeName}Out";
|
||||
animation-play-state: running;
|
||||
.motion-common(@duration);
|
||||
}
|
||||
.@{className}-leave.@{className}-leave-active {
|
||||
animation-name: ~"@{keyframeName}Out";
|
||||
animation-play-state: running;
|
||||
|
||||
@ -145,63 +145,3 @@
|
||||
right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
modified part ,remove these if needed
|
||||
*/
|
||||
|
||||
.vc-fade-enter-active, .vc-fade-leave-active {
|
||||
transition: all 3s;
|
||||
}
|
||||
.vc-fade-enter, .vc-fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.box {
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.fade-enter {
|
||||
opacity: 0;
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.fade-leave {
|
||||
animation-duration: 0.3s;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.fade-enter.fade-enter-active {
|
||||
animation-name: rcDialogFadeIn;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
.fade-leave.fade-leave-active {
|
||||
animation-name: rcDialogFadeOut;
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@keyframes rcDialogFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcDialogFadeOut {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,13 +1,9 @@
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import AntTransition from '../../utils/ant-transition.vue'
|
||||
|
||||
Vue.component('ant-transition', AntTransition)
|
||||
|
||||
export default {
|
||||
name: 'ToolTip',
|
||||
props: {
|
||||
title: [String, Vue.Component],
|
||||
title: String,
|
||||
prefixCls: {
|
||||
default: 'ant-tooltip',
|
||||
},
|
||||
@ -37,6 +33,7 @@ export default {
|
||||
visible: false,
|
||||
left: 0,
|
||||
top: 0,
|
||||
domNode: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -60,10 +57,10 @@ export default {
|
||||
},
|
||||
render(h) {
|
||||
return (
|
||||
<ant-transition name="fade">
|
||||
<transition name="zoom-big">
|
||||
<div
|
||||
v-show={that.visible}
|
||||
class={`ant-tooltip ant-tooltip-placement-${that.placement} ${that.visible ? '' : 'ant-tooltip-hidden'}`}
|
||||
class={`ant-tooltip ant-tooltip-placement-${that.placement}`}
|
||||
style={{ left: this.left + 'px', top: this.top + 'px' }}
|
||||
>
|
||||
<div class="ant-tooltip-content">
|
||||
@ -73,12 +70,13 @@ export default {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ant-transition>
|
||||
</transition>
|
||||
)
|
||||
}
|
||||
}).$mount(div)
|
||||
this.$nextTick(() => {
|
||||
this.vnode = vnode
|
||||
this.domNode = div
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
@ -164,16 +162,17 @@ export default {
|
||||
// console.info(inner)
|
||||
return this.$slots.default[0]
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
})
|
||||
updated() {
|
||||
const popup = this.vnode.$el.getBoundingClientRect()
|
||||
const content = this.$el.getBoundingClientRect()
|
||||
const { left, top } = this.computeOffset(popup, content, this.placement)
|
||||
this.vnode.left = left
|
||||
this.vnode.top = top
|
||||
},
|
||||
beforeDestory() {
|
||||
console.info('没有成功清除实例，看vue panel')
|
||||
console.info('没有成功清除实例 ，看vue panel')
|
||||
this.vnode.$destroy();
|
||||
},
|
||||
components: {
|
||||
'ant-transition': AntTransition
|
||||
this.domNode && this.domNode.remove()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,40 +1,39 @@
|
||||
function getScroll(w, top) {
|
||||
let ret = top ? w.pageYOffset : w.pageXOffset;
|
||||
const method = top ? 'scrollTop' : 'scrollLeft';
|
||||
function getScroll (w, top) {
|
||||
let ret = top ? w.pageYOffset : w.pageXOffset
|
||||
const method = top ? 'scrollTop' : 'scrollLeft'
|
||||
if (typeof ret !== 'number') {
|
||||
const d = w.document;
|
||||
const d = w.document
|
||||
// ie6,7,8 standard mode
|
||||
ret = d.documentElement[method];
|
||||
ret = d.documentElement[method]
|
||||
if (typeof ret !== 'number') {
|
||||
// quirks mode
|
||||
ret = d.body[method];
|
||||
ret = d.body[method]
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
return ret
|
||||
}
|
||||
|
||||
function getClientPosition(elem) {
|
||||
let box;
|
||||
let x;
|
||||
let y;
|
||||
const doc = elem.ownerDocument;
|
||||
const body = doc.body;
|
||||
const docElem = doc && doc.documentElement;
|
||||
box = elem.getBoundingClientRect();
|
||||
x = box.left;
|
||||
y = box.top;
|
||||
x -= docElem.clientLeft || body.clientLeft || 0;
|
||||
y -= docElem.clientTop || body.clientTop || 0;
|
||||
function getClientPosition (elem) {
|
||||
let x
|
||||
let y
|
||||
const doc = elem.ownerDocument
|
||||
const body = doc.body
|
||||
const docElem = doc && doc.documentElement
|
||||
const box = elem.getBoundingClientRect()
|
||||
x = box.left
|
||||
y = box.top
|
||||
x -= docElem.clientLeft || body.clientLeft || 0
|
||||
y -= docElem.clientTop || body.clientTop || 0
|
||||
return {
|
||||
left: x,
|
||||
top: y,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export const getOffsetLeft = (el) => {
|
||||
const pos = getClientPosition(el);
|
||||
const doc = el.ownerDocument;
|
||||
const w = doc.defaultView || doc.parentWindow;
|
||||
pos.left += getScroll(w);
|
||||
return pos.left;
|
||||
const pos = getClientPosition(el)
|
||||
const doc = el.ownerDocument
|
||||
const w = doc.defaultView || doc.parentWindow
|
||||
pos.left += getScroll(w)
|
||||
return pos.left
|
||||
}
|
||||
|
||||
@ -1,9 +1,11 @@
|
||||
<template>
|
||||
<tool-tip
|
||||
placement="top"
|
||||
title="nihaoaaaaaaaaaaaaaaaaaaaaa">
|
||||
<h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
|
||||
</tool-tip>
|
||||
<div>
|
||||
<tool-tip
|
||||
placement="top"
|
||||
:title="showText">
|
||||
<h1 @click="boom" style="display: inline-block">This is just a test, put your cursor here</h1>
|
||||
</tool-tip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -11,11 +13,14 @@
|
||||
export default {
|
||||
name: '',
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
show: true,
|
||||
showText: '你好啊，23'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
boom() {
|
||||
console.info(23333)
|
||||
this.showText += '3'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
@ -23,7 +28,3 @@
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@ -1,32 +0,0 @@
|
||||
<template>
|
||||
<transition
|
||||
:name="name"
|
||||
:enter-to-class="enterTo"
|
||||
:enter-active-class="enterActive"
|
||||
:leave-to-class="leaveTo"
|
||||
>
|
||||
<slot></slot>
|
||||
</transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ant-transition',
|
||||
props: {
|
||||
name: {
|
||||
required: true,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
enterTo() {
|
||||
return this.name + '-enter'
|
||||
},
|
||||
enterActive() {
|
||||
return `${this.name}-enter ${this.name}-enter-active`
|
||||
},
|
||||
leaveTo() {
|
||||
return this.name + '-leave'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user