github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

add menu demo

pull/9/head
tangjinzhou 2018-01-19 18:01:43 +08:00
parent 3d5d001d77
commit e8daeb3f26
26 changed files with 562 additions and 323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/menu/MenuItem.vue
View File

@ -1,8 +1,7 @@
<script>
import { Item, itemProps } from './src/index'
import { getClass, getStyle } from '../_util/vnode'
import { getClass, getStyle, cloneVNodes } from '../_util/vnode'
import Tooltip from '../tooltip'
import { getComponentFromProp } from '../_util/props-util'
function noop () {}
export default {
props: itemProps,
@ -36,7 +35,7 @@ export default {
{...toolTipProps}
>
<template slot='title'>
{inlineCollapsed && props.level === 1 ? $slots.default : ''}
{inlineCollapsed && props.level === 1 ? cloneVNodes($slots.default, true) : ''}
</template>
<Item {...itemProps} ref='menuItem'>
{$slots.default}

141
components/menu/demo/antd.vue
View File

@ -1,141 +0,0 @@
<script>
import Clone from '../../_util/Clone'
import Menu, { SubMenu, Item as MenuItem, Divider } from '../src/index'
import animate from 'css-animation'
function handleSelect (info) {
console.log(info)
console.log(`selected ${info.key}`)
}
const animation = {
on: {
enter (node, done) {
let height
return animate(node, 'rc-menu-collapse', {
start () {
height = node.offsetHeight
node.style.height = 0
},
active () {
node.style.height = `${height}px`
},
end () {
node.style.height = ''
done()
},
})
},
leave (node, done) {
return animate(node, 'rc-menu-collapse', {
start () {
node.style.height = `${node.offsetHeight}px`
},
active () {
node.style.height = 0
},
end () {
node.style.height = ''
done()
},
})
},
},
props: {
appear: false,
},
}
export default {
methods: {
},
render () {
const nestSubMenu = () => (<SubMenu title={<span>sub menu 2</span>} key='4'>
<MenuItem key='4-1'>inner inner</MenuItem>
<Divider/>
<SubMenu
key='4-2'
title={<span>sub menu 3</span>}
>
<SubMenu title='sub 4-2-0' key='4-2-0'>
<MenuItem key='4-2-0-1'>inner inner</MenuItem>
<MenuItem key='4-2-0-2'>inner inner2</MenuItem>
</SubMenu>
<MenuItem key='4-2-1'>inn</MenuItem>
<SubMenu title={<span>sub menu 4</span>} key='4-2-2'>
<MenuItem key='4-2-2-1'>inner inner</MenuItem>
<MenuItem key='4-2-2-2'>inner inner2</MenuItem>
</SubMenu>
<SubMenu title='sub 4-2-3' key='4-2-3'>
<MenuItem key='4-2-3-1'>inner inner</MenuItem>
<MenuItem key='4-2-3-2'>inner inner2</MenuItem>
</SubMenu>
</SubMenu>
</SubMenu>)
const onOpenChange = (value) => {
console.log('onOpenChange', value, this.$refs)
}
const commonMenu = () => (
<Menu onSelect={handleSelect} onOpenChange={onOpenChange} onClick={(e) => console.log('click', e)}>
<SubMenu ref='test' key='1' title={<span>sub menu</span>}>
<MenuItem key='1-1'>
0-1
</MenuItem>
<MenuItem key='1-2' disabled>0-2</MenuItem>
</SubMenu>
{nestSubMenu()}
<MenuItem key='2'>1</MenuItem>
<MenuItem key='3'>outer</MenuItem>
<MenuItem disabled>disabled</MenuItem>
<MenuItem key='5'>outer3</MenuItem>
</Menu>
)
return (
<div style={{ margin: '20px' }}>
<h2>antd menu</h2>
<div>
<h3>horizontal</h3>
<div style={{ margin: '20px', width: '800px', position: 'relative' }}>
<Clone childProps={{
mode: 'horizontal',
openAnimation: 'rc-menu-open-slide-up',
}} >
{commonMenu()}
</Clone>
</div>
{/* <h3>horizontal and click</h3>
<div style={{ margin: '20px', width: '800px' }}>
<Clone childProps={{
mode: 'horizontal',
openAnimation: 'rc-menu-open-slide-up',
triggerSubMenuAction: 'click',
defaultOpenKeys: ['1'],
}} >
{commonMenu()}
</Clone>
</div>
<h3>vertical</h3>
<div style={{ margin: '20px', width: '200px' }}>
<Clone childProps={{
mode: 'vertical',
openAnimation: 'rc-menu-open-zoom',
}} >
{commonMenu()}
</Clone></div>
<h3>inline</h3>
<div style={{ margin: '20px', width: '400px' }}><Clone childProps={{
mode: 'inline',
defaultOpenKeys: ['1'],
defaultSelectedKeys: ['1-2', '4-1'],
openAnimation: animation,
}} >
{commonMenu()}
</Clone></div>*/}
</div>
</div>
)
},
}
</script>

28
components/menu/demo/index.vue Normal file
View File

@ -0,0 +1,28 @@
<template>
<div>
<Horizontal />
<InlineCollapsed />
<SiderCurrent />
<SwitchMode />
<Theme />
<Vertical />
</div>
</template>
<script>
import Horizontal from './horizontal'
import InlineCollapsed from './inline-collapsed'
import SiderCurrent from './sider-current'
import SwitchMode from './switch-mode'
import Theme from './theme'
import Vertical from './vertical'
export default {
components: {
Horizontal,
InlineCollapsed,
SiderCurrent,
SwitchMode,
Theme,
Vertical,
},
}
</script>

11
components/menu/demo/inline-collapsed.vue
View File

@ -56,22 +56,13 @@ const MenuItem = Menu.Item
export default {
data () {
return {
collapsed: true,
collapsed: false,
}
},
methods: {
toggleCollapsed () {
this.collapsed = !this.collapsed
},
con1 () {
console.log(111)
},
con2 () {
console.log(222)
},
con3 () {
console.log(333)
},
},
components: {
Menu,

79
components/menu/demo/inline.vue Normal file
View File

@ -0,0 +1,79 @@
<template>
<div>
<md>
## 内嵌菜单
垂直菜单，子菜单内嵌在菜单区域。
</md>
<Menu
@click="handleClick"
style="width: 256px"
:defaultSelectedKeys="['1']"
:openKeys.sync="openKeys"
mode="inline"
>
<SubMenu key="sub1" @titleClick="titleClick">
<span slot="title"><Icon type="mail" /><span>Navigation One</span></span>
<MenuItemGroup key="g1">
<template slot="title"><Icon type="qq" /><span>Item 1</span></template>
<MenuItem key="1">Option 1</MenuItem>
<MenuItem key="2">Option 2</MenuItem>
</MenuItemGroup>
<MenuItemGroup key="g2" title="Item 2">
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
</MenuItemGroup>
</SubMenu>
<SubMenu key="sub2" @titleClick="titleClick">
<span slot="title"><Icon type="appstore" /><span>Navigation Two</span></span>
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
<SubMenu key="sub3" title="Submenu">
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub4">
<span slot="title"><Icon type="setting" /><span>Navigation Three</span></span>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
<MenuItem key="11">Option 11</MenuItem>
<MenuItem key="12">Option 12</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
current: ['mail'],
openKeys: ['sub1'],
}
},
methods: {
handleClick (e) {
console.log('click', e)
},
titleClick (e) {
console.log('titleClick', e)
},
},
watch: {
openKeys (val) {
console.log('openKeys', val)
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
},
}
</script>

70
components/menu/demo/sider-current.vue Normal file
View File

@ -0,0 +1,70 @@
<template>
<div>
<md>
## 只展开当前父级菜单
点击菜单，收起其他展开的所有菜单，保持菜单聚焦简洁。
</md>
<Menu
mode="inline"
:openKeys="openKeys"
@openChange="onOpenChange"
style="width: 256px"
>
<SubMenu key="sub1">
<span slot="title"><Icon type="mail" /><span>Navigation One</span></span>
<MenuItem key="1">Option 1</MenuItem>
<MenuItem key="2">Option 2</MenuItem>
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
</SubMenu>
<SubMenu key="sub2">
<span slot="title"><Icon type="appstore" /><span>Navigation Two</span></span>
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
<SubMenu key="sub3" title="Submenu">
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub4">
<span slot="title"><Icon type="setting" /><span>Navigation Three</span></span>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
<MenuItem key="11">Option 11</MenuItem>
<MenuItem key="12">Option 12</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
openKeys: ['sub1'],
}
},
methods: {
onOpenChange (openKeys) {
const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1)
if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
this.openKeys = openKeys
} else {
this.openKeys = latestOpenKey ? [latestOpenKey] : []
}
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
},
}
</script>

