Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
京东前端
nutui
提交
6b8598d1
N
nutui
项目概览
京东前端
/
nutui
通知
37
Star
4
Fork
1
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
N
nutui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
6b8598d1
编写于
4月 14, 2021
作者:
richard_1015
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
chore: dialog
上级
ecebe956
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
141 addition
and
87 deletion
+141
-87
src/packages/dialog/demo.vue
src/packages/dialog/demo.vue
+39
-21
src/packages/dialog/doc.md
src/packages/dialog/doc.md
+52
-22
src/packages/dialog/index.ts
src/packages/dialog/index.ts
+44
-30
src/packages/dialog/index.vue
src/packages/dialog/index.vue
+6
-14
未找到文件。
src/packages/dialog/demo.vue
浏览文件 @
6b8598d1
<
template
>
<div
class=
"demo"
>
<!--
<nut-cell
title=
"基础弹框"
@
click=
"baseClick"
></nut-cell>
-->
<nut-cell
title=
"标签弹框"
@
click=
"noTitleClick"
></nut-cell>
<nut-cell
title=
"基础弹框"
@
click=
"baseClick"
></nut-cell>
<nut-cell
title=
"无标题弹框"
@
click=
"noTitleClick"
></nut-cell>
<nut-cell
title=
"提示弹框"
@
click=
"tipsClick"
></nut-cell>
<nut-cell
title=
"组件调用"
@
click=
"componentClick"
></nut-cell>
<nut-dialog
title=
"标签式使用"
:close-on-click-overlay=
"false"
:content=
"content"
title=
"组件调用"
content=
"如果需要在弹窗内嵌入组件或其他自定义内容,可以使用组件调用的方式。"
v-model:visible=
"visible"
>
</nut-dialog>
<!--
<template
v-slot:header
>
</
template
>
-->
</div>
</
template
>
<
script
lang=
"ts"
>
import
{
ref
,
getCurrentInstance
}
from
'
vue
'
;
import
{
ref
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
createDemo
}
=
createComponent
(
'
dialog
'
);
import
{
Dialog
}
from
'
@/nutui
'
;
export
default
createDemo
({
props
:
{},
setup
()
{
const
{
proxy
}
=
getCurrentInstance
();
const
content
=
ref
(
'
模态对话框,在浮层中显示,引导用户进行相关操作,支持图片对话框。
'
);
const
visible
=
ref
(
false
);
const
baseClick
=
()
=>
{
proxy
.
$dialog
({
const
onCancel
=
()
=>
{
console
.
log
(
'
event cancel
'
);
};
const
onOk
=
()
=>
{
console
.
log
(
'
event ok
'
);
};
const
baseClick
=
():
void
=>
{
Dialog
({
title
:
'
基础弹框
'
,
content
:
'
基础弹框内容
'
content
:
'
支持函数调用和组件调用两种方式。
'
,
onCancel
,
onOk
});
};
const
noTitleClick
=
()
=>
{
Dialog
({
content
:
'
无标题弹框
'
,
onCancel
,
onOk
});
};
const
tipsClick
=
()
=>
{
Dialog
({
title
:
'
温馨提示
'
,
content
:
'
支持函数调用和组件调用两种方式。
'
,
onCancel
,
onOk
});
};
const
componentClick
=
()
=>
{
visible
.
value
=
true
;
};
return
{
content
,
visible
,
baseClick
,
noTitleClick
noTitleClick
,
componentClick
,
tipsClick
};
}
});
...
...
src/packages/dialog/doc.md
浏览文件 @
6b8598d1
...
...
@@ -26,7 +26,7 @@ app.use(Dialog);
```
javascript
import
{
ref
}
from
'
vue
'
;
import
{
Dialog
}
from
'
@nutui/nutui
'
;
export
default
{
setup
()
{
const
visible
=
ref
(
true
);
...
...
@@ -38,30 +38,60 @@ export default {
};
```
## API
| 字段 | 说明 | 类型 | 默认值 |
|---------------------|---------------------------------------|----------|----------|
| title | 标题 | String | - |
| content | 内容,支持HTML | String | - |
| closeOnClickOverlay | 点击蒙层是否关闭对话框 | Boolean | false |
| noFooter | 是否隐藏底部按钮栏 | Boolean | false |
| noOkBtn | 是否隐藏确定按钮 | Boolean | false |
| noCancelBtn | 是否隐藏取消按钮 | Boolean | false |
| cancelText | 取消按钮文案 | String | ”取消“ |
| okText | 确定按钮文案 | String | ”确定“ |
| okBtnDisabled | 禁用确定按钮 | Boolean | false |
| cancelAutoClose | 取消按钮是否默认关闭弹窗 | Boolean | true |
| textAlign | 文字对齐方向,可选值同css的text-align | String | "center" |
| closeOnPopstate | 是否在页面回退时自动关闭 | Boolean | false |
| onUpdate | 更新 | Boolean | false |
| onOk | 确定按钮回调 | Function | - |
| onCancel | 取消按钮回调 | Function | - |
| onOpen | 背景是否锁定 | Function | - |
| onClosed | 关闭回调,任何情况关闭弹窗都会触发 | Function | - |
## Props
| 字段
| 说明 | 类型 | 默认值
|-----
| ----- | ----- | -----
| title
| 标题 | String | -
| content
| 内容,支持HTML | String | -
| close-on-click-overlay | 点击蒙层是否关闭对话框
| Boolean | true
| no
Footer | 是否隐藏底部按钮栏 | Boolean | false
| no
OkBtn | 是否隐藏确定按钮 | Boolean | false
| no
CancelBtn | 是否隐藏取消按钮 | Boolean | false
| cancel
Text | 取消按钮文案 | String | ”取消“
| ok
Text | 确定按钮文案 | String | ”确 定“
| ok
BtnDisabled | 禁用确定按钮 | Boolean | false
| cancel
AutoClose | 取消按钮是否默认关闭弹窗 | Boolean | true
| text
Align | 文字对齐方向,可选值同css的text-align | String | "center"
| close
OnPopstate | 是否在页面回退时自动关闭 | Boolean | false
| lock-scroll
| 背景是否锁定 | Boolean | false
| 字段
| 说明 | 类型 | 默认值 |
|-----
-------------------|---------------------------------------|---------|----------|
| title
| 标题 | String | - |
| content
| 内容,支持HTML | String | - |
| close-on-click-overlay | 点击蒙层是否关闭对话框
| Boolean | false |
| no
-footer | 是否隐藏底部按钮栏 | Boolean | false |
| no
-ok-btn | 是否隐藏确定按钮 | Boolean | false |
| no
-cancel-btn | 是否隐藏取消按钮 | Boolean | false |
| cancel
-text | 取消按钮文案 | String | ”取消“ |
| ok
-text | 确定按钮文案 | String | ”确 定“ |
| ok
-btn-disabled | 禁用确定按钮 | Boolean | false |
| cancel
-auto-close | 取消按钮是否默认关闭弹窗 | Boolean | true |
| text
-align | 文字对齐方向,可选值同css的text-align | String | "center" |
| close
-on-popstate | 是否在页面回退时自动关闭 | Boolean | false |
| lock-scroll
| 背景是否锁定 | Boolean | false |
## Events
| 字段 | 说明 | 类型 | 默认值
|----- | ----- | ----- | -----
| ok | 确定按钮回调 | Function | -
| cancel | 取消按钮回调 | Function | -
| open | 关闭按钮回调 | Function | -
| closed | 关闭回调,任何情况关闭弹窗都会触发 | Function | -
\ No newline at end of file
| 字段 | 说明 | 类型 | 默认值 |
|--------|------------------------------------|----------|--------|
| ok | 确定按钮回调 | Function | - |
| cancel | 取消按钮回调 | Function | - |
| closed | 关闭回调,任何情况关闭弹窗都会触发 | Function | - |
## Slots
| 名称 | 说明 |
|---------|--------------------|
| header | 自定义标题区域 |
| default | 自定义内容 |
| footer | 自定义底部按钮区域 |
\ No newline at end of file
src/packages/dialog/index.ts
浏览文件 @
6b8598d1
import
dialogInstance
from
'
./index.vue
'
;
import
{
render
,
createVNode
,
ref
}
from
'
vue
'
;
export
const
show
=
ref
(
false
);
import
Dialog
from
'
./index.vue
'
;
import
{
render
,
createVNode
,
h
}
from
'
vue
'
;
export
class
DialogOptions
{
title
:
string
=
''
;
content
:
string
=
''
;
cancelText
:
string
=
'
取消
'
;
okText
:
string
=
'
确定
'
;
textAlign
:
string
=
'
center
'
;
teleport
:
String
|
Element
=
'
body
'
;
title
?
:
string
=
''
;
content
?
:
string
=
''
;
cancelText
?
:
string
=
'
取消
'
;
okText
?
:
string
=
'
确定
'
;
textAlign
?
:
string
=
'
center
'
;
teleport
?:
String
=
'
body
'
;
// function
private
onUpdate
:
Function
=
(
value
:
boolean
)
=>
{
show
.
value
=
value
;
};
onOk
:
Function
=
()
=>
{};
onCancel
:
Function
=
()
=>
{};
onClose
:
Function
=
()
=>
{};
onClosed
:
Function
=
()
=>
{};
noFooter
:
boolean
=
false
;
noOkBtn
:
boolean
=
false
;
noCancelBtn
:
boolean
=
false
;
okBtnDisabled
:
boolean
=
false
;
closeOnPopstate
:
boolean
=
false
;
lockScroll
:
boolean
=
false
;
onUpdate
?:
Function
=
(
value
:
boolean
)
=>
{};
onOk
?:
Function
=
()
=>
{};
onCancel
?:
Function
=
()
=>
{};
onClose
?:
Function
=
()
=>
{};
onClosed
?:
Function
=
()
=>
{};
visible
?:
boolean
=
true
;
noFooter
?:
boolean
=
false
;
noOkBtn
?:
boolean
=
false
;
noCancelBtn
?:
boolean
=
false
;
okBtnDisabled
?:
boolean
=
false
;
closeOnPopstate
?:
boolean
=
false
;
lockScroll
?:
boolean
=
false
;
}
class
Dialog
{
class
Dialog
Function
{
options
:
DialogOptions
=
new
DialogOptions
();
constructor
(
_options
:
DialogOptions
)
{
Object
.
assign
(
this
.
options
,
_options
);
show
.
value
=
true
;
const
instance
:
any
=
createVNode
(
dialogInstance
,
this
.
options
as
any
);
render
(
instance
,
document
.
body
);
let
options
=
Object
.
assign
(
this
.
options
,
_options
);
const
root
=
document
.
createElement
(
'
view
'
);
root
.
id
=
'
dialog-
'
+
new
Date
().
getTime
();
const
Wrapper
=
{
setup
()
{
options
.
onUpdate
=
(
val
:
boolean
)
=>
{
if
(
val
==
false
)
{
document
.
body
.
removeChild
(
root
);
}
};
options
.
teleport
=
`#
${
root
.
id
}
`
;
return
()
=>
{
return
h
(
Dialog
,
options
);
};
}
};
const
instance
:
any
=
createVNode
(
Wrapper
);
document
.
body
.
appendChild
(
root
);
render
(
instance
,
root
);
}
close
=
()
=>
{
...
...
@@ -52,10 +65,11 @@ class Dialog {
}
const
_Dialog
=
function
(
options
:
DialogOptions
)
{
return
new
Dialog
(
options
);
return
new
Dialog
Function
(
options
);
};
_Dialog
.
install
=
(
app
:
any
)
=>
{
app
.
use
(
dialogInstance
);
app
.
use
(
Dialog
);
app
.
config
.
globalProperties
.
$dialog
=
_Dialog
;
};
export
{
Dialog
};
export
default
_Dialog
;
src/packages/dialog/index.vue
浏览文件 @
6b8598d1
<
template
>
<nut-popup
name=
"pop"
:teleport=
"teleport"
v-model:visible=
"showPopup"
:close-on-click-overlay=
"closeOnClickOverlay"
...
...
@@ -50,11 +49,11 @@
</nut-popup>
</template>
<
script
lang=
"ts"
>
import
{
onMounted
,
computed
,
watch
,
onUnmounted
,
ref
,
toRefs
}
from
'
vue
'
;
import
{
onMounted
,
computed
,
watch
,
ref
}
from
'
vue
'
;
import
{
createComponent
}
from
'
@/utils/create
'
;
const
{
componentName
,
create
}
=
createComponent
(
'
dialog
'
);
import
{
Button
,
Popup
}
from
'
@/nutui
'
;
import
{
show
}
from
'
./index
'
;
import
Popup
,
{
popupProps
}
from
'
@/packages/popup/index.vue
'
;
import
{
Button
}
from
'
@/nutui
'
;
export
default
create
({
inheritAttrs
:
false
,
children
:
[
Popup
,
Button
],
...
...
@@ -63,8 +62,8 @@ export default create({
'
nut-button
'
:
Button
},
props
:
{
...
Popup
.
popupProps
,
visible
:
{
...
popupProps
,
closeOnClickOverlay
:
{
type
:
Boolean
,
default
:
false
},
...
...
@@ -140,9 +139,7 @@ export default create({
'
closed
'
],
setup
(
props
,
{
emit
})
{
const
showPopup
=
ref
(
false
);
showPopup
.
value
=
show
.
value
;
const
showPopup
=
ref
(
props
.
visible
);
onMounted
(()
=>
{
if
(
props
.
closeOnPopstate
)
{
window
.
addEventListener
(
'
popstate
'
,
function
()
{
...
...
@@ -151,10 +148,6 @@ export default create({
}
});
watch
(
show
,
value
=>
{
showPopup
.
value
=
value
;
});
watch
(
()
=>
props
.
visible
,
value
=>
{
...
...
@@ -195,7 +188,6 @@ export default create({
classes
,
onCancel
,
onOk
,
show
,
showPopup
};
}
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录