From eddff353fc3e79ad7e2c24d4a2ae0b88a7a501f1 Mon Sep 17 00:00:00 2001
From: wangxueliang <wangxueliang@yidian-inc.com>
Date: Thu, 22 Mar 2018 16:19:02 +0800
Subject: [PATCH] add popconfirm demo
---
components/popconfirm/demo/basic.md | 33 +++++
components/popconfirm/demo/basic.vue | 29 ----
...dynamic-trigger.vue => dynamic-trigger.md} | 58 ++++----
components/popconfirm/demo/index.vue | 72 +++++++---
components/popconfirm/demo/local.md | 18 +++
components/popconfirm/demo/local.vue | 20 ---
components/popconfirm/demo/placement.md | 134 ++++++++++++++++++
components/popconfirm/demo/placement.vue | 129 -----------------
components/popconfirm/index.en-US.md | 21 +++
components/popconfirm/index.zh-CN.md | 29 ++--
components/rate/index.jsx | 1 -
components/vc-rate/src/Rate.jsx | 4 +-
examples/routes.js | 2 +-
13 files changed, 300 insertions(+), 250 deletions(-)
create mode 100644 components/popconfirm/demo/basic.md
delete mode 100644 components/popconfirm/demo/basic.vue
rename components/popconfirm/demo/{dynamic-trigger.vue => dynamic-trigger.md} (52%)
create mode 100644 components/popconfirm/demo/local.md
delete mode 100644 components/popconfirm/demo/local.vue
create mode 100644 components/popconfirm/demo/placement.md
delete mode 100644 components/popconfirm/demo/placement.vue
create mode 100644 components/popconfirm/index.en-US.md
diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md
new file mode 100644
index 000000000..c96dab9c3
--- /dev/null
+++ b/components/popconfirm/demo/basic.md
@@ -0,0 +1,33 @@
+<cn>
+#### 基本
+最简单的用法。
+</cn>
+
+<us>
+#### Basic
+The basic example.
+</us>
+
+```html
+<template>
+ <a-popconfirm title="Are you sure delete this task?" @confirm="confirm" @cancel="cancel" okText="Yes" cancelText="No">
+ <a href="#">Delete</a>
+ </a-popconfirm>
+</template>
+<script>
+import { message } from 'antd'
+
+export default {
+ methods: {
+ confirm (e) {
+ console.log(e)
+ message.success('Click on Yes')
+ },
+ cancel (e) {
+ console.log(e)
+ message.error('Click on No')
+ },
+ },
+}
+</script>
+```
diff --git a/components/popconfirm/demo/basic.vue b/components/popconfirm/demo/basic.vue
deleted file mode 100644
index abe2f96a8..000000000
--- a/components/popconfirm/demo/basic.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<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,
-
- },
-}
-</script>
diff --git a/components/popconfirm/demo/dynamic-trigger.vue b/components/popconfirm/demo/dynamic-trigger.md
similarity index 52%
rename from components/popconfirm/demo/dynamic-trigger.vue
rename to components/popconfirm/demo/dynamic-trigger.md
index 162a08e5d..bf44b216e 100644
--- a/components/popconfirm/demo/dynamic-trigger.vue
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -1,28 +1,35 @@
-<template>
-<div>
-<md>
-## 条件触发
+<cn>
+#### 条件触发
可以判断是否需要弹出。
-</md>
- <Popconfirm
- title="Are you sure delete this task?"
- :visible="visible"
- @visibleChange="handleVisibleChange"
- @confirm="confirm"
- @cancel="cancel"
- okText="Yes"
- cancelText="No"
- >
- <a href="#">Delete a task</a>
- </Popconfirm>
- <br />
- <br />
- Whether directly execute：<a-checkbox defaultChecked @change="changeCondition" />
-</div>
-</template>
+</cn>
+<us>
+#### Conditional trigger
+Make it pop up under some conditions.
+</us>
+
+```html
+<template>
+ <div>
+ <a-popconfirm
+ title="Are you sure delete this task?"
+ :visible="visible"
+ @visibleChange="handleVisibleChange"
+ @confirm="confirm"
+ @cancel="cancel"
+ okText="Yes"
+ cancelText="No"
+ >
+ <a href="#">Delete a task</a>
+ </a-popconfirm>
+ <br />
+ <br />
+ Whether directly execute：<a-checkbox defaultChecked @change="changeCondition" />
+ </div>
+</template>
<script>
-import { Popconfirm, Checkbox } from 'antd'
+import { message } from 'antd'
+
export default {
data () {
return {
@@ -36,9 +43,11 @@ export default {
},
confirm () {
this.visible = false
+ message.success('Next step.')
},
cancel () {
this.visible = false
+ message.error('Click on cancel.')
},
handleVisibleChange (visible) {
if (!visible) {
@@ -54,9 +63,6 @@ export default {
}
},
},
- components: {
- Popconfirm,
- Checkbox,
- },
}
</script>
+```
diff --git a/components/popconfirm/demo/index.vue b/components/popconfirm/demo/index.vue
index a23816d62..ce41e9a3a 100644
--- a/components/popconfirm/demo/index.vue
+++ b/components/popconfirm/demo/index.vue
@@ -1,30 +1,60 @@
-<template>
- <div>
- <h1>Basic</h1>
- <Basic />
- <h1>Dynamic Trigger</h1>
- <Trigger />
- <h1>Local</h1>
- <Local />
- <h1>Placement</h1>
- <Placement />
- </div>
-</template>
<script>
-import Basic from './basic'
-import Trigger from './dynamic-trigger'
-import Local from './local'
-import Placement from './placement'
+import Basic from './basic.md'
+import Local from './local.md'
+import Placement from './placement.md'
+import DynamicTrigger from './dynamic-trigger.md'
+import CN from '../index.zh-CN.md'
+import US from '../index.en-US.md'
+
+const md = {
+ cn: `# Popconfirm
+
+ 点击元素，弹出气泡式的确认框。
+
+ ## 何时使用
+
+ 目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
+
+和 'confirm' 弹出的全屏居中模态对话框相比，交互形式更轻量。。
+ ## 代码演示`,
+ us: `# Popconfirm
+
+ A simple and compact confirmation dialog of an action.
+
+ # When To Use
+
+ A simple and compact dialog used for asking for user confirmation.
+
+ The difference with the 'confirm' modal dialog is that it's more lightweight than the static popped full-screen confirm modal.
+ ## Examples
+ `,
+}
export default {
category: 'Components',
subtitle: '气泡确认框',
type: 'Feedback',
title: 'Popconfirm',
- components: {
- Basic,
- Trigger,
- Local,
- Placement,
+ render () {
+ return (
+ <div>
+ <md cn={md.cn} us={md.us}/>
+ <br/>
+ <Basic />
+ <br/>
+ <Local />
+ <br/>
+ <Placement />
+ <br/>
+ <DynamicTrigger />
+ <br/>
+ <api>
+ <template slot='cn'>
+ <CN/>
+ </template>
+ <US/>
+ </api>
+ </div>
+ )
},
}
</script>
diff --git a/components/popconfirm/demo/local.md b/components/popconfirm/demo/local.md
new file mode 100644
index 000000000..6579678af
--- /dev/null
+++ b/components/popconfirm/demo/local.md
@@ -0,0 +1,18 @@
+<cn>
+#### 国际化
+使用 `okText` 和 `cancelText` 自定义按钮文字。
+</cn>
+
+<us>
+#### Locale text
+Set `okText` and `cancelText` props to customise the button's labels.
+</us>
+
+```html
+<template>
+ <a-popconfirm title="Are you sure？" okText="Yes" cancelText="No">
+ <a href="#">Delete</a>
+ </a-popconfirm>
+</template>
+```
+
diff --git a/components/popconfirm/demo/local.vue b/components/popconfirm/demo/local.vue
deleted file mode 100644
index a160786dd..000000000
--- a/components/popconfirm/demo/local.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<template>
-<div>
-<md>
-## 国际化
-使用 `okText` 和 `cancelText` 自定义按钮文字。
-</md>
- <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
- <a href="#">Delete</a>
- </Popconfirm>
-</div>
-</template>
-
-<script>
-import { Popconfirm } from 'antd'
-export default {
- components: {
- Popconfirm,
- },
-}
-</script>
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
new file mode 100644
index 000000000..ed9880250
--- /dev/null
+++ b/components/popconfirm/demo/placement.md
@@ -0,0 +1,134 @@
+<cn>
+#### 位置
+位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrowPointAtCenter`。
+</cn>
+
+<us>
+#### Placement
+There are 12 `placement` options available. Use `arrowPointAtCenter` if you want arrow point at the center of target.
+</us>
+
+```html
+<template>
+ <div id="components-a-popconfirm-demo-placement">
+ <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
+ <a-popconfirm placement="topLeft" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>TL</a-button>
+ </a-popconfirm>
+ <a-popconfirm placement="top" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>Top</a-button>
+ </a-popconfirm>
+ <a-popconfirm placement="topRight" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>TR</a-button>
+ </a-popconfirm>
+ </div>
+ <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
+ <a-popconfirm placement="leftTop" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>LT</a-button>
+ </a-popconfirm>
+ <a-popconfirm placement="left" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>Left</a-button>
+ </a-popconfirm>
+ <a-popconfirm placement="leftBottom" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>LB</a-button>
+ </a-popconfirm>
+ </div>
+ <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
+ <a-popconfirm placement="rightTop" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>RT</a-button>
+ </a-popconfirm>
+ <a-popconfirm placement="right" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>Right</a-button>
+ </a-popconfirm>
+ <a-popconfirm placement="rightBottom" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>RB</a-button>
+ </a-popconfirm>
+ </div>
+ <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
+ <a-popconfirm placement="bottomLeft" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>BL</a-button>
+ </a-popconfirm>
+ <a-popconfirm placement="bottom" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>Bottom</a-button>
+ </a-popconfirm>
+ <a-popconfirm placement="bottomRight" okText="Yes" cancelText="No" @confirm="confirm">
+ <template slot="title">
+ <p>Are you sure delete this task?</p>
+ <p>Are you sure delete this task?</p>
+ </template>
+ <a-button>BR</a-button>
+ </a-popconfirm>
+ </div>
+ </div>
+</template>
+<script>
+import { message } from 'antd'
+
+export default {
+ data () {
+ return {
+ buttonWidth: 70,
+ }
+ },
+ methods: {
+ confirm () {
+ message.info('Click on Yes.')
+ },
+ },
+}
+</script>
+<style scoped>
+#components-a-popconfirm-demo-placement .ant-btn {
+ width: 70px;
+ text-align: center;
+ padding: 0;
+ margin-right: 8px;
+ margin-bottom: 8px;
+}
+</style>
+```
+
diff --git a/components/popconfirm/demo/placement.vue b/components/popconfirm/demo/placement.vue
deleted file mode 100644
index c1e1a97a5..000000000
--- a/components/popconfirm/demo/placement.vue
+++ /dev/null
@@ -1,129 +0,0 @@
-<template>
-<div id="components-popconfirm-demo-placement">
-<md>
-## 位置
-位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrowPointAtCenter`。
-</md>
- <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
- <Popconfirm placement="topLeft" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>TL</a-button>
- </Popconfirm>
- <Popconfirm placement="top" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>Top</a-button>
- </Popconfirm>
- <Popconfirm placement="topRight" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>TR</a-button>
- </Popconfirm>
- </div>
- <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
- <Popconfirm placement="leftTop" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>LT</a-button>
- </Popconfirm>
- <Popconfirm placement="left" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>Left</a-button>
- </Popconfirm>
- <Popconfirm placement="leftBottom" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>LB</a-button>
- </Popconfirm>
- </div>
- <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24 }px`}">
- <Popconfirm placement="rightTop" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>RT</a-button>
- </Popconfirm>
- <Popconfirm placement="right" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>Right</a-button>
- </Popconfirm>
- <Popconfirm placement="rightBottom" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>RB</a-button>
- </Popconfirm>
- </div>
- <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
- <Popconfirm placement="bottomLeft" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>BL</a-button>
- </Popconfirm>
- <Popconfirm placement="bottom" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>Bottom</a-button>
- </Popconfirm>
- <Popconfirm placement="bottomRight" okText="Yes" cancelText="No" @confirm="confirm">
- <template slot="title">
- <p>Are you sure delete this task?</p>
- <p>Are you sure delete this task?</p>
- </template>
- <a-button>BR</a-button>
- </Popconfirm>
- </div>
-</div>
-</template>
-
-<script>
-import { Popconfirm, Button } from 'antd'
-export default {
- data () {
- return {
- buttonWidth: 70,
- }
- },
- methods: {
- confirm () {
- console.log('Click on Yes')
- },
- },
- components: {
- Popconfirm,
-
- },
-}
-</script>
-<style>
-#components-popconfirm-demo-placement .ant-btn {
- width: 70px;
- text-align: center;
- padding: 0;
- margin-right: 8px;
- margin-bottom: 8px;
-}
-</style>
diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md
new file mode 100644
index 000000000..38de143fc
--- /dev/null
+++ b/components/popconfirm/index.en-US.md
@@ -0,0 +1,21 @@
+## API
+
+| Param | Description | Type | Default value |
+| ----- | ----------- | ---- | ------------- |
+| cancelText | text of the Cancel button | string | `Cancel` |
+| okText | text of the Confirm button | string | `Confirm` |
+| okType | Button `type` of the Confirm button | string | `primary` |
+| title | title of the confirmation box | string\|slot | - |
+
+### events
+| Events Name | Description | Arguments |
+| --- | --- | --- |
+| cancel | callback of cancel | function(e) | - |
+| confirm | callback of confirmation | function(e) | - |
+| visibleChange | Callback executed when visibility of the tooltip card is changed | function(visible) | - |
+
+Consult [Tooltip's documentation](#/us/components/tooltip/#API) to find more APIs.
+
+## Note
+
+Please ensure that the child node of `Popconfirm` accepts `mouseenter`, `mouseleave`, `focus`, `click` events.
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
index c45a7a7f4..823cba49e 100644
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -1,33 +1,20 @@
----
-category: Components
-subtitle: 气泡确认框
-type: Feedback
-title: Popconfirm
----
-
-点击元素，弹出气泡式的确认框。
-
-## 何时使用
-
-目标元素的操作需要用户进一步的确认时，在目标元素附近弹出浮层提示，询问用户。
-
-和 `confirm` 弹出的全屏居中模态对话框相比，交互形式更轻量。
-
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
-| cancelText | 取消按钮文字 | string\|function\|slot | 取消 |
-| okText | 确认按钮文字 | string\|function\|slot | 确定 |
+| cancelText | 取消按钮文字 | string | 取消 |
+| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
-| title | 确认框的描述 | string\|function\|slot | 无 |
+| title | 确认框的描述 | string\|slot | 无 |
### 事件
| 事件名称 | 说明 | 回调参数 |
-| cancel | 点击取消时触发 | (e) |
-| confirm | 点击确认时触发 | (e) |
+| --- | --- | --- |
+| cancel | 点击取消的回调 | function(e) |
+| confirm | 点击确认的回调 | function(e) |
+| visibleChange | 显示隐藏的回调 | function(visible) |
-更多属性请参考 [Tooltip](#/cn/components/tooltip/API)。
+更多属性请参考 [Tooltip](#/cn/components/tooltip/#API)。
## 注意
diff --git a/components/rate/index.jsx b/components/rate/index.jsx
index 24f28aa5b..b1b4071af 100644
--- a/components/rate/index.jsx
+++ b/components/rate/index.jsx
@@ -12,7 +12,6 @@ export const RateProps = {
allowHalf: PropTypes.bool,
allowClear: PropTypes.bool,
disabled: PropTypes.bool,
- hoverChange: PropTypes.func,
character: PropTypes.any,
}
diff --git a/components/vc-rate/src/Rate.jsx b/components/vc-rate/src/Rate.jsx
index 2efcdeb50..d749b937e 100644
--- a/components/vc-rate/src/Rate.jsx
+++ b/components/vc-rate/src/Rate.jsx
@@ -73,14 +73,14 @@ export default {
cleanedValue: null,
})
}
- this.$emit('hover-change', hoverValue)
+ this.$emit('hoverChange', hoverValue)
},
onMouseLeave () {
this.setState({
hoverValue: undefined,
cleanedValue: null,
})
- this.$emit('hover-change', undefined)
+ this.$emit('hoverChange', undefined)
},
onClick (event, index) {
const value = this.getStarValue(index, event.pageX)
diff --git a/examples/routes.js b/examples/routes.js
index 15c200379..73e054488 100644
--- a/examples/routes.js
+++ b/examples/routes.js
@@ -3,7 +3,7 @@ const AsyncComp = () => {
const hashs = window.location.hash.split('/')
const d = hashs[hashs.length - 1]
return {
- component: import(`../components/rate/demo/${d}`),
+ component: import(`../components/popconfirm/demo/${d}`),
}
}
export default [