76
components/menu/demo/switch-mode.vue Normal file
View File

@ -0,0 +1,76 @@
<template>
<div>
<md>
## 切换菜单类型
展示动态切换模式。
</md>
<Checkbox @change="changeMode" /> Change Mode
<span className="ant-divider" style="margin: 0 1em"/>
<Checkbox @change="changeTheme" /> Change Theme
<br />
<br />
<Menu
style="width: 256px"
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
:mode="mode"
:theme="theme"
>
<MenuItem key="1">
<Icon type="mail" />
Navigation One
</MenuItem>
<MenuItem key="2">
<Icon type="calendar" />
Navigation Two
</MenuItem>
<SubMenu key="sub1">
<span slot="title"><Icon type="appstore" /><span>Navigation Three</span></span>
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
<SubMenu key="sub1-2" title="Submenu">
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub2">
<span slot="title"><Icon type="setting" /><span>Navigation Four</span></span>
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon, Checkbox } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
mode: 'inline',
theme: 'light',
}
},
methods: {
changeMode ({ target }) {
this.mode = target.checked ? 'vertical' : 'inline'
},
changeTheme ({ target }) {
this.theme = target.checked ? 'dark' : 'light'
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
Checkbox,
},
}
</script>

77
components/menu/demo/theme.vue Normal file
View File

