fix
tangjinzhou
commit
c038b9daa7
|
|
@ -9,3 +9,5 @@ export { default as Radio } from './radio'
|
||||||
export { default as Grid } from './grid'
|
export { default as Grid } from './grid'
|
||||||
|
|
||||||
export { default as Rate } from './rate'
|
export { default as Rate } from './rate'
|
||||||
|
|
||||||
|
export { default as ToolTip } from './tooltip'
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import '../../style/index.less'
|
||||||
|
import './index.less'
|
||||||
|
|
@ -0,0 +1,333 @@
|
||||||
|
@import "../../style/themes/default";
|
||||||
|
@import "../../style/mixins/index";
|
||||||
|
@import "../../input/style/mixin";
|
||||||
|
|
||||||
|
@pagination-prefix-cls: ~"@{ant-prefix}-pagination";
|
||||||
|
|
||||||
|
.@{pagination-prefix-cls} {
|
||||||
|
font-size: @font-size-base;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
clear: both;
|
||||||
|
overflow: hidden;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-total-text {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-item {
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
user-select: none;
|
||||||
|
min-width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
border: @border-width-base @border-style-base @border-color-base;
|
||||||
|
background-color: @component-background;
|
||||||
|
margin-right: 8px;
|
||||||
|
font-family: Arial;
|
||||||
|
outline: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: @text-color;
|
||||||
|
transition: none;
|
||||||
|
margin: 0 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
transition: all .3s;
|
||||||
|
border-color: @primary-color;
|
||||||
|
a {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-active {
|
||||||
|
background-color: @primary-color;
|
||||||
|
border-color: @primary-color;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: @primary-5;
|
||||||
|
border-color: @primary-5;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
&:focus a,
|
||||||
|
&:hover a {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-jump-prev,
|
||||||
|
&-jump-next {
|
||||||
|
outline: 0;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
content: "•••";
|
||||||
|
display: block;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
color: @disabled-color;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
color: @primary-color;
|
||||||
|
.iconfont-size-under-12px(8px);
|
||||||
|
letter-spacing: -1px;
|
||||||
|
font-family: "anticon";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-jump-prev {
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
content: "\e620\e620";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-jump-next {
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
&:after {
|
||||||
|
content: "\e61f\e61f";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-prev,
|
||||||
|
&-jump-prev,
|
||||||
|
&-jump-next {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
&-prev,
|
||||||
|
&-next,
|
||||||
|
&-jump-prev,
|
||||||
|
&-jump-next {
|
||||||
|
font-family: Arial;
|
||||||
|
cursor: pointer;
|
||||||
|
color: @text-color;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
list-style: none;
|
||||||
|
min-width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
text-align: center;
|
||||||
|
transition: all .3s;
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-prev,
|
||||||
|
&-next {
|
||||||
|
outline: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: @text-color;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover a {
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{pagination-prefix-cls}-item-link {
|
||||||
|
border: @border-width-base @border-style-base @border-color-base;
|
||||||
|
background-color: @component-background;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
outline: none;
|
||||||
|
display: block;
|
||||||
|
transition: all .3s;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
.iconfont-size-under-12px(8px);
|
||||||
|
display: block;
|
||||||
|
height: 26px;
|
||||||
|
line-height: 26px;
|
||||||
|
font-family: "anticon";
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus .@{pagination-prefix-cls}-item-link,
|
||||||
|
&:hover .@{pagination-prefix-cls}-item-link {
|
||||||
|
border-color: @primary-color;
|
||||||
|
color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-prev {
|
||||||
|
.@{pagination-prefix-cls}-item-link:after {
|
||||||
|
content: "\e620";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-next {
|
||||||
|
.@{pagination-prefix-cls}-item-link:after {
|
||||||
|
content: "\e61f";
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-disabled {
|
||||||
|
&,
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
cursor: not-allowed;
|
||||||
|
a,
|
||||||
|
.@{pagination-prefix-cls}-item-link {
|
||||||
|
border-color: @border-color-base;
|
||||||
|
color: @disabled-color;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-slash {
|
||||||
|
margin: 0 10px 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-options {
|
||||||
|
display: inline-block;
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
&-size-changer {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-quick-jumper {
|
||||||
|
display: inline-block;
|
||||||
|
height: @input-height-base;
|
||||||
|
line-height: @input-height-base;
|
||||||
|
|
||||||
|
input {
|
||||||
|
.input;
|
||||||
|
margin: 0 8px;
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-simple &-prev,
|
||||||
|
&-simple &-next {
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
vertical-align: top;
|
||||||
|
.@{pagination-prefix-cls}-item-link {
|
||||||
|
border: 0;
|
||||||
|
height: 24px;
|
||||||
|
&:after {
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-simple &-simple-pager {
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 8px;
|
||||||
|
height: 24px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
margin-right: 8px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: @component-background;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
border: @border-width-base @border-style-base @border-color-base;
|
||||||
|
outline: none;
|
||||||
|
padding: 0 6px;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
transition: border-color .3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: @primary-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{pagination-prefix-cls} {
|
||||||
|
&.mini &-total-text,
|
||||||
|
&.mini &-simple-pager {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mini &-item {
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
min-width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mini &-prev,
|
||||||
|
&.mini &-next {
|
||||||
|
margin: 0;
|
||||||
|
min-width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mini &-prev &-item-link,
|
||||||
|
&.mini &-next &-item-link {
|
||||||
|
border: 0;
|
||||||
|
&:after {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mini &-jump-prev,
|
||||||
|
&.mini &-jump-next {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.mini &-options {
|
||||||
|
margin-left: 8px;
|
||||||
|
&-quick-jumper {
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
|
||||||
|
input {
|
||||||
|
.input-sm;
|
||||||
|
width: 44px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (max-width: 1024px) {
|
||||||
|
.@{pagination-prefix-cls}-item {
|
||||||
|
&-after-jump-prev,
|
||||||
|
&-before-jump-next {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import ToolTip from './tooltip.vue'
|
||||||
|
export default ToolTip
|
||||||
|
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
import '../../style/index.less'
|
||||||
|
import './index.less'
|
||||||
|
|
@ -0,0 +1,207 @@
|
||||||
|
@import "../../style/themes/default";
|
||||||
|
@import "../../style/mixins/index";
|
||||||
|
|
||||||
|
@tooltip-prefix-cls: ~"@{ant-prefix}-tooltip";
|
||||||
|
|
||||||
|
// Base class
|
||||||
|
.@{tooltip-prefix-cls} {
|
||||||
|
position: absolute;
|
||||||
|
z-index: @zindex-tooltip;
|
||||||
|
display: block;
|
||||||
|
visibility: visible;
|
||||||
|
font-size: @font-size-base;
|
||||||
|
line-height: @line-height-base;
|
||||||
|
|
||||||
|
&-hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-top,
|
||||||
|
&-placement-topLeft,
|
||||||
|
&-placement-topRight {
|
||||||
|
padding-bottom: @tooltip-distance;
|
||||||
|
}
|
||||||
|
&-placement-right,
|
||||||
|
&-placement-rightTop,
|
||||||
|
&-placement-rightBottom {
|
||||||
|
padding-left: @tooltip-distance;
|
||||||
|
}
|
||||||
|
&-placement-bottom,
|
||||||
|
&-placement-bottomLeft,
|
||||||
|
&-placement-bottomRight {
|
||||||
|
padding-top: @tooltip-distance;
|
||||||
|
}
|
||||||
|
&-placement-left,
|
||||||
|
&-placement-leftTop,
|
||||||
|
&-placement-leftBottom {
|
||||||
|
padding-right: @tooltip-distance;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Wrapper for the tooltip content
|
||||||
|
.@{tooltip-prefix-cls}-inner {
|
||||||
|
max-width: @tooltip-max-width;
|
||||||
|
padding: 8px 10px;
|
||||||
|
color: @tooltip-color;
|
||||||
|
text-align: left;
|
||||||
|
text-decoration: none;
|
||||||
|
background-color: @tooltip-bg;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
box-shadow: @box-shadow-base;
|
||||||
|
min-height: 34px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Arrows
|
||||||
|
.@{tooltip-prefix-cls}-arrow {
|
||||||
|
position: absolute;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-color: transparent;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.@{tooltip-prefix-cls} {
|
||||||
|
&-placement-top &-arrow,
|
||||||
|
&-placement-topLeft &-arrow,
|
||||||
|
&-placement-topRight &-arrow {
|
||||||
|
bottom: @tooltip-distance - @tooltip-arrow-width;
|
||||||
|
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||||
|
border-top-color: @tooltip-arrow-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-top &-arrow {
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -@tooltip-arrow-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-topLeft &-arrow {
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-topRight &-arrow {
|
||||||
|
right: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-right &-arrow,
|
||||||
|
&-placement-rightTop &-arrow,
|
||||||
|
&-placement-rightBottom &-arrow {
|
||||||
|
left: @tooltip-distance - @tooltip-arrow-width;
|
||||||
|
border-width: @tooltip-arrow-width @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||||
|
border-right-color: @tooltip-arrow-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-right &-arrow {
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -@tooltip-arrow-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-rightTop &-arrow {
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-rightBottom &-arrow {
|
||||||
|
bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-left &-arrow,
|
||||||
|
&-placement-leftTop &-arrow,
|
||||||
|
&-placement-leftBottom &-arrow {
|
||||||
|
right: @tooltip-distance - @tooltip-arrow-width;
|
||||||
|
border-width: @tooltip-arrow-width 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||||
|
border-left-color: @tooltip-arrow-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-left &-arrow {
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -@tooltip-arrow-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-leftTop &-arrow {
|
||||||
|
top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-leftBottom &-arrow {
|
||||||
|
bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-bottom &-arrow,
|
||||||
|
&-placement-bottomLeft &-arrow,
|
||||||
|
&-placement-bottomRight &-arrow {
|
||||||
|
top: @tooltip-distance - @tooltip-arrow-width;
|
||||||
|
border-width: 0 @tooltip-arrow-width @tooltip-arrow-width;
|
||||||
|
border-bottom-color: @tooltip-arrow-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-bottom &-arrow {
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -@tooltip-arrow-width;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-bottomLeft &-arrow {
|
||||||
|
left: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-placement-bottomRight &-arrow {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,179 @@
|
||||||
|
<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],
|
||||||
|
prefixCls: {
|
||||||
|
default: 'ant-tooltip',
|
||||||
|
},
|
||||||
|
placement: {
|
||||||
|
default: 'top',
|
||||||
|
validator: val => ['top', 'left', 'right', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight', 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'].includes(val)
|
||||||
|
},
|
||||||
|
transitionName: {
|
||||||
|
default: 'zoom-big-fast',
|
||||||
|
},
|
||||||
|
mouseEnterDelay: {
|
||||||
|
default: 0.1,
|
||||||
|
},
|
||||||
|
mouseLeaveDelay: {
|
||||||
|
default: 0.1,
|
||||||
|
},
|
||||||
|
arrowPointAtCenter: {
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
autoAdjustOverflow: {
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
vnode: null,
|
||||||
|
visible: false,
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
classes () {
|
||||||
|
const { prefixCls } = this
|
||||||
|
return {
|
||||||
|
[`${prefixCls}`]: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
const div = document.createElement('div')
|
||||||
|
document.body.appendChild(div)
|
||||||
|
const that = this
|
||||||
|
const vnode = new Vue({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
left: 0,
|
||||||
|
top: 0,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render(h) {
|
||||||
|
return (
|
||||||
|
<ant-transition name="fade">
|
||||||
|
<div
|
||||||
|
v-show={that.visible}
|
||||||
|
class={`ant-tooltip ant-tooltip-placement-${that.placement} ${that.visible ? '' : 'ant-tooltip-hidden'}`}
|
||||||
|
style={{ left: this.left + 'px', top: this.top + 'px' }}
|
||||||
|
>
|
||||||
|
<div class="ant-tooltip-content">
|
||||||
|
<div class="ant-tooltip-arrow"/>
|
||||||
|
<div class="ant-tooltip-inner">
|
||||||
|
<span>{that.title}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</ant-transition>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}).$mount(div)
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.vnode = vnode
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onPopupAlign: (placement, domNode, target, align) => {
|
||||||
|
if (!placement) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// 根据当前坐标设置动画点
|
||||||
|
const rect = domNode.getBoundingClientRect()
|
||||||
|
const transformOrigin = {
|
||||||
|
top: '50%',
|
||||||
|
left: '50%',
|
||||||
|
};
|
||||||
|
if (placement.indexOf('top') >= 0 || placement.indexOf('Bottom') >= 0) {
|
||||||
|
transformOrigin.top = `${rect.height - align.offset[1]}px`;
|
||||||
|
} else if (placement.indexOf('Top') >= 0 || placement.indexOf('bottom') >= 0) {
|
||||||
|
transformOrigin.top = `${-align.offset[1]}px`;
|
||||||
|
}
|
||||||
|
if (placement.indexOf('left') >= 0 || placement.indexOf('Right') >= 0) {
|
||||||
|
transformOrigin.left = `${rect.width - align.offset[0]}px`;
|
||||||
|
} else if (placement.indexOf('right') >= 0 || placement.indexOf('Left') >= 0) {
|
||||||
|
transformOrigin.left = `${-align.offset[0]}px`;
|
||||||
|
}
|
||||||
|
target.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`;
|
||||||
|
},
|
||||||
|
addEventHandle(old, fn) {
|
||||||
|
if (!old) {
|
||||||
|
return fn
|
||||||
|
} else if (Array.isArray(old)) {
|
||||||
|
return old.indexOf(fn) > -1 ? old : old.concat(fn)
|
||||||
|
} else {
|
||||||
|
return old === fn ? old : [old, fn]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computeOffset(popup, text, placement) {
|
||||||
|
let { width, height, top, left } = text
|
||||||
|
// you cant change the properties of DOMRect
|
||||||
|
top += window.scrollY
|
||||||
|
left += window.scrollX
|
||||||
|
const ret = { left, top }
|
||||||
|
|
||||||
|
if (/top/.test(placement)) ret.top -= popup.height
|
||||||
|
if (/bottom/.test(placement)) ret.top += height
|
||||||
|
if (/left/.test(placement)) ret.left -= popup.width
|
||||||
|
if (/right/.test(placement)) ret.left += width
|
||||||
|
|
||||||
|
if (/Left/.test(placement)) {
|
||||||
|
} else if(/Right/.test(placement)) {
|
||||||
|
ret.left += (width - popup.width)
|
||||||
|
} else if(/(top)|(bottom)/.test(placement)) {
|
||||||
|
ret.left += (width - popup.width) / 2
|
||||||
|
}
|
||||||
|
if (/Top/.test(placement)) {
|
||||||
|
} else if(/Bottom/.test(placement)) {
|
||||||
|
ret.top += (height - popup.height)
|
||||||
|
} else if(/(left)|(right)/.test(placement)) {
|
||||||
|
ret.top += (height - popup.height) / 2
|
||||||
|
}
|
||||||
|
return ret
|
||||||
|
},
|
||||||
|
showNode() {
|
||||||
|
this.visible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
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
|
||||||
|
})
|
||||||
|
this.onPopupAlign(this.placement, this.$el, this.vnode.$el, { offset: [0,0] })
|
||||||
|
},
|
||||||
|
hideNode() {
|
||||||
|
this.visible = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render(h) {
|
||||||
|
let node = this.vnode
|
||||||
|
const inner = this.$slots.default[0]
|
||||||
|
inner.data = inner.data || {}
|
||||||
|
inner.data.on = inner.data.on || {}
|
||||||
|
inner.data.on.mouseenter = this.addEventHandle(inner.data.on.mouseenter, this.showNode)
|
||||||
|
inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.hideNode)
|
||||||
|
// console.info(inner)
|
||||||
|
return this.$slots.default[0]
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
beforeDestory() {
|
||||||
|
console.info('没有成功清除实例，看vue panel')
|
||||||
|
this.vnode.$destroy();
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
'ant-transition': AntTransition
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,6 +1,5 @@
|
||||||
import './index.less'
|
import './index.less'
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import VueMarkdown from 'vue-markdown'
|
|
||||||
import VueRouter from 'vue-router'
|
import VueRouter from 'vue-router'
|
||||||
import routes from './routes'
|
import routes from './routes'
|
||||||
Vue.use(VueRouter)
|
Vue.use(VueRouter)
|
||||||
|
|
@ -9,7 +8,6 @@ const router = new VueRouter({
|
||||||
mode: 'history',
|
mode: 'history',
|
||||||
routes,
|
routes,
|
||||||
})
|
})
|
||||||
Vue.component('vue-markdown', VueMarkdown)
|
|
||||||
new Vue({
|
new Vue({
|
||||||
el: '#app',
|
el: '#app',
|
||||||
router,
|
router,
|
||||||
|
|
|
||||||
|
|
@ -27,7 +27,7 @@
|
||||||
<span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
|
<span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
|
||||||
</br>
|
</br>
|
||||||
自定义
|
自定义
|
||||||
<Rate :value="initValue" :character="character"></Rate>
|
<Rate :value="initValue" :allowHalf="allowHalf" :character="character"></Rate>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,29 @@
|
||||||
|
<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>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { ToolTip } from '../components'
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
boom() {
|
||||||
|
console.info(23333)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
ToolTip
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<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