mirror of
https://gitee.com/ant-design-vue/ant-design-vue.git
synced 2024-11-30 02:57:50 +08:00
add toolTip
This commit is contained in:
tangjinzhou
parent
2c164770b6
commit
9a8eb4d277
@ -93,3 +93,15 @@ export function cloneElement (n, nodeProps, clone) {
|
||||
export function getComponentName (opts) {
|
||||
return opts && (opts.Ctor.options.name || opts.tag)
|
||||
}
|
||||
|
||||
export function isValidElement (ele) {
|
||||
return !!ele.tag
|
||||
}
|
||||
|
||||
export function getClass (ele) {
|
||||
return ele.data && (ele.data.class || ele.data.staticClass)
|
||||
}
|
||||
|
||||
export function getStyle (ele) {
|
||||
return ele.data && (ele.data.style || ele.data.staticStyle)
|
||||
}
|
||||
|
||||
@ -4,6 +4,7 @@ const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/
|
||||
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
|
||||
export default {
|
||||
name: 'Button',
|
||||
__ANT_BUTTON: true,
|
||||
components: { Icon },
|
||||
props: {
|
||||
prefixCls: {
|
||||
|
||||
@ -10,7 +10,7 @@ export { default as Grid } from './grid'
|
||||
|
||||
export { default as Rate } from './rate'
|
||||
|
||||
export { default as ToolTip } from './tooltip'
|
||||
export { default as Tooltip } from './tooltip'
|
||||
|
||||
export { default as Pagination } from './pagination'
|
||||
|
||||
|
||||
@ -10,5 +10,6 @@ import './avatar/style'
|
||||
import './badge/style'
|
||||
import './tabs/style'
|
||||
import './input/style'
|
||||
import './tooltip/style'
|
||||
|
||||
import './menu/style'
|
||||
|
||||
24
components/tooltip/demo/arrow-point-at-center.vue
Normal file
24
components/tooltip/demo/arrow-point-at-center.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<md>
|
||||
## 箭头指向
|
||||
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
|
||||
</md>
|
||||
<Tooltip placement="topLeft" title="Prompt Text">
|
||||
<AntButton>Align edge / 边缘对齐</AntButton>
|
||||
</Tooltip>
|
||||
<Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
|
||||
<AntButton>Arrow points to center / 箭头指向中心</AntButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tooltip, Button } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Tooltip,
|
||||
AntButton: Button,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
43
components/tooltip/demo/auto-adjust-overflow.vue
Normal file
43
components/tooltip/demo/auto-adjust-overflow.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<div>
|
||||
<md>
|
||||
## 自动调整位置
|
||||
气泡框不可见时自动调整位置。
|
||||
</md>
|
||||
<div :style="wrapStyles">
|
||||
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer">
|
||||
<AntButton>Adjust automatically / 自动调整</AntButton>
|
||||
</Tooltip>
|
||||
<br />
|
||||
<Tooltip placement="left" title="Prompt Text" :getPopupContainer="getPopupContainer" :autoAdjustOverflow="false">
|
||||
<AntButton>Ingore / 不处理</AntButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tooltip, Button } from 'antd'
|
||||
const wrapStyles = {
|
||||
overflow: 'hidden',
|
||||
position: 'relative',
|
||||
padding: '24px',
|
||||
border: '1px solid #e9e9e9',
|
||||
}
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
wrapStyles,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getPopupContainer (trigger) {
|
||||
return trigger.parentElement
|
||||
},
|
||||
},
|
||||
components: {
|
||||
Tooltip,
|
||||
AntButton: Button,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
23
components/tooltip/demo/basic.vue
Normal file
23
components/tooltip/demo/basic.vue
Normal file
@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
<md>
|
||||
## 基本
|
||||
最简单的用法。
|
||||
</md>
|
||||
<Tooltip>
|
||||
<template slot='title'>
|
||||
prompt text
|
||||
</template>
|
||||
Tooltip will show when mouse enter.
|
||||
</Tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tooltip } from 'antd'
|
||||
export default {
|
||||
components: {
|
||||
Tooltip,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,97 +1,26 @@
|
||||
<template>
|
||||
<div>
|
||||
<tool-tip
|
||||
placement="top"
|
||||
:title="showText"
|
||||
:autoAdjustOverflow="autoAdjustOverflow"
|
||||
>
|
||||
<h1 @click="boom" class="test">撞到边缘翻转位置 & 点击更新</h1>
|
||||
</tool-tip>
|
||||
<ant-button @click="reverse" type="primary">{{autoAdjustOverflow ? '启用' : '关闭'}}自动调整中</ant-button>
|
||||
<div class="box">
|
||||
<h2>切换arrowPointAtCenter模式</h2>
|
||||
<ant-button @click="change">{{arrowPointAtCenter}}</ant-button>
|
||||
<table>
|
||||
<tr v-for="(tr, index) in table" :key="index">
|
||||
<td v-for="(td, i) in tr" :key="i">
|
||||
<tool-tip
|
||||
v-if="td"
|
||||
:placement="td"
|
||||
:title="td"
|
||||
:arrowPointAtCenter="arrowPointAtCenter"
|
||||
>
|
||||
<AntButton type="primary">{{td}}</AntButton>
|
||||
</tool-tip>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<p>
|
||||
<tool-tip :arrowPointAtCenter="true" title="Consider using the NamedModulesPlugin for module names." placement="topLeft">
|
||||
<ant-button>arrowPointAtCenter arrowPointAtCenter arrowPointAtCenter</ant-button>
|
||||
</tool-tip>
|
||||
</p>
|
||||
</div>
|
||||
<h1>Basic</h1>
|
||||
<Basic />
|
||||
<h1>ArrowCenter</h1>
|
||||
<ArrowCenter />
|
||||
<h1>AutoAdjust</h1>
|
||||
<AutoAdjust />
|
||||
<h1>Placement</h1>
|
||||
<Placement />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ToolTip, Button } from 'antd'
|
||||
import 'antd/button/style'
|
||||
export default {
|
||||
name: 'tooltip-basic',
|
||||
data() {
|
||||
return {
|
||||
show: true,
|
||||
showText: '你好啊，233',
|
||||
table: [
|
||||
['', 'topLeft', 'top', 'topRight', ''],
|
||||
['leftTop', '', '', '', 'rightTop'],
|
||||
['left', '', '', '', 'right'],
|
||||
['leftBottom', '', '', '', 'rightBottom'],
|
||||
['', 'bottomLeft', 'bottom', 'bottomRight', ''],
|
||||
],
|
||||
arrowPointAtCenter: false,
|
||||
autoAdjustOverflow: true,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
boom() {
|
||||
if (this.showText.length % 20) {
|
||||
this.showText += '3'
|
||||
} else {
|
||||
this.showText += ' '
|
||||
}
|
||||
},
|
||||
change() {
|
||||
this.arrowPointAtCenter = !this.arrowPointAtCenter
|
||||
},
|
||||
reverse() {
|
||||
this.autoAdjustOverflow = !this.autoAdjustOverflow
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ToolTip,
|
||||
AntButton: Button,
|
||||
}
|
||||
}
|
||||
import Basic from './basic'
|
||||
import ArrowCenter from './arrow-point-at-center'
|
||||
import AutoAdjust from './auto-adjust-overflow'
|
||||
import Placement from './placement'
|
||||
export default {
|
||||
components: {
|
||||
Basic,
|
||||
ArrowCenter,
|
||||
AutoAdjust,
|
||||
Placement,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.test {
|
||||
margin: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
.box {
|
||||
margin: 100px;
|
||||
}
|
||||
table {
|
||||
td {
|
||||
padding: 20px;
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
112
components/tooltip/demo/placement.vue
Normal file
112
components/tooltip/demo/placement.vue
Normal file
@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<div id="components-tooltip-demo-placement">
|
||||
<md>
|
||||
## 位置
|
||||
位置有 12 个方向。
|
||||
</md>
|
||||
<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
|
||||
<Tooltip placement="topLeft">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>TL</AntButton>
|
||||
</Tooltip>
|
||||
<Tooltip placement="top">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>Top</AntButton>
|
||||
</Tooltip>
|
||||
<Tooltip placement="topRight">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>TR</AntButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
|
||||
<Tooltip placement="leftTop">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>LT</AntButton>
|
||||
</Tooltip>
|
||||
<Tooltip placement="left">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>Left</AntButton>
|
||||
</Tooltip>
|
||||
<Tooltip placement="leftBottom">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>LB</AntButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
|
||||
<Tooltip placement="rightTop">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>RT</AntButton>
|
||||
</Tooltip>
|
||||
<Tooltip placement="right">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>Right</AntButton>
|
||||
</Tooltip>
|
||||
<Tooltip placement="rightBottom">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>RB</AntButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
|
||||
<Tooltip placement="bottomLeft">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>BL</AntButton>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottom">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>Bottom</AntButton>
|
||||
</Tooltip>
|
||||
<Tooltip placement="bottomRight">
|
||||
<template slot="title">
|
||||
<span>prompt text</span>
|
||||
</template>
|
||||
<AntButton>BR</AntButton>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Tooltip, Button } from 'antd'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
buttonWidth: 70,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Tooltip,
|
||||
AntButton: Button,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#components-tooltip-demo-placement .ant-btn {
|
||||
width: 70px;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin-right: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
</style>
|
||||
@ -1,4 +1,3 @@
|
||||
import ToolTip from './tooltip.vue'
|
||||
import './style'
|
||||
export default ToolTip
|
||||
|
||||
|
||||
88
components/tooltip/placements.js
Normal file
88
components/tooltip/placements.js
Normal file
@ -0,0 +1,88 @@
|
||||
import { placements as rcPlacements } from './src/placements'
|
||||
|
||||
const autoAdjustOverflowEnabled = {
|
||||
adjustX: 1,
|
||||
adjustY: 1,
|
||||
}
|
||||
|
||||
const autoAdjustOverflowDisabled = {
|
||||
adjustX: 0,
|
||||
adjustY: 0,
|
||||
}
|
||||
|
||||
const targetOffset = [0, 0]
|
||||
|
||||
export function getOverflowOptions (autoAdjustOverflow) {
|
||||
if (typeof autoAdjustOverflow === 'boolean') {
|
||||
return autoAdjustOverflow ? autoAdjustOverflowEnabled : autoAdjustOverflowDisabled
|
||||
}
|
||||
return {
|
||||
...autoAdjustOverflowDisabled,
|
||||
...autoAdjustOverflow,
|
||||
}
|
||||
}
|
||||
|
||||
export default function getPlacements (config) {
|
||||
const { arrowWidth = 5, horizontalArrowShift = 16, verticalArrowShift = 12, autoAdjustOverflow = true } = config
|
||||
const placementMap = {
|
||||
left: {
|
||||
points: ['cr', 'cl'],
|
||||
offset: [-4, 0],
|
||||
},
|
||||
right: {
|
||||
points: ['cl', 'cr'],
|
||||
offset: [4, 0],
|
||||
},
|
||||
top: {
|
||||
points: ['bc', 'tc'],
|
||||
offset: [0, -4],
|
||||
},
|
||||
bottom: {
|
||||
points: ['tc', 'bc'],
|
||||
offset: [0, 4],
|
||||
},
|
||||
topLeft: {
|
||||
points: ['bl', 'tc'],
|
||||
offset: [-(horizontalArrowShift + arrowWidth), -4],
|
||||
},
|
||||
leftTop: {
|
||||
points: ['tr', 'cl'],
|
||||
offset: [-4, -(verticalArrowShift + arrowWidth)],
|
||||
},
|
||||
topRight: {
|
||||
points: ['br', 'tc'],
|
||||
offset: [horizontalArrowShift + arrowWidth, -4],
|
||||
},
|
||||
rightTop: {
|
||||
points: ['tl', 'cr'],
|
||||
offset: [4, -(verticalArrowShift + arrowWidth)],
|
||||
},
|
||||
bottomRight: {
|
||||
points: ['tr', 'bc'],
|
||||
offset: [horizontalArrowShift + arrowWidth, 4],
|
||||
},
|
||||
rightBottom: {
|
||||
points: ['bl', 'cr'],
|
||||
offset: [4, verticalArrowShift + arrowWidth],
|
||||
},
|
||||
bottomLeft: {
|
||||
points: ['tl', 'bc'],
|
||||
offset: [-(horizontalArrowShift + arrowWidth), 4],
|
||||
},
|
||||
leftBottom: {
|
||||
points: ['br', 'cl'],
|
||||
offset: [-4, verticalArrowShift + arrowWidth],
|
||||
},
|
||||
}
|
||||
Object.keys(placementMap).forEach(key => {
|
||||
placementMap[key] = config.arrowPointAtCenter ? {
|
||||
...placementMap[key],
|
||||
overflow: getOverflowOptions(autoAdjustOverflow),
|
||||
targetOffset,
|
||||
} : {
|
||||
...rcPlacements[key],
|
||||
overflow: getOverflowOptions(autoAdjustOverflow),
|
||||
}
|
||||
})
|
||||
return placementMap
|
||||
}
|
||||
108
components/tooltip/src/Tooltip.vue
Normal file
108
components/tooltip/src/Tooltip.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<script>
|
||||
import PropTypes from '../../_util/vue-types'
|
||||
import Trigger from '../../trigger'
|
||||
import { placements } from './placements'
|
||||
import hasProp from '../../_util/hasProp'
|
||||
export default {
|
||||
props: {
|
||||
trigger: PropTypes.any.def(['hover']),
|
||||
defaultVisible: PropTypes.bool,
|
||||
visible: PropTypes.bool,
|
||||
placement: PropTypes.string.def('right'),
|
||||
transitionName: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.object,
|
||||
]),
|
||||
animation: PropTypes.any,
|
||||
// onVisibleChange: PropTypes.func,
|
||||
afterVisibleChange: PropTypes.func.def(() => {}),
|
||||
overlay: PropTypes.any,
|
||||
overlayStyle: PropTypes.object,
|
||||
overlayClassName: PropTypes.string,
|
||||
prefixCls: PropTypes.string.def('rc-tooltip'),
|
||||
mouseEnterDelay: PropTypes.number.def(0),
|
||||
mouseLeaveDelay: PropTypes.number.def(0.1),
|
||||
getTooltipContainer: PropTypes.func,
|
||||
destroyTooltipOnHide: PropTypes.bool.def(false),
|
||||
align: PropTypes.object.def({}),
|
||||
arrowContent: PropTypes.any.def(null),
|
||||
tipId: PropTypes.string,
|
||||
builtinPlacements: PropTypes.object,
|
||||
},
|
||||
methods: {
|
||||
getPopupElement (h) {
|
||||
const { arrowContent, overlay, prefixCls, tipId } = this.$props
|
||||
return ([
|
||||
<div class={`${prefixCls}-arrow`} key='arrow'>
|
||||
{this.$slots.arrowContent}
|
||||
{typeof arrowContent === 'function' ? arrowContent(h) : arrowContent}
|
||||
</div>,
|
||||
<div class={`${prefixCls}-inner`} key='content' id={tipId}>
|
||||
{typeof overlay === 'function' ? overlay(h) : overlay}
|
||||
{this.$slots.overlay}
|
||||
</div>,
|
||||
])
|
||||
},
|
||||
|
||||
getPopupDomNode () {
|
||||
return this.$refs.trigger.getPopupDomNode()
|
||||
},
|
||||
onVisibleChange (val) {
|
||||
this.$emit('visibleChange', val)
|
||||
},
|
||||
onPopupAlign () {
|
||||
this.$emit('popupAlign', ...arguments)
|
||||
},
|
||||
},
|
||||
render (h) {
|
||||
const {
|
||||
overlayClassName, trigger,
|
||||
mouseEnterDelay, mouseLeaveDelay,
|
||||
overlayStyle, prefixCls,
|
||||
afterVisibleChange,
|
||||
transitionName, animation,
|
||||
placement, align,
|
||||
destroyTooltipOnHide,
|
||||
defaultVisible, getTooltipContainer,
|
||||
...restProps
|
||||
} = this.$props
|
||||
const extraProps = { ...restProps }
|
||||
if (hasProp(this, 'visible')) {
|
||||
extraProps.popupVisible = this.$props.visible
|
||||
}
|
||||
const triggerProps = {
|
||||
props: {
|
||||
popupClassName: overlayClassName,
|
||||
prefixCls: prefixCls,
|
||||
action: trigger,
|
||||
builtinPlacements: placements,
|
||||
popupPlacement: placement,
|
||||
popupAlign: align,
|
||||
getPopupContainer: getTooltipContainer,
|
||||
// onPopupVisibleChange: onVisibleChange,
|
||||
afterPopupVisibleChange: afterVisibleChange,
|
||||
popupTransitionName: transitionName,
|
||||
popupAnimation: animation,
|
||||
defaultPopupVisible: defaultVisible,
|
||||
destroyPopupOnHide: destroyTooltipOnHide,
|
||||
mouseLeaveDelay: mouseLeaveDelay,
|
||||
popupStyle: overlayStyle,
|
||||
mouseEnterDelay: mouseEnterDelay,
|
||||
...extraProps,
|
||||
},
|
||||
on: {
|
||||
popupVisibleChange: this.onVisibleChange,
|
||||
popupAlign: this.onPopupAlign,
|
||||
},
|
||||
ref: 'trigger',
|
||||
}
|
||||
return (<Trigger {...triggerProps}>
|
||||
<template slot='popup'>
|
||||
{this.getPopupElement(h)}
|
||||
</template>
|
||||
{this.$slots.default}
|
||||
</Trigger>)
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
3
components/tooltip/src/index.js
Normal file
3
components/tooltip/src/index.js
Normal file
@ -0,0 +1,3 @@
|
||||
import Tooltip from './Tooltip'
|
||||
|
||||
export default Tooltip
|
||||
83
components/tooltip/src/placements.js
Normal file
83
components/tooltip/src/placements.js
Normal file
@ -0,0 +1,83 @@
|
||||
const autoAdjustOverflow = {
|
||||
adjustX: 1,
|
||||
adjustY: 1,
|
||||
}
|
||||
|
||||
const targetOffset = [0, 0]
|
||||
|
||||
export const placements = {
|
||||
left: {
|
||||
points: ['cr', 'cl'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [-4, 0],
|
||||
targetOffset,
|
||||
},
|
||||
right: {
|
||||
points: ['cl', 'cr'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [4, 0],
|
||||
targetOffset,
|
||||
},
|
||||
top: {
|
||||
points: ['bc', 'tc'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [0, -4],
|
||||
targetOffset,
|
||||
},
|
||||
bottom: {
|
||||
points: ['tc', 'bc'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [0, 4],
|
||||
targetOffset,
|
||||
},
|
||||
topLeft: {
|
||||
points: ['bl', 'tl'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [0, -4],
|
||||
targetOffset,
|
||||
},
|
||||
leftTop: {
|
||||
points: ['tr', 'tl'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [-4, 0],
|
||||
targetOffset,
|
||||
},
|
||||
topRight: {
|
||||
points: ['br', 'tr'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [0, -4],
|
||||
targetOffset,
|
||||
},
|
||||
rightTop: {
|
||||
points: ['tl', 'tr'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [4, 0],
|
||||
targetOffset,
|
||||
},
|
||||
bottomRight: {
|
||||
points: ['tr', 'br'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [0, 4],
|
||||
targetOffset,
|
||||
},
|
||||
rightBottom: {
|
||||
points: ['bl', 'br'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [4, 0],
|
||||
targetOffset,
|
||||
},
|
||||
bottomLeft: {
|
||||
points: ['tl', 'bl'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [0, 4],
|
||||
targetOffset,
|
||||
},
|
||||
leftBottom: {
|
||||
points: ['br', 'bl'],
|
||||
overflow: autoAdjustOverflow,
|
||||
offset: [-4, 0],
|
||||
targetOffset,
|
||||
},
|
||||
}
|
||||
|
||||
export default placements
|
||||
@ -1,121 +1,137 @@
|
||||
<script>
|
||||
import Vue from 'vue'
|
||||
import { cloneElement, isValidElement, getClass, getStyle } from '../_util/vnode'
|
||||
import RcTooltip from './src/tooltip'
|
||||
import getPlacements from './placements'
|
||||
import PropTypes from '../_util/vue-types'
|
||||
import hasProp from '../_util/hasProp'
|
||||
|
||||
const splitObject = (obj, keys) => {
|
||||
const picked = {}
|
||||
const omited = { ...obj }
|
||||
keys.forEach(key => {
|
||||
if (obj && key in obj) {
|
||||
picked[key] = obj[key]
|
||||
delete omited[key]
|
||||
}
|
||||
})
|
||||
return { picked, omited }
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'ToolTip',
|
||||
name: 'Tooltip',
|
||||
props: {
|
||||
title: String,
|
||||
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,
|
||||
},
|
||||
trigger: PropTypes.oneOf(['hover', 'focus', 'click']).def(['hover']),
|
||||
visible: PropTypes.bool,
|
||||
title: PropTypes.any,
|
||||
placement: PropTypes.oneOf(['top', 'left', 'right', 'bottom',
|
||||
'topLeft', 'topRight', 'bottomLeft', 'bottomRight',
|
||||
'leftTop', 'leftBottom', 'rightTop', 'rightBottom']).def('top'),
|
||||
transitionName: PropTypes.string.def('zoom-big-fast'),
|
||||
// onVisibleChange: PropTypes.func,
|
||||
overlayStyle: PropTypes.object,
|
||||
overlayClassName: PropTypes.string,
|
||||
prefixCls: PropTypes.string.def('ant-tooltip'),
|
||||
mouseEnterDelay: PropTypes.number.def(0.1),
|
||||
mouseLeaveDelay: PropTypes.number.def(0.1),
|
||||
getTooltipContainer: PropTypes.func,
|
||||
getPopupContainer: PropTypes.func,
|
||||
arrowPointAtCenter: PropTypes.bool.def(false),
|
||||
autoAdjustOverflow: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]).def(true),
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
vnode: null,
|
||||
visible: false,
|
||||
left: 0,
|
||||
top: 0,
|
||||
realPlacement: this.placement,
|
||||
t1: null,
|
||||
t2: null,
|
||||
sVisible: !!this.$props.visible,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
const { prefixCls } = this
|
||||
return {
|
||||
[`${prefixCls}`]: true,
|
||||
}
|
||||
watch: {
|
||||
visible (val) {
|
||||
this.sVisible = val
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
checkPosition (popup, text, placement) {
|
||||
const { top, left, bottom, right } = text
|
||||
const reg = /(top|bottom|left|right)(.*)/
|
||||
const [, abstractPos, suffix] = placement.match(reg)
|
||||
let ret = placement
|
||||
// we can change the position many times
|
||||
if (abstractPos === 'left' && left < popup.width) ret = 'right' + suffix
|
||||
if (abstractPos === 'right' && document.documentElement.clientWidth - right < popup.width) ret = 'left' + suffix
|
||||
if (abstractPos === 'top' && top < popup.height) ret = 'bottom' + suffix
|
||||
if (abstractPos === 'bottom' && document.documentElement.clientHeight - bottom < popup.height) ret = 'left' + suffix
|
||||
return ret
|
||||
},
|
||||
mountNode (callback) {
|
||||
if (this.vnode) {
|
||||
callback()
|
||||
return
|
||||
onVisibleChange (visible) {
|
||||
if (!hasProp(this, 'visible')) {
|
||||
this.sVisible = this.isNoTitle() ? false : visible
|
||||
}
|
||||
const div = document.createElement('div')
|
||||
document.body.appendChild(div)
|
||||
const that = this
|
||||
const vnode = new Vue({
|
||||
data () {
|
||||
return {
|
||||
left: 0,
|
||||
top: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideSelf (e) {
|
||||
if (that.t1) {
|
||||
clearTimeout(that.t1)
|
||||
that.t1 = null
|
||||
}
|
||||
if (that.mouseLeaveDelay) {
|
||||
that.t2 = window.setTimeout(() => {
|
||||
if (e.relatedTarget === that.$el) {
|
||||
return
|
||||
}
|
||||
that.visible = false
|
||||
}, +that.mouseLeaveDelay * 1e3)
|
||||
}
|
||||
},
|
||||
},
|
||||
render (h) {
|
||||
return (
|
||||
<transition name={that.transitionName}>
|
||||
<div
|
||||
v-show={that.visible}
|
||||
class={`ant-tooltip ant-tooltip-placement-${that.realPlacement}`}
|
||||
style={{ left: this.left + 'px', top: this.top + 'px' }}
|
||||
onMouseleave={this.hideSelf}
|
||||
>
|
||||
<div class='ant-tooltip-content'>
|
||||
<div class='ant-tooltip-arrow'/>
|
||||
<div class='ant-tooltip-inner'>
|
||||
<span>{that.title}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
)
|
||||
},
|
||||
}).$mount(div)
|
||||
this.$nextTick(() => {
|
||||
this.vnode = vnode
|
||||
callback()
|
||||
if (!this.isNoTitle()) {
|
||||
this.$emit('visibleChange', visible)
|
||||
}
|
||||
},
|
||||
|
||||
getPopupDomNode () {
|
||||
return this.$refs.tooltip.getPopupDomNode()
|
||||
},
|
||||
|
||||
getPlacements () {
|
||||
const { builtinPlacements, arrowPointAtCenter, autoAdjustOverflow } = this.$props
|
||||
return builtinPlacements || getPlacements({
|
||||
arrowPointAtCenter,
|
||||
verticalArrowShift: 8,
|
||||
autoAdjustOverflow,
|
||||
})
|
||||
},
|
||||
onPopupAlign: (placement, domNode, target, align) => {
|
||||
|
||||
isHoverTrigger () {
|
||||
const { trigger } = this.$props
|
||||
if (!trigger || trigger === 'hover') {
|
||||
return true
|
||||
}
|
||||
if (Array.isArray(trigger)) {
|
||||
return trigger.indexOf('hover') >= 0
|
||||
}
|
||||
return false
|
||||
},
|
||||
|
||||
// Fix Tooltip won't hide at disabled button
|
||||
// mouse events don't trigger at disabled button in Chrome
|
||||
// https://github.com/react-component/tooltip/issues/18
|
||||
getDisabledCompatibleChildren (ele) {
|
||||
const isAntBtn = ele.componentOptions && ele.componentOptions.Ctor.options.__ANT_BUTTON
|
||||
if (((isAntBtn && ele.componentOptions.propsData.disabled) || (ele.tag === 'button' && ele.data && ele.data.attrs.disabled !== false)) && this.isHoverTrigger()) {
|
||||
// Pick some layout related style properties up to span
|
||||
// Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254
|
||||
const { picked, omited } = splitObject(
|
||||
getStyle(ele),
|
||||
['position', 'left', 'right', 'top', 'bottom', 'float', 'display', 'zIndex'],
|
||||
)
|
||||
const spanStyle = {
|
||||
display: 'inline-block', // default inline-block is important
|
||||
...picked,
|
||||
cursor: 'not-allowed',
|
||||
}
|
||||
const buttonStyle = {
|
||||
...omited,
|
||||
pointerEvents: 'none',
|
||||
}
|
||||
const spanCls = getClass(ele)
|
||||
const child = cloneElement(ele, {
|
||||
style: buttonStyle,
|
||||
class: null,
|
||||
})
|
||||
return (
|
||||
<span style={spanStyle} class={spanCls}>
|
||||
{child}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
return ele
|
||||
},
|
||||
|
||||
isNoTitle () {
|
||||
const { $slots, title } = this
|
||||
return !$slots.title && !title
|
||||
},
|
||||
|
||||
// 动态设置动画点
|
||||
onPopupAlign (domNode, align) {
|
||||
const placements = this.getPlacements()
|
||||
// 当前返回的位置
|
||||
const placement = Object.keys(placements).filter(
|
||||
key => (
|
||||
placements[key].points[0] === align.points[0] &&
|
||||
placements[key].points[1] === align.points[1]
|
||||
),
|
||||
)[0]
|
||||
if (!placement) {
|
||||
return
|
||||
}
|
||||
@ -135,118 +151,46 @@ export default {
|
||||
} 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, scale) {
|
||||
let { width, height, top, left } = text
|
||||
// you cant change the properties of DOMRect
|
||||
top += window.scrollY
|
||||
left += window.scrollX
|
||||
// FIXME: we can get the numbers from scale, but that's not what we really want
|
||||
const p = { width: popup.width / scale, height: popup.height / scale }
|
||||
const ret = { left, top }
|
||||
|
||||
if (/top/.test(placement)) ret.top -= p.height
|
||||
if (/bottom/.test(placement)) ret.top += height
|
||||
if (/left/.test(placement)) ret.left -= p.width
|
||||
if (/right/.test(placement)) ret.left += width
|
||||
|
||||
// FIXME: magic number 20 & 14 comes from the offset of triangle
|
||||
if (/Left/.test(placement)) {
|
||||
if (this.arrowPointAtCenter) ret.left += width / 2 - 20
|
||||
} else if (/Right/.test(placement)) {
|
||||
ret.left += (width - p.width)
|
||||
if (this.arrowPointAtCenter) ret.left -= width / 2 - 20
|
||||
} else if (/(top)|(bottom)/.test(placement)) {
|
||||
ret.left += (width - p.width) / 2
|
||||
}
|
||||
if (/Top/.test(placement)) {
|
||||
if (this.arrowPointAtCenter) ret.top += height / 2 - 14
|
||||
} else if (/Bottom/.test(placement)) {
|
||||
ret.top += (height - p.height)
|
||||
if (this.arrowPointAtCenter) ret.top -= height / 2 - 14
|
||||
} else if (/(left)|(right)/.test(placement)) {
|
||||
ret.top += (height - p.height) / 2
|
||||
}
|
||||
return ret
|
||||
},
|
||||
showNode () {
|
||||
this.mountNode(() => {
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
const popup = this.vnode.$el.getBoundingClientRect()
|
||||
const [, scale = 1] = window.getComputedStyle(this.vnode.$el).transform.match(/matrix\((.*?),/) || []
|
||||
const content = this.$el.getBoundingClientRect()
|
||||
const place = this.autoAdjustOverflow ? this.checkPosition(popup, content, this.placement, scale) : this.placement
|
||||
this.realPlacement = place
|
||||
const { left, top } = this.computeOffset(popup, content, place, scale)
|
||||
this.vnode.left = left
|
||||
this.vnode.top = top
|
||||
})
|
||||
this.onPopupAlign(this.realPlacement, this.$el, this.vnode.$el, { offset: [0, 0] })
|
||||
})
|
||||
},
|
||||
hideNode (e) {
|
||||
if (!this.vnode) return
|
||||
if (e.relatedTarget === this.vnode.$el) {
|
||||
return
|
||||
}
|
||||
this.visible = false
|
||||
},
|
||||
checkShow (e) {
|
||||
if (this.t2) {
|
||||
clearTimeout(this.t2)
|
||||
this.t2 = null
|
||||
}
|
||||
if (this.mouseEnterDelay) {
|
||||
this.t1 = window.setTimeout(() => {
|
||||
this.showNode(e)
|
||||
}, +this.mouseEnterDelay * 1e3)
|
||||
}
|
||||
},
|
||||
checkHide (e) {
|
||||
if (this.t1) {
|
||||
clearTimeout(this.t1)
|
||||
this.t1 = null
|
||||
}
|
||||
if (this.mouseLeaveDelay) {
|
||||
this.t2 = window.setTimeout(() => {
|
||||
this.hideNode(e)
|
||||
}, +this.mouseLeaveDelay * 1e3)
|
||||
}
|
||||
domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`
|
||||
},
|
||||
},
|
||||
|
||||
render (h) {
|
||||
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.checkShow)
|
||||
inner.data.on.mouseleave = this.addEventHandle(inner.data.on.mouseleave, this.checkHide)
|
||||
const { $props, $data, $slots } = this
|
||||
const { title, prefixCls, openClassName, getPopupContainer, getTooltipContainer } = $props
|
||||
const children = ($slots.default || []).filter(c => c.tag || c.text.trim() !== '')[0]
|
||||
let sVisible = $data.sVisible
|
||||
// Hide tooltip when there is no title
|
||||
if (!hasProp(this, 'visible') && this.isNoTitle()) {
|
||||
sVisible = false
|
||||
}
|
||||
|
||||
return this.$slots.default[0]
|
||||
},
|
||||
updated () {
|
||||
if (!this.vnode) return
|
||||
const popup = this.vnode.$el.getBoundingClientRect()
|
||||
const [, scale = 1] = window.getComputedStyle(this.vnode.$el).transform.match(/matrix\((.*?),/) || []
|
||||
const content = this.$el.getBoundingClientRect()
|
||||
const { left, top } = this.computeOffset(popup, content, this.realPlacement, scale)
|
||||
this.vnode.left = left
|
||||
this.vnode.top = top
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (!this.vnode) return
|
||||
this.vnode.$el.remove()
|
||||
this.vnode.$destroy()
|
||||
const child = this.getDisabledCompatibleChildren(isValidElement(children) ? children : <span>{children}</span>)
|
||||
const childCls = {
|
||||
[openClassName || `${prefixCls}-open`]: true,
|
||||
}
|
||||
const tooltipProps = {
|
||||
props: {
|
||||
...$props,
|
||||
getTooltipContainer: getPopupContainer || getTooltipContainer,
|
||||
builtinPlacements: this.getPlacements(),
|
||||
visible: sVisible,
|
||||
},
|
||||
ref: 'tooltip',
|
||||
on: {
|
||||
visibleChange: this.onVisibleChange,
|
||||
popupAlign: this.onPopupAlign,
|
||||
},
|
||||
}
|
||||
return (
|
||||
<RcTooltip {...tooltipProps}>
|
||||
<template slot='overlay'>
|
||||
{typeof title === 'function' ? title(h) : title}
|
||||
{$slots.title}
|
||||
</template>
|
||||
{sVisible ? cloneElement(child, { class: childCls }) : child}
|
||||
</RcTooltip>
|
||||
)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -56,11 +56,9 @@ export default {
|
||||
onAlign (popupDomNode, align) {
|
||||
const props = this.$props
|
||||
const currentAlignClassName = props.getClassNameFromAlign(align)
|
||||
// FIX: https://github.com/react-component/trigger/issues/56
|
||||
// FIX: https://github.com/react-component/tooltip/issues/79
|
||||
if (this.currentAlignClassName !== currentAlignClassName) {
|
||||
popupDomNode.className = popupDomNode.className.replace(this.currentAlignClassName, currentAlignClassName)
|
||||
this.currentAlignClassName = currentAlignClassName
|
||||
popupDomNode.className = this.getClassName(currentAlignClassName)
|
||||
}
|
||||
this.$emit('align', popupDomNode, align)
|
||||
},
|
||||
@ -101,14 +99,6 @@ export default {
|
||||
onMouseLeave (e) {
|
||||
this.$emit('mouseleave', e)
|
||||
},
|
||||
beforeEnter (el) {
|
||||
try {
|
||||
// this.$refs.alignInstance && this.$refs.alignInstance.forceAlign()
|
||||
} catch (error) {
|
||||
|
||||
}
|
||||
this.$refs.alignInstance && this.$refs.alignInstance.forceAlign()
|
||||
},
|
||||
afterLeave (el) {
|
||||
if (this.destroyPopupOnHide) {
|
||||
this.destroyPopup = true
|
||||
@ -117,8 +107,8 @@ export default {
|
||||
getPopupElement () {
|
||||
const { $props: props, onMouseEnter, onMouseLeave, $slots } = this
|
||||
const { align, visible, prefixCls, animation } = props
|
||||
const className = this.getClassName(this.currentAlignClassName ||
|
||||
props.getClassNameFromAlign(align))
|
||||
this.currentAlignClassName = this.currentAlignClassName || props.getClassNameFromAlign(align)
|
||||
const className = this.getClassName(this.currentAlignClassName)
|
||||
// const hiddenClassName = `${prefixCls}-hidden`
|
||||
if (!visible) {
|
||||
this.currentAlignClassName = null
|
||||
@ -144,7 +134,6 @@ export default {
|
||||
}
|
||||
return (<transition
|
||||
{...transitionProps}
|
||||
onBeforeEnter={this.beforeEnter}
|
||||
onAfterLeave={this.afterLeave}
|
||||
>
|
||||
<Align
|
||||
|
||||
@ -139,14 +139,14 @@
|
||||
<td>builtin placement align map. used by placement prop</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>popupVisibleChange</td>
|
||||
<td>$emit(visible)</td>
|
||||
<td>onPopupVisibleChange</td>
|
||||
<td>function</td>
|
||||
<td></td>
|
||||
<td>call when popup visible is changed</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>popupAlign</td>
|
||||
<td>$emit(popupDomNode, align)</td>
|
||||
<td>onPopupAlign</td>
|
||||
<td>function</td>
|
||||
<td></td>
|
||||
<td>callback when popup node is aligned</td>
|
||||
</tr>
|
||||
|
||||
@ -5,7 +5,7 @@ import hasProp from '../_util/hasProp'
|
||||
import addEventListener from '../_util/Dom/addEventListener'
|
||||
import warning from '../_util/warning'
|
||||
import Popup from './Popup'
|
||||
import { getAlignFromPlacement, getPopupClassNameFromAlign } from './utils'
|
||||
import { getAlignFromPlacement, getPopupClassNameFromAlign, noop } from './utils'
|
||||
import StateMixin from '../_util/StateMixin'
|
||||
import { cloneElement, cloneVNode } from '../_util/vnode'
|
||||
|
||||
@ -27,8 +27,8 @@ export default {
|
||||
showAction: PropTypes.any.def([]),
|
||||
hideAction: PropTypes.any.def([]),
|
||||
getPopupClassNameFromAlign: PropTypes.any.def(returnEmptyString),
|
||||
// onPopupVisibleChange: PropTypes.func,
|
||||
// afterPopupVisibleChange: PropTypes.func,
|
||||
// onPopupVisibleChange: PropTypes.func.def(noop),
|
||||
afterPopupVisibleChange: PropTypes.func.def(noop),
|
||||
popup: PropTypes.any,
|
||||
popupStyle: PropTypes.object.def({}),
|
||||
prefixCls: PropTypes.string.def('rc-trigger-popup'),
|
||||
@ -51,7 +51,7 @@ export default {
|
||||
destroyPopupOnHide: PropTypes.bool.def(false),
|
||||
mask: PropTypes.bool.def(false),
|
||||
maskClosable: PropTypes.bool.def(true),
|
||||
// onPopupAlign: PropTypes.func,
|
||||
// onPopupAlign: PropTypes.func.def(noop),
|
||||
popupAlign: PropTypes.object.def({}),
|
||||
popupVisible: PropTypes.bool,
|
||||
defaultPopupVisible: PropTypes.bool.def(false),
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
},
|
||||
sPopupVisible (val) {
|
||||
this.$nextTick(() => {
|
||||
this.$emit('afterPopupVisibleChange', val)
|
||||
this.afterPopupVisibleChange(val)
|
||||
})
|
||||
},
|
||||
},
|
||||
@ -261,7 +261,7 @@ export default {
|
||||
return this.$el.children ? this.$el.children[0] : this.$el
|
||||
},
|
||||
|
||||
getPopupClassFromAlign (align) {
|
||||
handleGetPopupClassFromAlign (align) {
|
||||
const className = []
|
||||
const props = this.$props
|
||||
const { popupPlacement, builtinPlacements, prefixCls } = props
|
||||
@ -285,7 +285,7 @@ export default {
|
||||
onPopupAlign () {
|
||||
this.$emit('popupAlign', ...arguments)
|
||||
},
|
||||
getComponent () {
|
||||
getComponent (h) {
|
||||
const mouseProps = {}
|
||||
if (this.isMouseEnterToShow()) {
|
||||
mouseProps.mouseenter = this.onPopupMouseenter
|
||||
@ -295,7 +295,7 @@ export default {
|
||||
}
|
||||
const { prefixCls, destroyPopupOnHide, sPopupVisible,
|
||||
popupStyle, popupClassName, action, onPopupAlign,
|
||||
popupAnimation, getPopupClassFromAlign, getRootDomNode,
|
||||
popupAnimation, handleGetPopupClassFromAlign, getRootDomNode,
|
||||
mask, zIndex, popupTransitionName, getPopupAlign,
|
||||
maskAnimation, maskTransitionName, popup, $slots, getContainer } = this
|
||||
const popupProps = {
|
||||
@ -306,7 +306,7 @@ export default {
|
||||
action,
|
||||
align: getPopupAlign(),
|
||||
animation: popupAnimation,
|
||||
getClassNameFromAlign: getPopupClassFromAlign,
|
||||
getClassNameFromAlign: handleGetPopupClassFromAlign,
|
||||
getRootDomNode,
|
||||
mask,
|
||||
zIndex,
|
||||
@ -328,7 +328,7 @@ export default {
|
||||
{...popupProps}
|
||||
ref='popup'
|
||||
>
|
||||
{typeof popup === 'function' ? popup() : popup}
|
||||
{typeof popup === 'function' ? popup(h) : popup}
|
||||
{popup === undefined ? $slots.popup : null}
|
||||
</Popup>
|
||||
)
|
||||
@ -472,7 +472,7 @@ export default {
|
||||
this.setPopupVisible(false)
|
||||
},
|
||||
},
|
||||
render () {
|
||||
render (h) {
|
||||
const children = this.$slots.default
|
||||
if (children.length > 1) {
|
||||
warning(false, 'Trigger $slots.default.length > 1, just support only one default', true)
|
||||
@ -521,7 +521,7 @@ export default {
|
||||
const trigger = cloneElement(cloneVNode(child), newChildProps)
|
||||
const { sPopupVisible, forceRender } = this
|
||||
if (sPopupVisible || forceRender || this._component) {
|
||||
this._component = this.getComponent()
|
||||
this._component = this.getComponent(h)
|
||||
} else {
|
||||
this._component = null
|
||||
}
|
||||
|
||||
@ -21,7 +21,5 @@ export function getPopupClassNameFromAlign (builtinPlacements, prefixCls, align)
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
export function saveRef (name, component) {
|
||||
this[name] = component
|
||||
export function noop () {
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
.icon-test{
|
||||
font-size: 35px;
|
||||
#app {
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div v-html="marked($slots.default[0].text.trim() || '')" />
|
||||
<div style="padding: 10px 0;" v-html="marked($slots.default[0].text.trim() || '')" />
|
||||
</template>
|
||||
<script>
|
||||
import marked from 'marked'
|
||||
@ -16,7 +16,6 @@ marked.setOptions({
|
||||
export default {
|
||||
name: 'md',
|
||||
data () {
|
||||
console.log(this.$slots.default)
|
||||
return {
|
||||
marked,
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user