@ -0,0 +1,77 @@
<template>
<div>
<md>
## 主题
内建了两套主题 `light|dark`，默认 `light`。
</md>
<Checkbox @change="changeTheme" /> Change Theme
<br />
<br />
<Menu
style="width: 256px"
:defaultSelectedKeys="['1']"
:defaultOpenKeys="['sub1']"
mode="inline"
:theme="theme"
:selectedKeys="[current]"
@click="handleClick"
>
<MenuItem key="1">
<Icon type="mail" />
Navigation One
</MenuItem>
<MenuItem key="2">
<Icon type="calendar" />
Navigation Two
</MenuItem>
<SubMenu key="sub1">
<span slot="title"><Icon type="appstore" /><span>Navigation Three</span></span>
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
<SubMenu key="sub1-2" title="Submenu">
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub2">
<span slot="title"><Icon type="setting" /><span>Navigation Four</span></span>
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon, Checkbox } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
data () {
return {
current: '1',
theme: 'dark',
}
},
methods: {
handleClick (e) {
console.log('click ', e)
this.current = e.key
},
changeTheme ({ target }) {
this.theme = target.checked ? 'light' : 'dark'
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
Checkbox,
},
}
</script>

60
components/menu/demo/vertical.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div>
<md>
## 垂直菜单
子菜单是弹出的形式。
</md>
<Menu
style="width: 256px"
mode="vertical"
@click="handleClick"
>
<MenuItem key="1">
<Icon type="mail" />
Navigation One
</MenuItem>
<MenuItem key="2">
<Icon type="calendar" />
Navigation Two
</MenuItem>
<SubMenu key="sub1">
<span slot="title"><Icon type="appstore" /><span>Navigation Three</span></span>
<MenuItem key="3">Option 3</MenuItem>
<MenuItem key="4">Option 4</MenuItem>
<SubMenu key="sub1-2" title="Submenu">
<MenuItem key="5">Option 5</MenuItem>
<MenuItem key="6">Option 6</MenuItem>
</SubMenu>
</SubMenu>
<SubMenu key="sub2">
<span slot="title"><Icon type="setting" /><span>Navigation Four</span></span>
<MenuItem key="7">Option 7</MenuItem>
<MenuItem key="8">Option 8</MenuItem>
<MenuItem key="9">Option 9</MenuItem>
<MenuItem key="10">Option 10</MenuItem>
</SubMenu>
</Menu>
</div>
</template>
<script>
import { Menu, Icon, Checkbox } from 'antd'
const SubMenu = Menu.SubMenu
const MenuItemGroup = Menu.ItemGroup
const MenuItem = Menu.Item
export default {
methods: {
handleClick (e) {
console.log('click ', e)
},
},
components: {
Menu,
Icon,
SubMenu,
MenuItemGroup,
MenuItem,
Checkbox,
},
}
</script>

1
components/menu/index.vue
View File

