mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-24 12:45:18 +08:00
docs(dialog): clean demos
This commit is contained in:
07akioni
parent
e1efddfebb
commit
0243412ab4
@ -11,7 +11,7 @@
|
||||
- `n-mention` add `empty` slot.
|
||||
- `useDialog` option add `on-mask-click` prop, closes [#419](https://github.com/TuSimple/naive-ui/issues/419).
|
||||
- `n-space` `justify` prop supports `center`, `space-around` and `space-between`.
|
||||
- `n-dialog` DialogReactive Properties add `action`, closes [#550](https://github.com/TuSimple/naive-ui/issues/550).
|
||||
- `n-dialog` add `action` prop, closes [#550](https://github.com/TuSimple/naive-ui/issues/550).
|
||||
- `n-mention`’s `option.label` support render function.
|
||||
- `n-color-picker` add `actions` prop, closes [#319](https://github.com/TuSimple/naive-ui/issues/319).
|
||||
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
- `n-dropdown` 新增 `render-icon` 属性
|
||||
- `n-checkbox-group` 新增 `min` 和 `max` 属性
|
||||
- `n-mention` 新增 `empty` slot
|
||||
- `useDialog` 选项 新增 `on-mask-click`属性, 关闭 [#419](https://github.com/TuSimple/naive-ui/issues/419)
|
||||
- `useDialog` 选项新增 `on-mask-click`属性, 关闭 [#419](https://github.com/TuSimple/naive-ui/issues/419)
|
||||
- `n-space` `justify` 属性支持 `center`、`space-around` 和 `space-between`
|
||||
- `n-dialog` DialogReactive Properties 中新增 `action` 属性，关闭 [#550](https://github.com/TuSimple/naive-ui/issues/550)
|
||||
- `n-dialog` 新增 `action` 属性，关闭 [#550](https://github.com/TuSimple/naive-ui/issues/550)
|
||||
- `n-mention` 的 `option.label` 支持使用渲染函数
|
||||
- `n-color-picker` 新增 `actions` 属性，关闭 [#319](https://github.com/TuSimple/naive-ui/issues/319)
|
||||
|
||||
|
||||
31
src/dialog/demos/enUS/action.demo.md
Normal file
31
src/dialog/demos/enUS/action.demo.md
Normal file
@ -0,0 +1,31 @@
|
||||
# Custom Action
|
||||
|
||||
Sometimes you may want to customize `action` and `content` .
|
||||
|
||||
```html
|
||||
<n-space>
|
||||
<n-button @click="handleConfirm">Use Render Function</n-button>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { useDialog, NTag } from 'naive-ui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NTag
|
||||
},
|
||||
setup () {
|
||||
const dialog = useDialog()
|
||||
return {
|
||||
handleConfirm () {
|
||||
dialog.warning({
|
||||
title: 'Use Render Function',
|
||||
content: () => 'Content',
|
||||
action: () => 'Action'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -36,8 +36,8 @@ export default {
|
||||
basic
|
||||
async
|
||||
use-component
|
||||
slot
|
||||
mask
|
||||
action
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
# Mask
|
||||
# Click on Mask
|
||||
|
||||
Dialog mask.
|
||||
I think user is smart enough that they know if nothing happens after mask is clicked, they should click at confirm or cancel button.
|
||||
|
||||
```html
|
||||
<n-space>
|
||||
<n-button @click="handleMask">mask</n-button>
|
||||
<n-button @click="handleClose">cannot close</n-button>
|
||||
</n-space>
|
||||
<n-button @click="handleButtonClick">Callback on Mask Clicked</n-button>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -17,18 +14,7 @@ export default {
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
return {
|
||||
handleMask () {
|
||||
dialog.success({
|
||||
title: 'Close',
|
||||
content: 'Are you sure?',
|
||||
positiveText: 'Sure',
|
||||
negativeText: 'Not Sure',
|
||||
onMaskClick: (e) => {
|
||||
message.success('click mask')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose () {
|
||||
handleButtonClick () {
|
||||
dialog.success({
|
||||
title: 'Close',
|
||||
content: 'Are you sure?',
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
# Custom action
|
||||
|
||||
Sometimes you may want to customize `action` and `content` .
|
||||
|
||||
```html
|
||||
<n-space>
|
||||
<n-button @click="handleConfirm"> Warning </n-button>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { useMessage, useDialog, NTag } from 'naive-ui'
|
||||
import { h } from 'vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NTag
|
||||
},
|
||||
setup () {
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
return {
|
||||
handleConfirm () {
|
||||
const instance = dialog.warning({
|
||||
title: 'Warning',
|
||||
content: () => h(NTag, ['Are you sure?']),
|
||||
action: () =>
|
||||
h('div', [
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
onClick: () => {
|
||||
message.success('Confirmed!')
|
||||
}
|
||||
},
|
||||
['Yes!']
|
||||
),
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
onClick: () => {
|
||||
message.error('Not sure yet!')
|
||||
instance.destroy()
|
||||
},
|
||||
style: {
|
||||
marginLeft: '20px'
|
||||
}
|
||||
},
|
||||
['No!']
|
||||
)
|
||||
])
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
31
src/dialog/demos/zhCN/action.demo.md
Normal file
31
src/dialog/demos/zhCN/action.demo.md
Normal file
@ -0,0 +1,31 @@
|
||||
# 自定义 Action
|
||||
|
||||
有的时候你想自定义 `action` 和 `content`。
|
||||
|
||||
```html
|
||||
<n-space>
|
||||
<n-button @click="handleButtonClick">使用渲染函数</n-button>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { useDialog, NTag } from 'naive-ui'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NTag
|
||||
},
|
||||
setup () {
|
||||
const dialog = useDialog()
|
||||
return {
|
||||
handleButtonClick () {
|
||||
dialog.warning({
|
||||
title: '使用渲染函数',
|
||||
content: () => 'Content',
|
||||
action: () => 'Action'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@ -37,8 +37,8 @@ export default {
|
||||
basic
|
||||
async
|
||||
use-component
|
||||
slot
|
||||
mask
|
||||
action
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
# 蒙层
|
||||
# 点击遮罩
|
||||
|
||||
对话框有蒙层
|
||||
我觉得用户应该聪明到点遮罩没用的时候就去点确认了。
|
||||
|
||||
```html
|
||||
<n-space>
|
||||
<n-button @click="handleMask">蒙层</n-button>
|
||||
<n-button @click="handleClose">不可关闭</n-button>
|
||||
</n-space>
|
||||
<n-button @click="handleButtonClick">点击遮罩的事件</n-button>
|
||||
```
|
||||
|
||||
```js
|
||||
@ -17,18 +14,7 @@ export default {
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
return {
|
||||
handleMask () {
|
||||
dialog.success({
|
||||
title: '关闭',
|
||||
content: '你确定？',
|
||||
positiveText: '确定',
|
||||
negativeText: '不确定',
|
||||
onMaskClick: (e) => {
|
||||
message.success('点击蒙层')
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose () {
|
||||
handleButtonClick () {
|
||||
dialog.success({
|
||||
title: '关闭',
|
||||
content: '你确定？',
|
||||
|
||||
@ -1,57 +0,0 @@
|
||||
# 自定义 action
|
||||
|
||||
有时候你可能想自定义 `action` 和 `content` 。
|
||||
|
||||
```html
|
||||
<n-space>
|
||||
<n-button @click="handleConfirm"> 警告 </n-button>
|
||||
</n-space>
|
||||
```
|
||||
|
||||
```js
|
||||
import { useMessage, useDialog, NTag } from 'naive-ui'
|
||||
import { h } from 'vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
NTag
|
||||
},
|
||||
setup () {
|
||||
const message = useMessage()
|
||||
const dialog = useDialog()
|
||||
return {
|
||||
handleConfirm () {
|
||||
const instance = dialog.warning({
|
||||
title: '警告',
|
||||
content: () => h(NTag, ['你确定?']),
|
||||
action: () =>
|
||||
h('div', [
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
onClick: () => {
|
||||
message.success('确定了！')
|
||||
}
|
||||
},
|
||||
['确定！']
|
||||
),
|
||||
h(
|
||||
NTag,
|
||||
{
|
||||
onClick: () => {
|
||||
message.error('没确定！')
|
||||
instance.destroy()
|
||||
},
|
||||
style: {
|
||||
marginLeft: '20px'
|
||||
}
|
||||
},
|
||||
['不确定！']
|
||||
)
|
||||
])
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
Loading…
Reference in New Issue
Block a user