mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-30 02:57:50 +08:00
fix
This commit is contained in:
tangjinzhou
commit
c78a5977b3
@ -9,3 +9,5 @@ export { default as Radio } from './radio'
|
||||
export { default as Grid } from './grid'
|
||||
|
||||
export { default as Rate } from './rate'
|
||||
|
||||
export { default as ToolTip } from './tooltip'
|
||||
|
||||
0
components/pagination/index.js
Normal file
0
components/pagination/index.js
Normal file
0
components/pagination/pagination.vue
Normal file
0
components/pagination/pagination.vue
Normal file
2
components/pagination/style/index.js
Normal file
2
components/pagination/style/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
333
components/pagination/style/index.less
Normal file
333
components/pagination/style/index.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
components/tooltip/index.js
Normal file
3
components/tooltip/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import ToolTip from './tooltip.vue'
|
||||
export default ToolTip
|
||||
|
||||
2
components/tooltip/style/index.js
Normal file
2
components/tooltip/style/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import '../../style/index.less'
|
||||
import './index.less'
|
||||
207
components/tooltip/style/index.less
Normal file
207
components/tooltip/style/index.less
Normal file
@ -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;
|
||||
}
|
||||
}
|
||||
179
components/tooltip/tooltip.vue
Normal file
179
components/tooltip/tooltip.vue
Normal file
@ -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 Vue from 'vue'
|
||||
import VueMarkdown from 'vue-markdown'
|
||||
import VueRouter from 'vue-router'
|
||||
import routes from './routes'
|
||||
Vue.use(VueRouter)
|
||||
@ -9,7 +8,6 @@ const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes,
|
||||
})
|
||||
Vue.component('vue-markdown', VueMarkdown)
|
||||
new Vue({
|
||||
el: '#app',
|
||||
router,
|
||||
|
||||
@ -27,7 +27,7 @@
|
||||
<span v-if="hoverValueAH">{{hoverValueAH}}stars</span>
|
||||
</br>
|
||||
自定义
|
||||
<Rate :value="initValue" :character="character"></Rate>
|
||||
<Rate :value="initValue" :allowHalf="allowHalf" :character="character"></Rate>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
29
examples/tooltip.vue
Normal file
29
examples/tooltip.vue
Normal file
@ -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>
|
||||
32
utils/ant-transition.vue
Normal file
32
utils/ant-transition.vue
Normal file
@ -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
Block a user