@ -37,7 +37,6 @@ export default {
return {
inlineCollapsed: this.getInlineCollapsed(),
getInlineCollapsed: this.getInlineCollapsed,
antdMenuTheme: this.$props.theme,
}
},
mixins: [BaseMixin],

81
components/menu/index.zh-CN.md Normal file
View File

@ -0,0 +1,81 @@
---
category: Components
cols: 1
type: Navigation
title: Menu
subtitle: 导航菜单
---
为页面和功能提供导航的菜单列表。
## 何时使用
导航菜单是一个网站的灵魂，用户依赖导航在各个页面中进行跳转。一般分为顶部导航和侧边导航，顶部导航提供全局性的类目和功能，侧边导航提供多级结构来收纳和排列网站架构。
更多布局和导航的使用可以参考：[通用布局](/components/layout)。
## API
```html
<Menu>
<Menu.Item>菜单项</Menu.Item>
<SubMenu title="子菜单">
<Menu.Item>子菜单项</Menu.Item>
</SubMenu>
</Menu>
```
### Menu
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | |
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | string: `vertical` `vertical-right` `horizontal` `inline` | `vertical` |
| multiple | 是否允许多选 | boolean | false |
| openKeys(.sync) | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | |
| selectable | 是否允许选中 | boolean | true |
| selectedKeys(v-model) | 当前选中的菜单项 key 数组 | string\[] | |
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 |
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 |
| theme | 主题颜色 | string: `light` `dark` | `light` |
### Menu事件
| 事件名称 | 说明 | 回调参数 |
| click | 点击 MenuItem 调用此函数 | function({ item, key, keyPath }) |
| deselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, selectedKeys }) |
| openChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) |
| select | 被选中时调用 | function({ item, key, selectedKeys }) |
### Menu.Item
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false |
| key | item 的唯一标志 | string | |
### Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> | |
| disabled | 是否禁用 | boolean | false |
| key | 唯一标志 | string | |
| title | 子菜单项值 | string\|slot | |
### SubMenu事件
| 事件名称 | 说明 | 回调参数 |
| titleClick | 点击子菜单标题 | ({ key, domEvent }) |
### Menu.ItemGroup
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 分组标题 | string\|\|function|\slot | |
### Menu.Divider
菜单项分割线，只用在弹出菜单内。

2
components/menu/src/MenuItem.vue
View File

