diff --git a/components/_util/BaseMixin.js b/components/_util/BaseMixin.js
new file mode 100644
index 000000000..66d6bfa94
--- /dev/null
+++ b/components/_util/BaseMixin.js
@@ -0,0 +1,16 @@
+export default {
+ methods: {
+ setState (state, callback) {
+ Object.assign(this.$data, state)
+ this.$nextTick(() => {
+ callback && callback()
+ })
+ },
+ __emit () { // 直接调用listeners，底层组件不需要vueTool记录events
+ const args = [].slice.call(arguments, 0)
+ if (args.length && this.$listeners[args[0]]) {
+ this.$listeners[args[0]](...args.slice(1))
+ }
+ },
+ },
+}
diff --git a/components/_util/cloneElement.js b/components/_util/cloneElement.js
deleted file mode 100644
index ec8b55c1f..000000000
--- a/components/_util/cloneElement.js
+++ /dev/null
@@ -1,8 +0,0 @@
-export default (node, nodeProps) => {
- const { props, style, class: cls, attrs, key } = nodeProps
- if (node.componentOptions) {
- const propsData = node.componentOptions.propsData
- Object.assign(propsData, nodeProps)
- }
- return node
-}
diff --git a/components/_util/props-util.js b/components/_util/props-util.js
new file mode 100644
index 000000000..68e8f97b2
--- /dev/null
+++ b/components/_util/props-util.js
@@ -0,0 +1,30 @@
+const hasProp = (instance, prop) => {
+ const $options = instance.$options || {}
+ const propsData = $options.propsData || {}
+ return prop in propsData
+}
+const filterProps = (props, propsData = {}) => {
+ const res = {}
+ Object.keys(props).forEach((k) => {
+ if (k in propsData || props[k] !== undefined) {
+ res[k] = props[k]
+ }
+ })
+ return res
+}
+
+const getOptionProps = (instance) => {
+ const { $options = {}, $props = {}} = instance
+ return filterProps($props, $options.propsData)
+}
+
+const getComponentFromProp = (instance, h, prop) => {
+ const temp = instance[prop]
+ if (temp !== undefined) {
+ return typeof temp === 'function' ? temp(h) : temp
+ }
+ return instance.$slots[prop]
+}
+
+export { hasProp, filterProps, getOptionProps, getComponentFromProp }
+export default hasProp
diff --git a/components/_util/vnode.js b/components/_util/vnode.js
index e3225d29a..ecf245b82 100644
--- a/components/_util/vnode.js
+++ b/components/_util/vnode.js
@@ -78,11 +78,30 @@ export function cloneElement (n, nodeProps, clone) {
const { style = data.style,
class: cls = data.class,
attrs = data.attrs,
+ ref,
} = nodeProps
node.data = Object.assign(data, { style, attrs, class: cls, on: { ...(data.on || {}), ...on }})
if (key !== undefined) {
node.key = key
node.data.key = key
}
+ if (typeof ref === 'string') {
+ node.data.ref = ref
+ }
return node
}
+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)
+}
diff --git a/components/align/Align.vue b/components/align/Align.vue
index 36f1d9e6a..f4cdf0bb1 100644
--- a/components/align/Align.vue
+++ b/components/align/Align.vue
@@ -102,7 +102,8 @@ export default {
const props = this.$props
if (!props.disabled) {
const source = this.$el
- this.$emit('align', source, align(source, props.target(), props.align))
+ // this.$emit('align', source, align(source, props.target(), props.align))
+ this.$listeners.align && this.$listeners.align(source, align(source, props.target(), props.align))
}
},
},
diff --git a/components/align/demo/simple.vue b/components/align/demo/simple.vue
index 84b11f40f..7c5c991e2 100644
--- a/components/align/demo/simple.vue
+++ b/components/align/demo/simple.vue
@@ -1,9 +1,9 @@
<script>
import Align from '../index'
-import StateMixin from '../../_util/StateMixin'
+import BaseMixin from '../../_util/BaseMixin'
export default {
- mixins: [StateMixin],
+ mixins: [BaseMixin],
data () {
return {
monitor: true,
diff --git a/components/badge/ScrollNumber.vue b/components/badge/ScrollNumber.vue
index 3bd878912..b81832e98 100644
--- a/components/badge/ScrollNumber.vue
+++ b/components/badge/ScrollNumber.vue
@@ -1,5 +1,5 @@
<script>
-import StateMixin from '../_util/StateMixin'
+import BaseMixin from '../_util/BaseMixin'
function getNumberArray (num) {
return num
@@ -20,7 +20,7 @@ export default {
default: () => ({}),
},
},
- mixins: [StateMixin],
+ mixins: [BaseMixin],
data () {
const { count } = this
return {
diff --git a/components/button/button.vue b/components/button/button.vue
index 031d056ec..e82a87c07 100644
--- a/components/button/button.vue
+++ b/components/button/button.vue
@@ -2,39 +2,13 @@
import Icon from '../icon'
const rxTwoCNChar = /^[\u4e00-\u9fa5]{2}$/
const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar)
+import buttonTypes from './buttonTypes'
export default {
name: 'Button',
+ __ANT_BUTTON: true,
components: { Icon },
props: {
- prefixCls: {
- default: 'ant-btn',
- type: String,
- },
- type: {
- validator (value) {
- return ['primary', 'danger', 'dashed', 'ghost', 'default'].includes(value)
- },
- },
- htmlType: {
- default: 'button',
- validator (value) {
- return ['button', 'submit', 'reset'].includes(value)
- },
- },
- icon: String,
- shape: {
- validator (value) {
- return ['circle', 'circle-outline'].includes(value)
- },
- },
- size: {
- validator (value) {
- return ['small', 'large', 'default'].includes(value)
- },
- },
- loading: [Boolean, Object],
- disabled: Boolean,
- ghost: Boolean,
+ ...buttonTypes,
},
data () {
return {
diff --git a/components/button/buttonTypes.js b/components/button/buttonTypes.js
new file mode 100644
index 000000000..2104f1aa7
--- /dev/null
+++ b/components/button/buttonTypes.js
@@ -0,0 +1,12 @@
+import PropTypes from '../_util/vue-types'
+export default {
+ prefixCls: PropTypes.string.def('ant-btn'),
+ type: PropTypes.oneOf(['primary', 'danger', 'dashed', 'ghost', 'default']).def('default'),
+ htmlType: PropTypes.oneOf(['button', 'submit', 'reset']).def('button'),
+ icon: PropTypes.string,
+ shape: PropTypes.oneOf(['circle', 'circle-outline']),
+ size: PropTypes.oneOf(['small', 'large', 'default']).def('default'),
+ loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+ disabled: PropTypes.bool,
+ ghost: PropTypes.bool,
+}
diff --git a/components/checkbox/Checkbox.vue b/components/checkbox/Checkbox.vue
index 7606af73c..047e7cc45 100644
--- a/components/checkbox/Checkbox.vue
+++ b/components/checkbox/Checkbox.vue
@@ -13,7 +13,7 @@
</label>
</template>
<script>
-import hasProp from '../_util/hasProp'
+import hasProp from '../_util/props-util'
export default {
name: 'Checkbox',
props: {
diff --git a/components/checkbox/Group.vue b/components/checkbox/Group.vue
index b05228124..62de663fe 100644
--- a/components/checkbox/Group.vue
+++ b/components/checkbox/Group.vue
@@ -8,7 +8,7 @@
</template>
<script>
import Checkbox from './Checkbox.vue'
-import hasProp from '../_util/hasProp'
+import hasProp from '../_util/props-util'
export default {
name: 'CheckboxGroup',
props: {
diff --git a/components/index.js b/components/index.js
index a349bc1f0..70e9fb2ed 100644
--- a/components/index.js
+++ b/components/index.js
@@ -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'
@@ -29,3 +29,7 @@ export { default as Tabs } from './tabs'
export { default as Input } from './input'
export { default as Breadcrumb } from './breadcrumb'
+
+export { default as Popover } from './popover'
+
+export { default as Popconfirm } from './popconfirm'
diff --git a/components/input/Input.vue b/components/input/Input.vue
index 9949af8af..8d4e9f494 100644
--- a/components/input/Input.vue
+++ b/components/input/Input.vue
@@ -2,7 +2,7 @@
import TextArea from './TextArea'
import omit from 'omit.js'
import inputProps from './inputProps'
-import hasProp from '../_util/hasProp'
+import hasProp from '../_util/props-util'
function fixControlledValue (value) {
if (typeof value === 'undefined' || value === null) {
diff --git a/components/input/TextArea.vue b/components/input/TextArea.vue
index 3ff8d72f5..93118e055 100644
--- a/components/input/TextArea.vue
+++ b/components/input/TextArea.vue
@@ -2,7 +2,7 @@
import omit from 'omit.js'
import inputProps from './inputProps'
import calculateNodeHeight from './calculateNodeHeight'
-import hasProp from '../_util/hasProp'
+import hasProp from '../_util/props-util'
function onNextFrame (cb) {
if (window.requestAnimationFrame) {
diff --git a/components/menu/demo/antd.vue b/components/menu/demo/antd.vue
index 841b2cfe4..e1083b02e 100644
--- a/components/menu/demo/antd.vue
+++ b/components/menu/demo/antd.vue
@@ -1,8 +1,6 @@
<script>
-import { cloneElement } from '../../_util/vnode'
import Clone from '../../_util/Clone'
import Menu, { SubMenu, Item as MenuItem, Divider } from '../src/index'
-import { Icon } from 'antd'
import animate from 'css-animation'
function handleSelect (info) {
@@ -74,17 +72,16 @@ export default {
</SubMenu>
</SubMenu>
</SubMenu>)
-
- function onOpenChange (value) {
- console.log('onOpenChange', value)
+ const onOpenChange = (value) => {
+ console.log('onOpenChange', value, this.$refs)
}
const commonMenu = () => (
<Menu onSelect={handleSelect} onOpenChange={onOpenChange}>
- <SubMenu key='1' title={<span>sub menu</span>}>
+ <SubMenu ref='test' key='1' title={<span>sub menu</span>}>
<MenuItem key='1-1'>
0-1
</MenuItem>
- <MenuItem key='1-2'>0-2</MenuItem>
+ <MenuItem key='1-2' disabled>0-2</MenuItem>
</SubMenu>
{nestSubMenu()}
<MenuItem key='2'>1</MenuItem>
@@ -130,6 +127,7 @@ export default {
<div style={{ margin: '20px', width: '400px' }}><Clone childProps={{
mode: 'inline',
defaultOpenKeys: ['1'],
+ defaultSelectedKeys: ['1-2', '4-1'],
openAnimation: animation,
}} >
{commonMenu()}
diff --git a/components/menu/src/DOMWrap.vue b/components/menu/src/DOMWrap.vue
index fb18dc9a1..98f5cde0c 100644
--- a/components/menu/src/DOMWrap.vue
+++ b/components/menu/src/DOMWrap.vue
@@ -33,6 +33,7 @@ export default {
const Tag = this.$props.tag
const tagProps = {
attr: { ...otherProps, ...this.$attrs },
+ on: this.$listeners,
}
return <Tag {...tagProps} class={this.class}>{this.$slots.default}</Tag>
},
diff --git a/components/menu/src/Menu.vue b/components/menu/src/Menu.vue
index 621b2a040..739d23992 100644
--- a/components/menu/src/Menu.vue
+++ b/components/menu/src/Menu.vue
@@ -1,8 +1,8 @@
<script>
import PropTypes from '../../_util/vue-types'
import MenuMixin from './MenuMixin'
-import StateMixin from '../../_util/StateMixin'
-import hasProp from '../../_util/hasProp'
+import BaseMixin from '../../_util/BaseMixin'
+import hasProp from '../../_util/props-util'
import commonPropsType from './commonPropsType'
const Menu = {
@@ -14,7 +14,7 @@ const Menu = {
selectable: PropTypes.bool.def(true),
...commonPropsType,
},
- mixins: [StateMixin, MenuMixin],
+ mixins: [BaseMixin, MenuMixin],
data () {
const props = this.$props
@@ -79,7 +79,7 @@ const Menu = {
sSelectedKeys,
})
}
- this.$emit('select', {
+ this.__emit('select', {
...selectInfo,
sSelectedKeys,
})
@@ -87,7 +87,7 @@ const Menu = {
},
onClick (e) {
- this.$emit('click', e)
+ this.__emit('click', e)
},
onOpenChange (e_) {
@@ -119,7 +119,7 @@ const Menu = {
if (!hasProp(this, 'openKeys')) {
this.setState({ sOpenKeys })
}
- this.$emit('openChange', sOpenKeys)
+ this.__emit('openChange', sOpenKeys)
}
},
@@ -137,7 +137,7 @@ const Menu = {
sSelectedKeys,
})
}
- this.$emit('deselect', {
+ this.__emit('deselect', {
...selectInfo,
sSelectedKeys,
})
@@ -163,7 +163,7 @@ const Menu = {
const { sOpenKeys } = this.$data
if (sOpenKeys.length) {
lastOpen = this.getFlatInstanceArray().filter((c) => {
- return c && sOpenKeys.indexOf(c.props.eventKey) !== -1
+ return c && sOpenKeys.indexOf(c.eventKey) !== -1
})
}
return lastOpen[0]
diff --git a/components/menu/src/MenuItem.vue b/components/menu/src/MenuItem.vue
index 5df5783cc..8b7c4d27f 100644
--- a/components/menu/src/MenuItem.vue
+++ b/components/menu/src/MenuItem.vue
@@ -2,7 +2,7 @@
import PropTypes from '../../_util/vue-types'
import KeyCode from '../../_util/KeyCode'
import { noop } from './util'
-import StateMixin from '../../_util/StateMixin'
+import BaseMixin from '../../_util/BaseMixin'
const MenuItem = {
name: 'MenuItem',
@@ -14,44 +14,44 @@ const MenuItem = {
selectedKeys: PropTypes.array,
disabled: PropTypes.bool,
title: PropTypes.string,
+ index: PropTypes.number,
inlineIndent: PropTypes.number.def(24),
level: PropTypes.number.def(1),
mode: PropTypes.oneOf(['horizontal', 'vertical', 'vertical-left', 'vertical-right', 'inline']).def('vertical'),
- // onItemHover: PropTypes.func,
- // onSelect: PropTypes.func,
- // onClick: PropTypes.func,
- // onDeselect: PropTypes.func,
parentMenu: PropTypes.object,
- // onDestroy: PropTypes.func,
- // onMouseEnter: PropTypes.func,
- // onMouseLeave: PropTypes.func,
clearSubMenuTimers: PropTypes.func.def(noop),
},
inject: {
parentMenuContext: { default: undefined },
},
- mixins: [StateMixin],
+ mixins: [BaseMixin],
isMenuItem: true,
beforeDestroy () {
const props = this.$props
- this.$emit('destroy', props.eventKey)
+ this.__emit('destroy', props.eventKey)
},
methods: {
+ __emit () { // 直接调用listeners，底层组件不需要vueTool记录events
+ const args = [].slice.call(arguments, 0)
+ if (args.length && this.$listeners[args[0]]) {
+ this.$listeners[args[0]](...args.slice(1))
+ }
+ },
onKeyDown (e) {
const keyCode = e.keyCode
if (keyCode === KeyCode.ENTER) {
- this.$emit('click', e)
+ this.__emit('click', e)
return true
}
},
onMouseLeave (e) {
const { eventKey } = this.$props
- this.$emit('itemHover', {
+ this.__emit('itemHover', {
key: eventKey,
hover: false,
})
- this.$emit('mouseLeave', {
+ this.__emit('mouseleave', {
key: eventKey,
domEvent: e,
})
@@ -62,11 +62,11 @@ const MenuItem = {
if (parentMenuContext && parentMenuContext.subMenuInstance) {
parentMenuContext.subMenuInstance.clearSubMenuTimers()
}
- this.$emit('itemHover', {
+ this.__emit('itemHover', {
key: eventKey,
hover: true,
})
- this.$emit('mouseEnter', {
+ this.__emit('mouseenter', {
key: eventKey,
domEvent: e,
})
@@ -81,15 +81,15 @@ const MenuItem = {
item: this,
domEvent: e,
}
- this.$emit('click', info)
+ this.__emit('click', info)
if (multiple) {
if (selected) {
- this.$emit('deselect', info)
+ this.__emit('deselect', info)
} else {
- this.$emit('select', info)
+ this.__emit('select', info)
}
} else if (!selected) {
- this.$emit('select', info)
+ this.__emit('select', info)
}
},
diff --git a/components/menu/src/MenuMixin.js b/components/menu/src/MenuMixin.js
index 5b1cbe6ea..8250e105b 100644
--- a/components/menu/src/MenuMixin.js
+++ b/components/menu/src/MenuMixin.js
@@ -1,4 +1,4 @@
-import hasProp from '../../_util/hasProp'
+import hasProp from '../../_util/props-util'
import KeyCode from '../../_util/KeyCode'
import scrollIntoView from 'dom-scroll-into-view'
import { getKeyFromChildrenIndex, loopMenuItem } from './util'
@@ -9,10 +9,8 @@ function allDisabled (arr) {
if (!arr.length) {
return true
}
-
return arr.every(c => {
- const propsData = c.componentOptions.propsData || {}
- return !!propsData.disabled
+ return !!c.disabled
})
}
@@ -53,10 +51,6 @@ export default {
deep: true,
},
},
-
- created () {
- this.instanceArray = []
- },
methods: {
getActiveKey (originalActiveKey) {
let activeKey = originalActiveKey
@@ -86,23 +80,13 @@ export default {
}
return activeKey
},
- saveRef (index, subIndex, c) {
- if (c) {
- if (subIndex !== undefined) {
- this.instanceArray[index] = this.instanceArray[index] || []
- this.instanceArray[index][subIndex] = c
- } else {
- this.instanceArray[index] = c
- }
- }
- },
// all keyboard events callbacks run from here at first
- onKeyDown (e, callback) {
+ onKeyDown (e) {
const keyCode = e.keyCode
let handled
this.getFlatInstanceArray().forEach((obj) => {
- if (obj && obj.$props.active) {
- handled = this.$emit('keydown', e)
+ if (obj && obj.active) {
+ handled = obj.onKeyDown(e)
}
})
if (handled) {
@@ -115,15 +99,11 @@ export default {
if (activeItem) {
e.preventDefault()
this.setState({
- sActiveKey: activeItem.$props.eventKey,
+ sActiveKey: activeItem.eventKey,
}, () => {
scrollIntoView(activeItem.$el, this.$el, {
onlyScrollIfNeeded: true,
})
- // https://github.com/react-component/menu/commit/9899a9672f6f028ec3cdf773f1ecea5badd2d33e
- if (typeof callback === 'function') {
- callback(activeItem)
- }
})
return 1
} else if (activeItem === undefined) {
@@ -143,22 +123,13 @@ export default {
},
getFlatInstanceArray () {
- let instanceArray = this.instanceArray
- const hasInnerArray = instanceArray.some((a) => {
- return Array.isArray(a)
- })
- if (hasInnerArray) {
- instanceArray = []
- this.instanceArray.forEach((a) => {
- if (Array.isArray(a)) {
- instanceArray.push.apply(instanceArray, a)
- } else {
- instanceArray.push(a)
- }
- })
- this.instanceArray = instanceArray
+ let instance = []
+ try {
+ instance = this.$children[0].$children || []
+ } catch (error) {
+
}
- return instanceArray
+ return instance
},
renderCommonMenuItem (child, i, subIndex, extraProps) {
@@ -175,7 +146,6 @@ export default {
renderMenuItem: this.renderMenuItem,
rootPrefixCls: props.prefixCls,
index: i,
- // parentMenu: this,
eventKey: key,
active: !childProps.disabled && isActive,
multiple: props.multiple,
@@ -195,11 +165,7 @@ export default {
destroy: this.onDestroy,
select: this.onSelect,
},
- // ref: childProps.disabled ? undefined : child.ref,
- // ref: childProps.disabled ? undefined
- // : createChainedFunction(child.ref, saveRef.bind(this, i, subIndex)),
}
- // !childProps.disabled && this.saveRef(i, subIndex, child.ref)
if (props.mode === 'inline') {
newChildProps.props.triggerSubMenuAction = 'click'
}
@@ -210,7 +176,6 @@ export default {
},
renderRoot (props, children = []) {
- this.instanceArray = []
const className = {
[props.prefixCls]: true,
[props.class]: true,
@@ -236,7 +201,7 @@ export default {
domProps.attrs.tabIndex = '0'
domProps.on.keydown = this.onKeyDown
}
- const newChildren = children.map(this.renderMenuItem)
+ const newChildren = children.map((c, i) => this.renderMenuItem(c, i))
return (
<DOMWrap
{...domProps}
@@ -259,8 +224,7 @@ export default {
// find current activeIndex
let activeIndex = -1
children.every((c, ci) => {
- const propsData = c.componentOptions.propsData || {}
- if (c && propsData.eventKey === sActiveKey) {
+ if (c && c.eventKey === sActiveKey) {
activeIndex = ci
return false
}
@@ -275,8 +239,7 @@ export default {
let i = start
for (; ;) {
const child = children[i]
- const propsData = child.componentOptions.propsData || {}
- if (!child || propsData.disabled) {
+ if (!child || child.disabled) {
i = (i + 1 + len) % len
// complete a loop
if (i === start) {
diff --git a/components/menu/src/SubMenu.vue b/components/menu/src/SubMenu.vue
index fdb38b991..071999cac 100644
--- a/components/menu/src/SubMenu.vue
+++ b/components/menu/src/SubMenu.vue
@@ -5,7 +5,7 @@ import KeyCode from '../../_util/KeyCode'
import SubPopupMenu from './SubPopupMenu'
import placements from './placements'
import { loopMenuItemRecusively, noop } from './util'
-import StateMixin from '../../_util/StateMixin'
+import BaseMixin from '../../_util/BaseMixin'
let guid = 0
@@ -31,6 +31,7 @@ export default {
multiple: PropTypes.bool,
active: PropTypes.bool, // TODO: remove
isRootMenu: PropTypes.bool,
+ index: PropTypes.number,
// onItemHover: PropTypes.func,
// onSelect: PropTypes.func,
triggerSubMenuAction: PropTypes.string,
@@ -44,18 +45,11 @@ export default {
subMenuCloseDelay: PropTypes.number.def(0.1),
level: PropTypes.number.def(1),
inlineIndent: PropTypes.number.def(24),
- // onDeselect: PropTypes.func,
- // onDestroy: PropTypes.func,
- // onMouseEnter: PropTypes.func,
- // onMouseLeave: PropTypes.func,
- // onTitleMouseEnter: PropTypes.func,
- // onTitleMouseLeave: PropTypes.func,
- // onTitleClick: PropTypes.func,
},
inject: {
parentMenuContext: { default: undefined },
},
- mixins: [StateMixin],
+ mixins: [BaseMixin],
isSubMenu: true,
data () {
return {
@@ -72,7 +66,7 @@ export default {
beforeDestroy () {
const { eventKey, parentMenuContext } = this
- this.$emit('destroy', eventKey)
+ this.__emit('destroy', eventKey)
if (parentMenuContext.subMenuInstance === this) {
this.clearSubMenuTimers()
}
@@ -94,13 +88,10 @@ export default {
popupMenu.style.minWidth = `${this.subMenuTitle.offsetWidth}px`
}, 0)
},
- onDestroy (key) {
- this.$emit('destroy', key)
- },
onKeyDown (e) {
const keyCode = e.keyCode
- const menu = this.menuInstance
+ const menu = this.$refs.menuInstance
const isOpen = this.isOpen()
if (keyCode === KeyCode.ENTER) {
@@ -141,10 +132,6 @@ export default {
}
},
- onOpenChange (e) {
- this.$emit('openChange', e)
- },
-
onPopupVisibleChange (visible) {
this.triggerOpenChange(visible, visible ? 'mouseenter' : 'mouseleave')
},
@@ -155,7 +142,7 @@ export default {
this.setState({
defaultActiveFirst: false,
})
- this.$emit('mouseenter', {
+ this.__emit('mouseenter', {
key,
domEvent: e,
})
@@ -169,7 +156,7 @@ export default {
parentMenuContext.subMenuInstance = this
parentMenuContext.subMenuLeaveFn = () => {
// trigger mouseleave
- this.$emit('mouseleave', {
+ this.__emit('mouseleave', {
key: eventKey,
domEvent: e,
})
@@ -181,11 +168,11 @@ export default {
onTitleMouseEnter (domEvent) {
const { eventKey: key } = this.$props
this.clearSubMenuTitleLeaveTimer()
- this.$emit('itemHover', {
+ this.__emit('itemHover', {
key,
hover: true,
})
- this.$emit('titleMouseenter', {
+ this.__emit('titleMouseenter', {
key,
domEvent,
})
@@ -195,11 +182,11 @@ export default {
const { eventKey, parentMenuContext } = this
parentMenuContext.subMenuInstance = this
parentMenuContext.subMenuTitleLeaveFn = () => {
- this.$emit('itemHover', {
+ this.__emit('itemHover', {
key: eventKey,
hover: false,
})
- this.$emit('titleMouseleave', {
+ this.__emit('titleMouseleave', {
key: eventKey,
domEvent: e,
})
@@ -210,7 +197,7 @@ export default {
onTitleClick (e) {
const { triggerSubMenuAction, eventKey } = this.$props
- this.$emit('itemClick', {
+ this.__emit('itemClick', {
key: eventKey,
domEvent: e,
test: 111,
@@ -225,15 +212,7 @@ export default {
},
onSubMenuClick (info) {
- this.$emit('click', this.addKeyPath(info))
- },
-
- onSelect (info) {
- this.$emit('select', info)
- },
-
- onDeselect (info) {
- this.$emit('deselect', info)
+ this.__emit('click', this.addKeyPath(info))
},
getPrefixCls () {
@@ -265,7 +244,7 @@ export default {
triggerOpenChange (open, type) {
const key = this.$props.eventKey
- this.onOpenChange({
+ this.__emit('openChange', {
key,
item: this,
trigger: type,
@@ -308,6 +287,7 @@ export default {
renderChildren (children, vShow) {
const props = this.$props
const isOpen = this.isOpen()
+ const { select, deselect, destroy, openChange } = this.$listeners
const subPopupMenuProps = {
props: {
mode: props.mode === 'horizontal' ? 'vertical' : props.mode,
@@ -331,10 +311,7 @@ export default {
},
on: {
click: this.onSubMenuClick,
- select: this.onSelect,
- deselect: this.onDeselect,
- destroy: this.onDestroy,
- openChange: this.onOpenChange,
+ select, deselect, destroy, openChange,
},
id: this._menuId,
ref: 'menuInstance',
diff --git a/components/menu/src/SubPopupMenu.vue b/components/menu/src/SubPopupMenu.vue
index 03072fbc5..fda6314b3 100644
--- a/components/menu/src/SubPopupMenu.vue
+++ b/components/menu/src/SubPopupMenu.vue
@@ -1,7 +1,7 @@
<script>
import PropTypes from '../../_util/vue-types'
import MenuMixin from './MenuMixin'
-import StateMixin from '../../_util/StateMixin'
+import BaseMixin from '../../_util/BaseMixin'
import commonPropsType from './commonPropsType'
import { noop } from './util'
export default {
@@ -10,26 +10,26 @@ export default {
clearSubMenuTimers: PropTypes.func.def(noop),
},
- mixins: [MenuMixin, StateMixin],
+ mixins: [MenuMixin, BaseMixin],
methods: {
onDeselect (selectInfo) {
- this.$emit('deselect', selectInfo)
+ this.__emit('deselect', selectInfo)
},
onSelect (selectInfo) {
- this.$emit('select', selectInfo)
+ this.__emit('select', selectInfo)
},
onClick (e) {
- this.$emit('click', e)
+ this.__emit('click', e)
},
onOpenChange (e) {
- this.$emit('openChange', e)
+ this.__emit('openChange', e)
},
onDestroy (key) {
- this.$emit('destroy', key)
+ this.__emit('destroy', key)
},
getOpenTransitionName () {
diff --git a/components/popconfirm/demo/basic.vue b/components/popconfirm/demo/basic.vue
new file mode 100644
index 000000000..95f6bbb29
--- /dev/null
+++ b/components/popconfirm/demo/basic.vue
@@ -0,0 +1,29 @@
+<template>
+<div>
+<md>
+## 基本
+最简单的用法。
+</md>
+ <Popconfirm title="Are you sure delete this task?" @confirm="confirm" @cancel="cancel" okText="Yes" cancelText="No">
+ <a href="#">Delete</a>
+ </Popconfirm>
+</div>
+</template>
+
+<script>
+import { Popconfirm, Button } from 'antd'
+export default {
+ methods: {
+ confirm (e) {
+ console.log(e)
+ },
+ cancel (e) {
+ console.log(e)
+ },
+ },
+ components: {
+ Popconfirm,
+ AntButton: Button,
+ },
+}
+</script>
diff --git a/components/popconfirm/index.vue b/components/popconfirm/index.vue
new file mode 100644
index 000000000..9807ce386
--- /dev/null
+++ b/components/popconfirm/index.vue
@@ -0,0 +1,118 @@
+<script>
+import omit from 'omit.js'
+import Tooltip from '../tooltip'
+import abstractTooltipProps from '../tooltip/abstractTooltipProps'
+import PropTypes from '../_util/vue-types'
+import { getOptionProps, hasProp, getComponentFromProp } from '../_util/props-util'
+import BaseMixin from '../_util/BaseMixin'
+import buttonTypes from '../button/buttonTypes'
+import Icon from '../icon'
+import Button from '../button'
+
+export default {
+ name: 'popconfirm',
+ props: {
+ ...abstractTooltipProps,
+ prefixCls: PropTypes.string.def('ant-popover'),
+ transitionName: PropTypes.string.def('zoom-big'),
+ content: PropTypes.any,
+ title: PropTypes.any,
+ trigger: abstractTooltipProps.trigger.def('click'),
+ okType: buttonTypes.type.def('primary'),
+ okText: PropTypes.any,
+ cancelText: PropTypes.any,
+ },
+ mixins: [BaseMixin],
+ model: {
+ prop: 'visible',
+ event: 'change',
+ },
+ data () {
+ return {
+ sVisible: this.$props.visible,
+ }
+ },
+ methods: {
+ onConfirm (e) {
+ this.setVisible(false)
+ this.$emit('confirm', e)
+ },
+
+ onCancel (e) {
+ this.setVisible(false)
+ this.$emit('cancel', e)
+ },
+
+ onVisibleChange (sVisible) {
+ this.setVisible(sVisible)
+ },
+
+ setVisible (sVisible) {
+ const props = this.$props
+ if (!hasProp(this, 'visible')) {
+ this.setState({ sVisible })
+ }
+
+ const { onVisibleChange } = props
+ if (onVisibleChange) {
+ onVisibleChange(sVisible)
+ }
+ this.$emit('change', sVisible)
+ },
+ getPopupDomNode () {
+ return this.$refs.tooltip.getPopupDomNode()
+ },
+ },
+ render (h) {
+ const { prefixCls, okType } = this.$props
+ const props = getOptionProps(this)
+ const otherProps = omit(props, [
+ 'title',
+ 'content',
+ 'cancelText',
+ 'okText',
+ ])
+ const tooltipProps = {
+ props: {
+ ...otherProps,
+ visible: this.sVisible,
+ },
+ ref: 'tooltip',
+ on: {
+ change: this.onVisibleChange,
+ },
+ }
+ const overlay = (
+ <div>
+ <div class={`${prefixCls}-inner-content`}>
+ <div class={`${prefixCls}-message`}>
+ <Icon type='exclamation-circle' />
+ <div class={`${prefixCls}-message-title`}>
+ {getComponentFromProp(this, h, 'title')}
+ </div>
+ </div>
+ <div class={`${prefixCls}-buttons`}>
+ <Button onClick={this.onCancel} size='small'>
+ {getComponentFromProp(this, h, 'cancelText')}
+ </Button>
+ <Button onClick={this.onConfirm} type={okType} size='small'>
+ {getComponentFromProp(this, h, 'okText')}
+ </Button>
+ </div>
+ </div>
+ </div>
+ )
+ return (
+ <Tooltip
+ {...tooltipProps}
+ >
+ <template slot='title'>
+ {overlay}
+ </template>
+ {this.$slots.default}
+ </Tooltip>
+ )
+ },
+}
+
+</script>
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
new file mode 100644
index 000000000..9442b1fac
--- /dev/null
+++ b/components/popconfirm/index.zh-CN.md
@@ -0,0 +1,34 @@
+---
+category: Components
+subtitle: 气泡确认框
+type: Feedback
+title: Popconfirm
+---
+
+点击元素，弹出气泡式的确认框。
+
+## 何时使用
+
+目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
+
+和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| cancelText | 取消按钮文字 | string\|function\|slot | 取消 |
+| okText | 确认按钮文字 | string\|function\|slot | 确定 |
+| okType | 确认按钮类型 | string | primary |
+| title | 确认框的描述 | string\|function\|slot | 无 |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| cancel | 点击取消时触发 | (e) |
+| confirm | 点击确认时触发 | (e) |
+
+更多属性请参考 [Tooltip](/components/tooltip/#API)。
+
+## 注意
+
+请确保 `Popconfirm` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。
diff --git a/components/popconfirm/style/index.js b/components/popconfirm/style/index.js
new file mode 100644
index 000000000..a177f207f
--- /dev/null
+++ b/components/popconfirm/style/index.js
@@ -0,0 +1,5 @@
+import '../../style/index.less'
+
+// style dependencies
+import '../../popover/style'
+import '../../button/style'
diff --git a/components/popover/demo/arrow-point-at-center.vue b/components/popover/demo/arrow-point-at-center.vue
new file mode 100644
index 000000000..096f076f5
--- /dev/null
+++ b/components/popover/demo/arrow-point-at-center.vue
@@ -0,0 +1,42 @@
+<template>
+<div>
+<md>
+## 箭头指向
+设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
+</md>
+ <Popover placement="topLeft">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>Align edge / 边缘对齐</AntButton>
+ </Popover>
+ <Popover placement="topLeft" arrowPointAtCenter>
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>Arrow points to center / 箭头指向中心</AntButton>
+ </Popover>
+</div>
+</template>
+
+<script>
+import { Popover, Button } from 'antd'
+export default {
+ components: {
+ Popover,
+ AntButton: Button,
+ },
+}
+</script>
diff --git a/components/popover/demo/basic.vue b/components/popover/demo/basic.vue
new file mode 100644
index 000000000..20cb76fd3
--- /dev/null
+++ b/components/popover/demo/basic.vue
@@ -0,0 +1,27 @@
+<template>
+<div>
+<md>
+## 基本
+最简单的用法，浮层的大小由内容区域决定。
+</md>
+<Popover title="Title">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <AntButton type="primary">Hover me</AntButton>
+ </Popover>
+</div>
+</template>
+
+<script>
+import { Popover, Button } from 'antd'
+export default {
+ components: {
+ Popover,
+ AntButton: Button,
+ },
+}
+</script>
diff --git a/components/popover/demo/control.vue b/components/popover/demo/control.vue
new file mode 100644
index 000000000..8d8fa9b47
--- /dev/null
+++ b/components/popover/demo/control.vue
@@ -0,0 +1,39 @@
+<template>
+<div>
+ <md>
+ ## 从浮层内关闭
+ 使用 `visible` 属性控制浮层显示。
+ </md>
+ <Popover
+ title="Title"
+ trigger="click"
+ v-model="visible"
+ >
+ <template slot="content">
+ <a @click="hide">Close</a>
+ </template>
+ <AntButton type="primary">Click me</AntButton>
+ </Popover>
+</div>
+</template>
+
+<script>
+import { Popover, Button } from 'antd'
+export default {
+ data () {
+ return {
+ visible: false,
+ }
+ },
+ methods: {
+ hide () {
+ console.log(111)
+ this.visible = false
+ },
+ },
+ components: {
+ Popover,
+ AntButton: Button,
+ },
+}
+</script>
diff --git a/components/popover/demo/index.vue b/components/popover/demo/index.vue
new file mode 100644
index 000000000..d6c50e639
--- /dev/null
+++ b/components/popover/demo/index.vue
@@ -0,0 +1,30 @@
+<template>
+ <div>
+ <h1>Basic</h1>
+ <Basic />
+ <h1>ArrowCenter</h1>
+ <ArrowCenter />
+ <h1>Control</h1>
+ <Control />
+ <h1>Placement</h1>
+ <Placement />
+ <h1>TriggerType</h1>
+ <TriggerType />
+ </div>
+</template>
+<script>
+import Basic from './basic'
+import ArrowCenter from './arrow-point-at-center'
+import Control from './control'
+import Placement from './placement'
+import TriggerType from './triggerType'
+export default {
+ components: {
+ Basic,
+ ArrowCenter,
+ Control,
+ Placement,
+ TriggerType,
+ },
+}
+</script>
diff --git a/components/popover/demo/placement.vue b/components/popover/demo/placement.vue
new file mode 100644
index 000000000..2c80b16c6
--- /dev/null
+++ b/components/popover/demo/placement.vue
@@ -0,0 +1,184 @@
+<template>
+<div id="components-popover-demo-placement">
+<md>
+## 位置
+位置有 12 个方向。
+</md>
+ <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
+ <Popover placement="topLeft">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>TL</AntButton>
+ </Popover>
+ <Popover placement="top">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>Top</AntButton>
+ </Popover>
+ <Popover placement="topRight">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>TR</AntButton>
+ </Popover>
+ </div>
+ <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
+ <Popover placement="leftTop">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>LT</AntButton>
+ </Popover>
+ <Popover placement="left">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>Left</AntButton>
+ </Popover>
+ <Popover placement="leftBottom">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>LB</AntButton>
+ </Popover>
+ </div>
+ <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
+ <Popover placement="rightTop">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>RT</AntButton>
+ </Popover>
+ <Popover placement="right">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>Right</AntButton>
+ </Popover>
+ <Popover placement="rightBottom">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>RB</AntButton>
+ </Popover>
+ </div>
+ <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
+ <Popover placement="bottomLeft">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>BL</AntButton>
+ </Popover>
+ <Popover placement="bottom">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>Bottom</AntButton>
+ </Popover>
+ <Popover placement="bottomRight">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <template slot="title">
+ <span>Title</span>
+ </template>
+ <AntButton>BR</AntButton>
+ </Popover>
+ </div>
+</div>
+</template>
+
+<script>
+import { Popover, Button } from 'antd'
+export default {
+ data () {
+ return {
+ buttonWidth: 70,
+ }
+ },
+ components: {
+ Popover,
+ AntButton: Button,
+ },
+}
+</script>
+<style>
+#components-popover-demo-placement .ant-btn {
+ width: 70px;
+ text-align: center;
+ padding: 0;
+ margin-right: 8px;
+ margin-bottom: 8px;
+}
+</style>
diff --git a/components/popover/demo/triggerType.vue b/components/popover/demo/triggerType.vue
new file mode 100644
index 000000000..bbf14fb98
--- /dev/null
+++ b/components/popover/demo/triggerType.vue
@@ -0,0 +1,45 @@
+<template>
+<div>
+<md>
+## 三种触发方式
+鼠标移入、聚集、点击。
+</md>
+ <Popover title="Title" trigger="hover">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <AntButton type="primary">Hover me</AntButton>
+ </Popover>
+ <Popover title="Title" trigger="focus">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <AntButton type="primary">Focus me</AntButton>
+ </Popover>
+ <Popover title="Title" trigger="click">
+ <template slot="content">
+ <div>
+ <p>Content</p>
+ <p>Content</p>
+ </div>
+ </template>
+ <AntButton type="primary">Click me</AntButton>
+ </Popover>
+</div>
+</template>
+
+<script>
+import { Popover, Button } from 'antd'
+export default {
+ components: {
+ Popover,
+ AntButton: Button,
+ },
+}
+</script>
diff --git a/components/popover/index.vue b/components/popover/index.vue
new file mode 100644
index 000000000..1089d6f0f
--- /dev/null
+++ b/components/popover/index.vue
@@ -0,0 +1,60 @@
+<script>
+import Tooltip from '../tooltip'
+import abstractTooltipProps from '../tooltip/abstractTooltipProps'
+import PropTypes from '../_util/vue-types'
+import { getOptionProps, getComponentFromProp } from '../_util/props-util'
+
+export default {
+ name: 'popover',
+ props: {
+ ...abstractTooltipProps,
+ prefixCls: PropTypes.string.def('ant-popover'),
+ transitionName: PropTypes.string.def('zoom-big'),
+ content: PropTypes.any,
+ title: PropTypes.any,
+ },
+ model: {
+ prop: 'visible',
+ event: 'change',
+ },
+ methods: {
+ getPopupDomNode () {
+ return this.$refs.tooltip.getPopupDomNode()
+ },
+ },
+
+ render (h) {
+ const { title, prefixCls, content, $slots } = this
+ const props = getOptionProps(this)
+ delete props.title
+ delete props.content
+ const tooltipProps = {
+ props: {
+ ...props,
+ },
+ ref: 'tooltip',
+ on: this.$listeners,
+ }
+ return (
+ <Tooltip
+ {...tooltipProps}
+ >
+ <template slot='title'>
+ <div>
+ {(title || $slots.title) &&
+ <div class={`${prefixCls}-title`}>
+ {getComponentFromProp(this, h, 'title')}
+ </div>
+ }
+ <div class={`${prefixCls}-inner-content`}>
+ {getComponentFromProp(this, h, 'content')}
+ </div>
+ </div>
+ </template>
+ {this.$slots.default}
+ </Tooltip>
+ )
+ },
+}
+
+</script>
diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md
new file mode 100644
index 000000000..986b670c5
--- /dev/null
+++ b/components/popover/index.zh-CN.md
@@ -0,0 +1,27 @@
+---
+category: Components
+subtitle: 气泡卡片
+type: Data Display
+title: Popover
+---
+
+点击/鼠标移入元素，弹出气泡式的卡片浮层。
+
+## 何时使用
+
+当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。
+
+和 `Tooltip` 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| content | 卡片内容 | string\|function\|slot | 无 |
+| title | 卡片标题 | string\|function\|slot | 无 |
+
+更多属性请参考 [Tooltip](/components/tooltip/#API)。
+
+## 注意
+
+请确保 `Popover` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。
diff --git a/components/popover/style/index.js b/components/popover/style/index.js
new file mode 100644
index 000000000..cf31ed80f
--- /dev/null
+++ b/components/popover/style/index.js
@@ -0,0 +1,2 @@
+import '../../style/index.less'
+import './index.less'
diff --git a/components/popover/style/index.less b/components/popover/style/index.less
new file mode 100644
index 000000000..227d2bc5a
--- /dev/null
+++ b/components/popover/style/index.less
@@ -0,0 +1,221 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+
+@popover-prefix-cls: ~"@{ant-prefix}-popover";
+
+.@{popover-prefix-cls} {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: @zindex-popover;
+ cursor: auto;
+ user-select: text;
+ white-space: normal;
+ font-size: @font-size-base;
+ line-height: @line-height-base;
+ font-weight: normal;
+ text-align: left;
+
+ &:after {
+ content: "";
+ position: absolute;
+ background: rgba(255, 255, 255, 0.01);
+ }
+
+ &-hidden {
+ display: none;
+ }
+
+ // Offset the popover to account for the popover arrow
+ &-placement-top,
+ &-placement-topLeft,
+ &-placement-topRight {
+ padding-bottom: @popover-distance;
+ }
+
+ &-placement-right,
+ &-placement-rightTop,
+ &-placement-rightBottom {
+ padding-left: @popover-distance;
+ }
+
+ &-placement-bottom,
+ &-placement-bottomLeft,
+ &-placement-bottomRight {
+ padding-top: @popover-distance;
+ }
+
+ &-placement-left,
+ &-placement-leftTop,
+ &-placement-leftBottom {
+ padding-right: @popover-distance;
+ }
+
+ &-inner {
+ background-color: @popover-bg;
+ background-clip: padding-box;
+ border-radius: @border-radius-base;
+ box-shadow: @box-shadow-base;
+ }
+
+ &-title {
+ min-width: @popover-min-width;
+ margin: 0; // reset heading margin
+ padding: 8px 16px;
+ min-height: 32px;
+ border-bottom: 1px solid @border-color-split;
+ color: @popover-color;
+ font-weight: 500;
+ }
+
+ &-inner-content {
+ padding: 8px 16px;
+ color: @popover-color;
+ }
+
+ &-message {
+ padding: 8px 0 16px;
+ font-size: @font-size-base;
+ color: @popover-color;
+ > .@{iconfont-css-prefix} {
+ color: @warning-color;
+ line-height: 17px;
+ position: absolute;
+ }
+ &-title {
+ padding-left: 20px;
+ }
+ }
+
+ &-buttons {
+ text-align: right;
+ margin-bottom: 8px;
+ button {
+ margin-left: 8px;
+ }
+ }
+
+ // Arrows
+ // .popover-arrow is outer, .popover-arrow:after is inner
+
+ &-arrow {
+ &,
+ &:after {
+ position: absolute;
+ display: block;
+ width: 0;
+ height: 0;
+ border-color: transparent;
+ border-style: solid;
+ }
+ }
+
+ &-arrow {
+ border-width: @popover-arrow-outer-width;
+ }
+
+ &-arrow:after {
+ border-width: @popover-arrow-width;
+ content: "";
+ }
+
+ &-placement-top > &-content > &-arrow,
+ &-placement-topLeft > &-content > &-arrow,
+ &-placement-topRight > &-content > &-arrow {
+ border-bottom-width: 0;
+ border-top-color: @popover-arrow-outer-color;
+ bottom: @popover-distance - @popover-arrow-outer-width;
+ &:after {
+ content: " ";
+ bottom: 1px;
+ margin-left: -@popover-arrow-width;
+ border-bottom-width: 0;
+ border-top-color: @popover-arrow-color;
+ }
+ }
+ &-placement-top > &-content > &-arrow {
+ left: 50%;
+ margin-left: -@popover-arrow-outer-width;
+ }
+ &-placement-topLeft > &-content > &-arrow {
+ left: 16px;
+ }
+ &-placement-topRight > &-content > &-arrow {
+ right: 16px;
+ }
+
+ &-placement-right > &-content > &-arrow,
+ &-placement-rightTop > &-content > &-arrow,
+ &-placement-rightBottom > &-content > &-arrow {
+ left: @popover-distance - @popover-arrow-outer-width;
+ border-left-width: 0;
+ border-right-color: @popover-arrow-outer-color;
+ &:after {
+ content: " ";
+ left: 1px;
+ bottom: -@popover-arrow-width;
+ border-left-width: 0;
+ border-right-color: @popover-arrow-color;
+ }
+ }
+ &-placement-right > &-content > &-arrow {
+ top: 50%;
+ margin-top: -@popover-arrow-outer-width;
+ }
+ &-placement-rightTop > &-content > &-arrow {
+ top: 12px;
+ }
+ &-placement-rightBottom > &-content > &-arrow {
+ bottom: 12px;
+ }
+
+ &-placement-bottom > &-content > &-arrow,
+ &-placement-bottomLeft > &-content > &-arrow,
+ &-placement-bottomRight > &-content > &-arrow {
+ border-top-width: 0;
+ border-bottom-color: @popover-arrow-outer-color;
+ top: @popover-distance - @popover-arrow-outer-width;
+ &:after {
+ content: " ";
+ top: 1px;
+ margin-left: -@popover-arrow-width;
+ border-top-width: 0;
+ border-bottom-color: @popover-arrow-color;
+ }
+ }
+ &-placement-bottom > &-content > &-arrow {
+ left: 50%;
+ margin-left: -@popover-arrow-outer-width;
+ }
+ &-placement-bottomLeft > &-content > &-arrow {
+ left: 16px;
+ }
+ &-placement-bottomRight > &-content > &-arrow {
+ right: 16px;
+ }
+
+ &-placement-left > &-content > &-arrow,
+ &-placement-leftTop > &-content > &-arrow,
+ &-placement-leftBottom > &-content > &-arrow {
+ right: @popover-distance - @popover-arrow-outer-width;
+ border-right-width: 0;
+ border-left-color: @popover-arrow-outer-color;
+ &:after {
+ content: " ";
+ right: 1px;
+ border-right-width: 0;
+ border-left-color: @popover-arrow-color;
+ bottom: -@popover-arrow-width;
+ }
+ }
+ &-placement-left > &-content > &-arrow {
+ top: 50%;
+ margin-top: -@popover-arrow-outer-width;
+ }
+ &-placement-leftTop > &-content > &-arrow {
+ top: 12px;
+ }
+ &-placement-leftBottom > &-content > &-arrow {
+ bottom: 12px;
+ }
+}
diff --git a/components/radio/Radio.vue b/components/radio/Radio.vue
index 60e4b6bfe..616f3c765 100644
--- a/components/radio/Radio.vue
+++ b/components/radio/Radio.vue
@@ -13,7 +13,7 @@
</label>
</template>
<script>
-import hasProp from '../_util/hasProp'
+import hasProp from '../_util/props-util'
export default {
name: 'Radio',
props: {
diff --git a/components/rate/Rate.vue b/components/rate/Rate.vue
index 7f22e1144..4ccedf738 100644
--- a/components/rate/Rate.vue
+++ b/components/rate/Rate.vue
@@ -3,7 +3,7 @@ import Star from './Star.vue'
import Icon from '../icon'
import { getOffsetLeft } from './util'
import { cloneVNodes } from '../_util/vnode'
-import hasProp from '../_util/hasProp'
+import hasProp from '../_util/props-util'
export default {
name: 'Rate',
diff --git a/components/style.js b/components/style.js
index ec801667d..108572eed 100644
--- a/components/style.js
+++ b/components/style.js
@@ -10,5 +10,8 @@ import './avatar/style'
import './badge/style'
import './tabs/style'
import './input/style'
+import './tooltip/style'
+import './popover/style'
+import './popconfirm/style'
import './menu/style'
diff --git a/components/tabs/index.js b/components/tabs/index.js
index 087cc67eb..b91a2b6fb 100644
--- a/components/tabs/index.js
+++ b/components/tabs/index.js
@@ -1,6 +1,6 @@
import Tabs from './index.vue'
-import TabPane from './TabPane'
-import TabContent from './TabContent'
+import TabPane from './src/TabPane'
+import TabContent from './src/TabContent'
Tabs.TabPane = TabPane
export default Tabs
export { TabPane, TabContent }
diff --git a/components/tabs/index.vue b/components/tabs/index.vue
index 703e8af1d..aed9aa73b 100644
--- a/components/tabs/index.vue
+++ b/components/tabs/index.vue
@@ -1,7 +1,7 @@
<script>
-import Tabs from './Tabs'
+import Tabs from './src/Tabs'
import isFlexSupported from '../_util/isFlexSupported'
-import hasProp from '../_util/hasProp'
+import hasProp from '../_util/props-util'
export default {
props: {
prefixCls: { type: String, default: 'ant-tabs' },
@@ -75,7 +75,6 @@ export default {
tabPosition,
tabBarStyle,
hideAdd,
- onTabClick,
onPrevClick,
onNextClick,
animated,
@@ -114,36 +113,38 @@ export default {
}
})
const tabBarProps = {
- inkBarAnimated,
- onTabClick,
- onPrevClick,
- onNextClick,
+ props: {
+ hideAdd,
+ removeTab: this.removeTab,
+ createNewTab: this.createNewTab,
+ inkBarAnimated,
+ },
+ on: {
+ // tabClick: onTabClick,
+ prevClick: onPrevClick,
+ nextClick: onNextClick,
+ },
style: tabBarStyle,
- hideAdd,
- removeTab: this.removeTab,
- createNewTab: this.createNewTab,
}
const tabContentProps = {
- animated: tabPaneAnimated,
- animatedWithMargin: true,
+ props: {
+ animated: tabPaneAnimated,
+ animatedWithMargin: true,
+ },
}
- const self = this
const tabsProps = {
props: {
prefixCls,
tabBarPosition: tabPosition,
- onChange: this.handleChange,
tabBarProps: tabBarProps,
tabContentProps: tabContentProps,
destroyInactiveTabPane,
defaultActiveKey,
type,
- onTabClick: this.onTabClick,
},
on: {
- change (val) {
- self.handleChange(val)
- },
+ change: this.handleChange,
+ tabClick: this.onTabClick,
},
}
if (hasProp(this, 'activeKey')) {
diff --git a/components/tabs/index.zh-CN b/components/tabs/index.zh-CN.md
similarity index 100%
rename from components/tabs/index.zh-CN
rename to components/tabs/index.zh-CN.md
diff --git a/components/tabs/InkTabBar.vue b/components/tabs/src/InkTabBar.vue
similarity index 100%
rename from components/tabs/InkTabBar.vue
rename to components/tabs/src/InkTabBar.vue
diff --git a/components/tabs/InkTabBarMixin.js b/components/tabs/src/InkTabBarMixin.js
similarity index 100%
rename from components/tabs/InkTabBarMixin.js
rename to components/tabs/src/InkTabBarMixin.js
diff --git a/components/tabs/KeyCode.js b/components/tabs/src/KeyCode.js
similarity index 100%
rename from components/tabs/KeyCode.js
rename to components/tabs/src/KeyCode.js
diff --git a/components/tabs/ScrollableInkTabBar.vue b/components/tabs/src/ScrollableInkTabBar.vue
similarity index 77%
rename from components/tabs/ScrollableInkTabBar.vue
rename to components/tabs/src/ScrollableInkTabBar.vue
index f04450b9f..5a65407d0 100644
--- a/components/tabs/ScrollableInkTabBar.vue
+++ b/components/tabs/src/ScrollableInkTabBar.vue
@@ -2,10 +2,11 @@
import InkTabBarMixin from './InkTabBarMixin'
import ScrollableTabBarMixin from './ScrollableTabBarMixin'
import TabBarMixin from './TabBarMixin'
+import BaseMixin from '../../_util/BaseMixin'
export default {
name: 'ScrollableInkTabBar',
- mixins: [TabBarMixin, InkTabBarMixin, ScrollableTabBarMixin],
+ mixins: [TabBarMixin, InkTabBarMixin, ScrollableTabBarMixin, BaseMixin],
render (h) {
const inkBarNode = this.getInkBarNode()
const tabs = this.getTabs(h)
diff --git a/components/tabs/ScrollableTabBar.vue b/components/tabs/src/ScrollableTabBar.vue
similarity index 78%
rename from components/tabs/ScrollableTabBar.vue
rename to components/tabs/src/ScrollableTabBar.vue
index 7abc2d748..7b38d9637 100644
--- a/components/tabs/ScrollableTabBar.vue
+++ b/components/tabs/src/ScrollableTabBar.vue
@@ -1,10 +1,11 @@
<script>
import ScrollableTabBarMixin from './ScrollableTabBarMixin'
import TabBarMixin from './TabBarMixin'
+import BaseMixin from '../../_util/BaseMixin'
export default {
name: 'ScrollableTabBar',
- mixins: [TabBarMixin, ScrollableTabBarMixin],
+ mixins: [TabBarMixin, ScrollableTabBarMixin, BaseMixin],
render (h) {
const inkBarNode = this.getInkBarNode()
const tabs = this.getTabs(h)
diff --git a/components/tabs/ScrollableTabBarMixin.js b/components/tabs/src/ScrollableTabBarMixin.js
similarity index 97%
rename from components/tabs/ScrollableTabBarMixin.js
rename to components/tabs/src/ScrollableTabBarMixin.js
index 6df86318b..d872ad5aa 100644
--- a/components/tabs/ScrollableTabBarMixin.js
+++ b/components/tabs/src/ScrollableTabBarMixin.js
@@ -6,8 +6,6 @@ function noop () {
export default {
props: {
scrollAnimated: { type: Boolean, default: true },
- onPrevClick: { type: Function, default: noop },
- onNextClick: { type: Function, default: noop },
},
data () {
@@ -201,7 +199,7 @@ export default {
},
prevClick (e) {
- this.$props.onPrevClick(e)
+ this.__emit('prevClick', e)
const navWrapNode = this.$refs.navWrap
const navWrapNodeWH = this.getOffsetWH(navWrapNode)
const { offset } = this
@@ -209,7 +207,7 @@ export default {
},
nextClick (e) {
- this.$props.onNextClick(e)
+ this.__emit('nextClick', e)
const navWrapNode = this.$refs.navWrap
const navWrapNodeWH = this.getOffsetWH(navWrapNode)
const { offset } = this
diff --git a/components/tabs/TabBar.vue b/components/tabs/src/TabBar.vue
similarity index 69%
rename from components/tabs/TabBar.vue
rename to components/tabs/src/TabBar.vue
index 423f97cc7..8e65f6a7d 100644
--- a/components/tabs/TabBar.vue
+++ b/components/tabs/src/TabBar.vue
@@ -1,9 +1,8 @@
<script>
import TabBarMixin from './TabBarMixin'
-function noop () {
-}
+import BaseMixin from '../../_util/BaseMixin'
export default {
- mixins: [TabBarMixin],
+ mixins: [TabBarMixin, BaseMixin],
name: 'TabBar',
props: {
prefixCls: {
@@ -15,14 +14,6 @@ export default {
type: String,
},
disabled: Boolean,
- onKeyDown: {
- default: noop,
- type: Function,
- },
- onTabClick: {
- default: noop,
- type: Function,
- },
activeKey: String,
panels: Array,
},
diff --git a/components/tabs/TabBarMixin.js b/components/tabs/src/TabBarMixin.js
similarity index 94%
rename from components/tabs/TabBarMixin.js
rename to components/tabs/src/TabBarMixin.js
index 5ebb0028d..56fc9b9cb 100644
--- a/components/tabs/TabBarMixin.js
+++ b/components/tabs/src/TabBarMixin.js
@@ -1,4 +1,4 @@
-import Icon from '../icon'
+import Icon from '../../icon'
function noop () {
}
export default {
@@ -12,14 +12,6 @@ export default {
type: String,
},
disabled: Boolean,
- onKeyDown: {
- default: noop,
- type: Function,
- },
- onTabClick: {
- default: noop,
- type: Function,
- },
activeKey: String,
panels: Array,
hideAdd: Boolean,
@@ -51,7 +43,7 @@ export default {
} else {
}
const onClick = () => {
- !disabled && this.onTabClick(tabKey)
+ !disabled && this.__emit('tabClick', tabKey)
}
let tabC = typeof tab === 'function' ? child.tab(h, tabKey) : tab
@@ -86,6 +78,9 @@ export default {
return rst
},
+ onKeyDown (e) {
+ this.__emit('keydown', e)
+ },
getRootNode (contents, createElement) {
const {
prefixCls, onKeyDown, tabBarPosition, hideAdd,
diff --git a/components/tabs/TabContent.vue b/components/tabs/src/TabContent.vue
similarity index 100%
rename from components/tabs/TabContent.vue
rename to components/tabs/src/TabContent.vue
diff --git a/components/tabs/TabPane.vue b/components/tabs/src/TabPane.vue
similarity index 100%
rename from components/tabs/TabPane.vue
rename to components/tabs/src/TabPane.vue
diff --git a/components/tabs/Tabs.vue b/components/tabs/src/Tabs.vue
similarity index 91%
rename from components/tabs/Tabs.vue
rename to components/tabs/src/Tabs.vue
index 1a80817e8..babb0f479 100644
--- a/components/tabs/Tabs.vue
+++ b/components/tabs/src/Tabs.vue
@@ -1,9 +1,10 @@
<script>
-import Icon from '../icon'
+import Icon from '../../icon'
import KeyCode from './KeyCode'
import TabContent from './TabContent'
import ScrollableInkTabBar from './ScrollableInkTabBar'
-import hasProp from '../_util/hasProp'
+import hasProp from '../../_util/props-util'
+import BaseMixin from '../../_util/BaseMixin'
function getDefaultActiveKey (t) {
let activeKey
t.$slots.default && t.$slots.default.forEach(({ componentOptions = {}, key: tabKey }) => {
@@ -23,8 +24,7 @@ function activeKeyIsValid (t, key) {
})
return key !== undefined && keys.indexOf(key) >= 0
}
-function noop () {
-}
+
export default {
name: 'Tabs',
components: { Icon },
@@ -32,6 +32,7 @@ export default {
prop: 'activeKey',
event: 'change',
},
+ mixins: [BaseMixin],
props: {
prefixCls: {
default: 'ant-tabs',
@@ -53,8 +54,6 @@ export default {
return ['line', 'card', 'editable-card'].includes(value)
},
},
- onChange: { type: Function, default: noop },
- onTabClick: { type: Function, default: noop },
},
data () {
return {
@@ -90,7 +89,7 @@ export default {
return activeKey
},
handleTabClick (activeKey) {
- this.onTabClick(activeKey)
+ this.__emit('tabClick', activeKey)
this.setActiveKey(activeKey)
},
@@ -112,7 +111,7 @@ export default {
if (!hasProp(this, 'activeKey')) {
this.stateActiveKey = activeKey
}
- this.onChange(activeKey)
+ this.__emit('change', activeKey)
}
},
@@ -172,25 +171,31 @@ export default {
})
const tabContentProps = {
props: {
- ...this.tabContentProps,
+ ...this.tabContentProps.props,
prefixCls,
tabBarPosition,
activeKey: stateActiveKey,
destroyInactiveTabPane,
- onChange: setActiveKey,
+ // onChange: setActiveKey,
+ },
+ on: {
+ change: setActiveKey,
},
}
const tabBarProps = {
props: {
- ...this.tabBarProps,
+ ...this.tabBarProps.props,
panels: panels,
prefixCls: prefixCls,
- onKeyDown: onNavKeyDown,
tabBarPosition: tabBarPosition,
- onTabClick: handleTabClick,
activeKey: stateActiveKey,
},
style: this.tabBarProps.style || {},
+ on: {
+ ...this.tabBarProps.on,
+ keydown: onNavKeyDown,
+ tabClick: handleTabClick,
+ },
}
const contents = [
<ScrollableInkTabBar
diff --git a/components/tabs/utils.js b/components/tabs/src/utils.js
similarity index 100%
rename from components/tabs/utils.js
rename to components/tabs/src/utils.js
diff --git a/components/tooltip/abstractTooltipProps.js b/components/tooltip/abstractTooltipProps.js
new file mode 100644
index 000000000..9faf70877
--- /dev/null
+++ b/components/tooltip/abstractTooltipProps.js
@@ -0,0 +1,19 @@
+import PropTypes from '../_util/vue-types'
+export default {
+ trigger: PropTypes.oneOf(['hover', 'focus', 'click']).def('hover'),
+ visible: PropTypes.bool,
+ 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.def({}),
+ 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),
+}
diff --git a/components/tooltip/demo/arrow-point-at-center.vue b/components/tooltip/demo/arrow-point-at-center.vue
new file mode 100644
index 000000000..643386649
--- /dev/null
+++ b/components/tooltip/demo/arrow-point-at-center.vue
@@ -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>
diff --git a/components/tooltip/demo/auto-adjust-overflow.vue b/components/tooltip/demo/auto-adjust-overflow.vue
new file mode 100644
index 000000000..585815999
--- /dev/null
+++ b/components/tooltip/demo/auto-adjust-overflow.vue
@@ -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>
diff --git a/components/tooltip/demo/basic.vue b/components/tooltip/demo/basic.vue
new file mode 100644
index 000000000..b60af9327
--- /dev/null
+++ b/components/tooltip/demo/basic.vue
@@ -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>
diff --git a/components/tooltip/demo/index.vue b/components/tooltip/demo/index.vue
index 178db3bff..b8c54ed5b 100644
--- a/components/tooltip/demo/index.vue
+++ b/components/tooltip/demo/index.vue
@@ -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>
diff --git a/components/tooltip/demo/placement.vue b/components/tooltip/demo/placement.vue
new file mode 100644
index 000000000..36aec0438
--- /dev/null
+++ b/components/tooltip/demo/placement.vue
@@ -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>
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index b93dd566a..4b5f7d8bc 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1,4 +1,3 @@
import ToolTip from './tooltip.vue'
-import './style'
export default ToolTip
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
new file mode 100644
index 000000000..9cecf0f03
--- /dev/null
+++ b/components/tooltip/index.zh-CN.md
@@ -0,0 +1,45 @@
+---
+category: Components
+subtitle: 文字提示
+type: Data Display
+title: Tooltip
+---
+
+简单的文字提示气泡框。
+
+## 何时使用
+
+鼠标移入则显示提示，移出消失，气泡浮层不承载复杂文本和操作。
+
+可用来代替系统默认的 `title` 提示，提供一个`按钮/文字/操作`的文案解释。
+
+## API
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 提示文字 | `string` `function` `slot` | 无 |
+
+### 共同的 API
+
+以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| arrowPointAtCenter | 箭头是否指向目标元素中 | boolean | `false` |
+| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
+| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
+| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 |
+| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
+| overlayClassName | 卡片类名 | string | 无 |
+| overlayStyle | 卡片样式 | object | 无 |
+| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
+| trigger | 触发行为，可选 `hover/focus/click` | string | hover |
+| visible(v-model) | 用于手动控制浮层显隐 | boolean | false |
+
+### 事件
+| 事件名称 | 说明 | 回调参数 |
+| visibleChange | 显示隐藏变换时触发 | (visible) |
+
+## 注意
+
+请确保 `Tooltip` 的子元素能接受 `mouseenter`、`mouseleave`、`focus`、`click` 事件。
diff --git a/components/tooltip/placements.js b/components/tooltip/placements.js
new file mode 100644
index 000000000..f3b6bd8e8
--- /dev/null
+++ b/components/tooltip/placements.js
@@ -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
+}
diff --git a/components/tooltip/src/Tooltip.vue b/components/tooltip/src/Tooltip.vue
new file mode 100644
index 000000000..67577d786
--- /dev/null
+++ b/components/tooltip/src/Tooltip.vue
@@ -0,0 +1,101 @@
+<script>
+import PropTypes from '../../_util/vue-types'
+import Trigger from '../../trigger'
+import { placements } from './placements'
+import hasProp from '../../_util/props-util'
+function noop () {}
+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,
+ 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()
+ },
+ },
+ 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,
+ afterPopupVisibleChange: afterVisibleChange,
+ popupTransitionName: transitionName,
+ popupAnimation: animation,
+ defaultPopupVisible: defaultVisible,
+ destroyPopupOnHide: destroyTooltipOnHide,
+ mouseLeaveDelay: mouseLeaveDelay,
+ popupStyle: overlayStyle,
+ mouseEnterDelay: mouseEnterDelay,
+ ...extraProps,
+ },
+ on: {
+ popupVisibleChange: this.$listeners.visibleChange || noop,
+ popupAlign: this.$listeners.popupAlign || noop,
+ },
+ ref: 'trigger',
+ }
+ return (<Trigger {...triggerProps}>
+ <template slot='popup'>
+ {this.getPopupElement(h)}
+ </template>
+ {this.$slots.default}
+ </Trigger>)
+ },
+}
+
+</script>
diff --git a/components/tooltip/src/index.js b/components/tooltip/src/index.js
new file mode 100644
index 000000000..331785904
--- /dev/null
+++ b/components/tooltip/src/index.js
@@ -0,0 +1,3 @@
+import Tooltip from './Tooltip'
+
+export default Tooltip
diff --git a/components/tooltip/src/placements.js b/components/tooltip/src/placements.js
new file mode 100644
index 000000000..80917822e
--- /dev/null
+++ b/components/tooltip/src/placements.js
@@ -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
diff --git a/components/tooltip/tooltip.vue b/components/tooltip/tooltip.vue
index 97065950d..c66fd4730 100644
--- a/components/tooltip/tooltip.vue
+++ b/components/tooltip/tooltip.vue
@@ -1,121 +1,127 @@
<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/props-util'
+import abstractTooltipProps from './abstractTooltipProps'
+
+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,
- },
+ ...abstractTooltipProps,
+ title: PropTypes.any,
+ },
+ model: {
+ prop: 'visible',
+ event: 'change',
},
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('change', 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 +141,48 @@ 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)
-
- 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 { $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
+ }
+ if (!children) {
+ return null
+ }
+ 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>
diff --git a/components/trigger/Popup.vue b/components/trigger/Popup.vue
index 1e68745ad..4587ad612 100644
--- a/components/trigger/Popup.vue
+++ b/components/trigger/Popup.vue
@@ -3,6 +3,7 @@ import PropTypes from '../_util/vue-types'
import Align from '../align'
import PopupInner from './PopupInner'
import LazyRenderBox from './LazyRenderBox'
+import { noop } from './utils'
export default {
props: {
@@ -56,13 +57,11 @@ 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)
+ this.$listeners.align && this.$listeners.align(popupDomNode, align)
},
getPopupDomNode () {
@@ -95,30 +94,17 @@ export default {
getClassName (currentAlignClassName) {
return `${this.$props.prefixCls} ${this.$props.popupClassName} ${currentAlignClassName}`
},
- onMouseEnter (e) {
- this.$emit('mouseenter', e)
- },
- 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
}
},
getPopupElement () {
- const { $props: props, onMouseEnter, onMouseLeave, $slots } = this
+ const { $props: props, $slots, $listeners } = this
const { align, visible, prefixCls, animation } = props
- const className = this.getClassName(this.currentAlignClassName ||
- props.getClassNameFromAlign(align))
+ const { mouseenter, mouseleave } = $listeners
+ this.currentAlignClassName = this.currentAlignClassName || props.getClassNameFromAlign(align)
+ const className = this.getClassName(this.currentAlignClassName)
// const hiddenClassName = `${prefixCls}-hidden`
if (!visible) {
this.currentAlignClassName = null
@@ -131,8 +117,8 @@ export default {
},
class: `${className}`,
on: {
- mouseenter: onMouseEnter,
- mouseleave: onMouseLeave,
+ mouseenter: mouseenter || noop,
+ mouseleave: mouseleave || noop,
},
ref: 'popupInstance',
style: { ...this.getZIndexStyle() },
@@ -144,7 +130,6 @@ export default {
}
return (<transition
{...transitionProps}
- onBeforeEnter={this.beforeEnter}
onAfterLeave={this.afterLeave}
>
<Align
diff --git a/components/trigger/PopupInner.vue b/components/trigger/PopupInner.vue
index 323452c8f..707e96223 100644
--- a/components/trigger/PopupInner.vue
+++ b/components/trigger/PopupInner.vue
@@ -8,22 +8,14 @@ export default {
prefixCls: PropTypes.string,
visible: PropTypes.bool,
},
- methods: {
- onMouseEnter (e) {
- this.$emit('mouseenter', e)
- },
- onMouseLeave (e) {
- this.$emit('mouseleave', e)
- },
- },
render () {
const { prefixCls, visible } = this.$props
- const { onMouseEnter, onMouseLeave } = this
+ const { $listeners } = this
+ const divProps = {
+ on: $listeners,
+ }
return (
- <div
- onMouseenter={onMouseEnter}
- onMouseleave={onMouseLeave}
- >
+ <div {...divProps}>
<LazyRenderBox class={`${prefixCls}-content`} visible={visible}>
{this.$slots.default}
</LazyRenderBox>
diff --git a/components/trigger/index.md b/components/trigger/index.md
index 6887d36f5..69f9cb643 100644
--- a/components/trigger/index.md
+++ b/components/trigger/index.md
@@ -140,13 +140,13 @@
</tr>
<tr>
<td>popupVisibleChange</td>
- <td>$emit(visible)</td>
+ <td>$emit</td>
<td></td>
<td>call when popup visible is changed</td>
</tr>
<tr>
<td>popupAlign</td>
- <td>$emit(popupDomNode, align)</td>
+ <td>$emit</td>
<td></td>
<td>callback when popup node is aligned</td>
</tr>
diff --git a/components/trigger/index.vue b/components/trigger/index.vue
index 4c08b339e..e65c0bc27 100644
--- a/components/trigger/index.vue
+++ b/components/trigger/index.vue
@@ -1,12 +1,12 @@
<script>
import PropTypes from '../_util/vue-types'
import contains from '../_util/Dom/contains'
-import hasProp from '../_util/hasProp'
+import hasProp from '../_util/props-util'
import addEventListener from '../_util/Dom/addEventListener'
import warning from '../_util/warning'
import Popup from './Popup'
-import { getAlignFromPlacement, getPopupClassNameFromAlign } from './utils'
-import StateMixin from '../_util/StateMixin'
+import { getAlignFromPlacement, getPopupClassNameFromAlign, noop } from './utils'
+import BaseMixin from '../_util/BaseMixin'
import { cloneElement, cloneVNode } from '../_util/vnode'
function returnEmptyString () {
@@ -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),
@@ -62,7 +62,7 @@ export default {
maskAnimation: PropTypes.string,
},
- mixins: [StateMixin],
+ mixins: [BaseMixin],
data () {
const props = this.$props
let popupVisible
@@ -96,7 +96,7 @@ export default {
},
sPopupVisible (val) {
this.$nextTick(() => {
- this.$emit('afterPopupVisibleChange', val)
+ this.afterPopupVisibleChange(val)
})
},
},
@@ -258,11 +258,10 @@ export default {
},
getRootDomNode () {
- console.log('this.$el.children', this.$el.children)
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
@@ -283,10 +282,7 @@ export default {
}
return popupAlign
},
- onPopupAlign () {
- this.$emit('popupAlign', ...arguments)
- },
- getComponent () {
+ getComponent (h) {
const mouseProps = {}
if (this.isMouseEnterToShow()) {
mouseProps.mouseenter = this.onPopupMouseenter
@@ -295,8 +291,8 @@ export default {
mouseProps.mouseleave = this.onPopupMouseleave
}
const { prefixCls, destroyPopupOnHide, sPopupVisible,
- popupStyle, popupClassName, action, onPopupAlign,
- popupAnimation, getPopupClassFromAlign, getRootDomNode,
+ popupStyle, popupClassName, action,
+ popupAnimation, handleGetPopupClassFromAlign, getRootDomNode,
mask, zIndex, popupTransitionName, getPopupAlign,
maskAnimation, maskTransitionName, popup, $slots, getContainer } = this
const popupProps = {
@@ -307,7 +303,7 @@ export default {
action,
align: getPopupAlign(),
animation: popupAnimation,
- getClassNameFromAlign: getPopupClassFromAlign,
+ getClassNameFromAlign: handleGetPopupClassFromAlign,
getRootDomNode,
mask,
zIndex,
@@ -318,7 +314,7 @@ export default {
popupClassName,
},
on: {
- align: onPopupAlign,
+ align: this.$listeners.popupAlign || noop,
...mouseProps,
},
ref: 'popup',
@@ -329,7 +325,7 @@ export default {
{...popupProps}
ref='popup'
>
- {typeof popup === 'function' ? popup() : popup}
+ {typeof popup === 'function' ? popup(h) : popup}
{popup === undefined ? $slots.popup : null}
</Popup>
)
@@ -359,7 +355,7 @@ export default {
})
this.$forceUpdate()
}
- this.$emit('popupVisibleChange', sPopupVisible)
+ this.$listeners.popupVisibleChange && this.$listeners.popupVisibleChange(sPopupVisible)
}
},
@@ -473,7 +469,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)
@@ -522,7 +518,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
}
diff --git a/components/trigger/utils.js b/components/trigger/utils.js
index e2af70378..eddd8178f 100644
--- a/components/trigger/utils.js
+++ b/components/trigger/utils.js
@@ -21,7 +21,5 @@ export function getPopupClassNameFromAlign (builtinPlacements, prefixCls, align)
}
return ''
}
-
-export function saveRef (name, component) {
- this[name] = component
+export function noop () {
}
diff --git a/contributors.md b/contributors.md
index 031d1dac8..9f097fc4c 100644
--- a/contributors.md
+++ b/contributors.md
@@ -7,6 +7,10 @@ Checkbox | done
Radio | done
Tabs | done
Tag | done
+ToolTip | done
+Popconfirm
+Popover | done
+Menu
Carousel
Mention
Input | done |select完成后补全demo
@@ -22,18 +26,14 @@ TimePicker
##万
Grid
Col
-ToolTip
Affix
Alert
BackTop
Dropdown
Layout
message
-Menu
Modal
notification
-Popconfirm
-Popover
Anchor
Tree
TreeSelect
diff --git a/examples/index.less b/examples/index.less
index 89a9f27d5..ac6ec4a44 100644
--- a/examples/index.less
+++ b/examples/index.less
@@ -1,3 +1,3 @@
-.icon-test{
- font-size: 35px;
+#app {
+ padding: 50px;
}
diff --git a/examples/md.vue b/examples/md.vue
index 9dcad410f..c907d5dda 100644
--- a/examples/md.vue
+++ b/examples/md.vue
@@ -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,
}
diff --git a/package.json b/package.json
index 118cbff8f..e5f1126a0 100644
--- a/package.json
+++ b/package.json
@@ -67,10 +67,9 @@
"style-loader": "^0.18.2",
"stylelint": "^8.1.1",
"stylelint-config-standard": "^17.0.0",
- "vue": "^2.4.4",
"vue-loader": "^13.0.5",
"vue-router": "^3.0.1",
- "vue-template-compiler": "^2.4.4",
+ "vue-template-compiler": "^2.5.13",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.8.2"
},