@ -1,7 +1,7 @@
<script>
import PropTypes from '../../_util/vue-types'
import KeyCode from '../../_util/KeyCode'
import { noop } from './util'
// import { noop } from './util'
import BaseMixin from '../../_util/BaseMixin'
const props = {
rootPrefixCls: PropTypes.string,

5
components/menu/src/MenuItemGroup.vue
View File

@ -1,5 +1,6 @@
<script>
import PropTypes from '../../_util/vue-types'
import { getComponentFromProp } from '../../_util/props-util'
const MenuItemGroup = {
name: 'MenuItemGroup',
@ -10,7 +11,7 @@ const MenuItemGroup = {
className: PropTypes.string,
rootPrefixCls: PropTypes.string,
disabled: PropTypes.bool.def(true),
title: PropTypes.any.def(''),
title: PropTypes.any,
},
isMenuItemGroup: true,
methods: {
@ -30,7 +31,7 @@ const MenuItemGroup = {
class={titleClassName}
title={typeof props.title === 'string' ? props.title : undefined}
>
{props.title}
{getComponentFromProp(this, 'title')}
</div>
<ul class={listClassName}>
{this.$slots.default.map(this.renderInnerMenuItem)}

8
components/menu/src/SubMenu.vue
View File

@ -46,7 +46,6 @@ export default {
},
inject: {
parentMenuContext: { default: undefined },
antdMenuTheme: { default: 'light' },
},
mixins: [BaseMixin],
isSubMenu: true,
@ -214,8 +213,7 @@ export default {
onTitleClick (e) {
const { triggerSubMenuAction, eventKey } = this.$props
this.__emit('itemClick', {
this.$emit('titleClick', {
key: eventKey,
domEvent: e,
})
@ -360,7 +358,7 @@ export default {
render (h) {
const props = this.$props
const { rootPrefixCls, antdMenuTheme } = this
const { rootPrefixCls, parentMenuContext } = this
const isOpen = this.isOpen()
const prefixCls = this.getPrefixCls()
const isInlineMode = props.mode === 'inline'
@ -475,7 +473,7 @@ export default {
{!isInlineMode && (
<Trigger
prefixCls={prefixCls}
popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${antdMenuTheme} ${popupClassName || ''}`}
popupClassName={`${prefixCls}-popup ${rootPrefixCls}-${parentMenuContext.theme} ${popupClassName || ''}`}
getPopupContainer={getPopupContainer}
builtinPlacements={placements}
popupPlacement={popupPlacement}

1
components/menu/src/commonPropsType.js
View File

@ -18,4 +18,5 @@ export default {
subMenuCloseDelay: PropTypes.number.def(0.1),
level: PropTypes.number.def(1),
inlineIndent: PropTypes.number.def(24),
theme: PropTypes.oneOf(['light', 'dark']).def('light'),
}

68
components/popconfirm/demo/placement.vue
View File

@ -7,28 +7,22 @@
<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
<Popconfirm placement="topLeft" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>TL</AntButton>
</Popconfirm>
<Popconfirm placement="top" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>Top</AntButton>
</Popconfirm>
<Popconfirm placement="topRight" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>TR</AntButton>
</Popconfirm>
@ -36,28 +30,22 @@
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
<Popconfirm placement="leftTop" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>LT</AntButton>
</Popconfirm>
<Popconfirm placement="left" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>Left</AntButton>
</Popconfirm>
<Popconfirm placement="leftBottom" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>LB</AntButton>
</Popconfirm>
@ -65,28 +53,22 @@
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
<Popconfirm placement="rightTop" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>RT</AntButton>
</Popconfirm>
<Popconfirm placement="right" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>Right</AntButton>
</Popconfirm>
<Popconfirm placement="rightBottom" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>RB</AntButton>
</Popconfirm>
@ -94,28 +76,22 @@
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
<Popconfirm placement="bottomLeft" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>BL</AntButton>
</Popconfirm>
<Popconfirm placement="bottom" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
</template>
<AntButton>Bottom</AntButton>
</Popconfirm>
<Popconfirm placement="bottomRight" okText="Yes" cancelText="No" @confirm="confirm">
<template slot="title">
<div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</div>
<p>Are you sure delete this task?</p>
<p>Are you sure delete this task?</p>
</template>
<AntButton>BR</AntButton>
</Popconfirm>

28
components/popconfirm/index.vue
View File

@ -84,23 +84,21 @@ export default {
},
}
const overlay = (
<div>
<div class={`${prefixCls}-inner-content`}>
<div class={`${prefixCls}-message`}>
<Icon type='exclamation-circle' />
<div class={`${prefixCls}-message-title`}>
{getComponentFromProp(this, 'title')}
</div>
</div>
<div class={`${prefixCls}-buttons`}>
<Button onClick={this.onCancel} size='small'>
{getComponentFromProp(this, 'cancelText')}
</Button>
<Button onClick={this.onConfirm} type={okType} size='small'>
{getComponentFromProp(this, 'okText')}
</Button>
<div class={`${prefixCls}-inner-content`}>
<div class={`${prefixCls}-message`}>
<Icon type='exclamation-circle' />
<div class={`${prefixCls}-message-title`}>
{getComponentFromProp(this, 'title')}
</div>
</div>
<div class={`${prefixCls}-buttons`}>
<Button onClick={this.onCancel} size='small'>
{getComponentFromProp(this, 'cancelText')}
</Button>
<Button onClick={this.onConfirm} type={okType} size='small'>
{getComponentFromProp(this, 'okText')}
</Button>
</div>
</div>
)
return (

20
components/popover/demo/arrow-point-at-center.vue
View File

@ -6,26 +6,18 @@
</md>
<Popover placement="topLeft">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
</template>
<template slot="title">
<span>Title</span>
<p>Content</p>
<p>Content</p>
</template>
<span slot="title">Title</span>
<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>
<p>Content</p>
<p>Content</p>
</template>
<span slot="title">Title</span>
<AntButton>Arrow points to center / 箭头指向中心</AntButton>
</Popover>
</div>

6
components/popover/demo/basic.vue
View File

@ -6,10 +6,8 @@
</md>
<Popover title="Title">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<AntButton type="primary">Hover me</AntButton>
</Popover>

4
components/popover/demo/control.vue
View File

@ -9,9 +9,7 @@
trigger="click"
v-model="visible"
>
<template slot="content">
<a @click="hide">Close</a>
</template>
<a @click="hide" slot="content">Close</a>
<AntButton type="primary">Click me</AntButton>
</Popover>
</div>

72
components/popover/demo/placement.vue
View File

@ -7,10 +7,8 @@
<div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
<Popover placement="topLeft">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -19,10 +17,8 @@
</Popover>
<Popover placement="top">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -31,10 +27,8 @@
</Popover>
<Popover placement="topRight">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -45,10 +39,8 @@
<div :style="{ width: `${buttonWidth}px`, float: 'left' }">
<Popover placement="leftTop">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -57,10 +49,8 @@
</Popover>
<Popover placement="left">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -69,10 +59,8 @@
</Popover>
<Popover placement="leftBottom">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -83,10 +71,8 @@
<div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
<Popover placement="rightTop">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -95,10 +81,8 @@
</Popover>
<Popover placement="right">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -107,10 +91,8 @@
</Popover>
<Popover placement="rightBottom">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -121,10 +103,8 @@
<div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
<Popover placement="bottomLeft">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -133,10 +113,8 @@
</Popover>
<Popover placement="bottom">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>
@ -145,10 +123,8 @@
</Popover>
<Popover placement="bottomRight">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<template slot="title">
<span>Title</span>

18
components/popover/demo/triggerType.vue
View File

@ -6,28 +6,22 @@
</md>
<Popover title="Title" trigger="hover">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<AntButton type="primary">Hover me</AntButton>
</Popover>
<Popover title="Title" trigger="focus">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<AntButton type="primary">Focus me</AntButton>
</Popover>
<Popover title="Title" trigger="click">
<template slot="content">
<div>
<p>Content</p>
<p>Content</p>
</div>
<p>Content</p>
<p>Content</p>
</template>
<AntButton type="primary">Click me</AntButton>
</Popover>

2
components/tooltip/index.js
View File

@ -1,3 +1,3 @@
import ToolTip from './tooltip.vue'
import ToolTip from './Tooltip.vue'
export default ToolTip

2
components/tooltip/tooltip.vue
View File

@ -1,6 +1,6 @@
<script>
import { cloneElement, isValidElement, getClass, getStyle } from '../_util/vnode'
import RcTooltip from './src/tooltip'
import RcTooltip from './src/Tooltip'
import getPlacements from './placements'
import PropTypes from '../_util/vue-types'
import { hasProp, getComponentFromProp } from '../_util/props-util'

18
components/trigger/Popup.vue
View File

@ -59,10 +59,7 @@ export default {
onAlign (popupDomNode, align) {
const props = this.$props
const currentAlignClassName = props.getClassNameFromAlign(align)
if (this.currentAlignClassName !== currentAlignClassName) {
popupDomNode.className = popupDomNode.className.replace(this.currentAlignClassName, currentAlignClassName)
this.currentAlignClassName = currentAlignClassName
}
popupDomNode.className = this.getClassName(currentAlignClassName)
this.$listeners.align && this.$listeners.align(popupDomNode, align)
},
@ -105,20 +102,15 @@ export default {
const { $props: props, $slots, $listeners, getTransitionName } = this
const { align, visible, prefixCls, animation } = props
const { mouseenter, mouseleave } = $listeners
this.currentAlignClassName = this.currentAlignClassName || props.getClassNameFromAlign(align)
const className = this.getClassName(this.currentAlignClassName)
const className = this.getClassName(props.getClassNameFromAlign(align))
// const hiddenClassName = `${prefixCls}-hidden`
if (!visible) {
this.currentAlignClassName = null
}
// visible = true
const popupInnerProps = {
props: {
prefixCls,
visible,
// hiddenClassName,
},
class: `${className}`,
class: className,
on: {
mouseenter: mouseenter || noop,
mouseleave: mouseleave || noop,
@ -132,17 +124,13 @@ export default {
css: false,
}),
}
let opacity = '1'
const transitionName = getTransitionName()
const transitionEvent = {
beforeEnter: (el) => {
opacity = el.style.opacity
el.style.opacity = '0'
el.style.display = el.__vOriginalDisplay
this.$refs.alignInstance.forceAlign()
},
enter: (el, done) => {
el.style.opacity = opacity
animate(el, `${transitionName}-enter`, done)
},
leave: (el, done) => {

2
contributors.md
View File

@ -10,7 +10,7 @@ Tag | done
ToolTip | done
Popconfirm | done
Popover | done
Menu
Menu | done
Carousel
Mention
Input | done |select完成后补全demo