zxk
2 years ago
5 changed files with 538 additions and 9 deletions
@ -0,0 +1,145 @@ |
|||
<template> |
|||
<view class="demo"> |
|||
<view class="demo-item"> |
|||
<text>完整功能</text> |
|||
<button type="primary" size="mini" @click="handleShow(1)">查看</button> |
|||
<xy-dialog |
|||
title="标题" |
|||
content="操作成功,你懂得~" |
|||
:show="showDialog_1" |
|||
@cancelButton="clickCancel(1)" |
|||
@confirmButton="clickConfirm(1)" |
|||
></xy-dialog> |
|||
</view> |
|||
<view class="demo-item"> |
|||
<text>内容+按钮</text> |
|||
<button type="primary" size="mini" @click="handleShow(2)">查看</button> |
|||
<xy-dialog |
|||
title="" |
|||
content="操作成功,你懂得~" |
|||
:show="showDialog_2" |
|||
@cancelButton="clickCancel(2)" |
|||
@confirmButton="clickConfirm(2)" |
|||
></xy-dialog> |
|||
</view> |
|||
<view class="demo-item"> |
|||
<text>标题+内容+单个按钮</text> |
|||
<button type="primary" size="mini" @click="handleShow(3)">查看</button> |
|||
<xy-dialog |
|||
title="提示" |
|||
content="操作成功,你懂得~" |
|||
:show="showDialog_3" |
|||
:isShowCancel="!showDialog_3" |
|||
@confirmButton="clickConfirm(3)" |
|||
></xy-dialog> |
|||
</view> |
|||
<view class="demo-item"> |
|||
<text>改变按钮文字/颜色</text> |
|||
<button type="primary" size="mini" @click="handleShow(4)">查看</button> |
|||
<xy-dialog |
|||
title="标题" |
|||
content="操作成功,你懂得~" |
|||
:show="showDialog_4" |
|||
cancelText="删除" |
|||
cancelColor="#F56C6C" |
|||
confirmText="保存" |
|||
confirmColor="#67C23A" |
|||
@cancelButton="clickCancel(4)" |
|||
@confirmButton="clickConfirm(4)" |
|||
></xy-dialog> |
|||
</view> |
|||
<view class="demo-item"> |
|||
<text>内容+单个按钮</text> |
|||
<button type="primary" size="mini" @click="handleShow(5)">查看</button> |
|||
<xy-dialog |
|||
title="" |
|||
content="操作成功,你懂得~" |
|||
:show="showDialog_5" |
|||
:isShowCancel="!showDialog_5" |
|||
@confirmButton="clickConfirm(5)" |
|||
></xy-dialog> |
|||
</view> |
|||
<view class="demo-item"> |
|||
<text>自定义slot插入内容</text> |
|||
<button type="primary" size="mini" @click="handleShow(6)">查看</button> |
|||
<xy-dialog |
|||
title="提示" |
|||
content="" |
|||
:show="showDialog_6" |
|||
@cancelButton="clickCancel(6)" |
|||
@confirmButton="clickConfirm(6)" |
|||
> |
|||
<view style="padding: 0 30upx 30upx;"> |
|||
<view>锄禾日当午</view> |
|||
<view>汗滴禾下土</view> |
|||
<view>举头望明月</view> |
|||
<view>低头思故乡</view> |
|||
</view> |
|||
</xy-dialog> |
|||
</view> |
|||
<view class="demo-item"> |
|||
<text>方法调用</text> |
|||
<button type="primary" size="mini" @click="handleActionShow">查看</button> |
|||
<xy-dialog |
|||
title="提示" |
|||
content="操作成功,你懂得~" |
|||
ref="xyDialog" |
|||
@confirmButton="clickConfirm" |
|||
></xy-dialog> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import xyDialog from '@/components/xy-dialog/xy-dialog.vue' |
|||
export default { |
|||
components: { |
|||
xyDialog |
|||
}, |
|||
data() { |
|||
return { |
|||
showDialog_1: false, |
|||
showDialog_2: false, |
|||
showDialog_3: false, |
|||
showDialog_4: false, |
|||
showDialog_5: false, |
|||
showDialog_6: false |
|||
} |
|||
}, |
|||
onLoad() { |
|||
|
|||
}, |
|||
methods: { |
|||
handleShow(type) { |
|||
this[`showDialog_${type}`] = true; |
|||
}, |
|||
clickCancel(type) { |
|||
this[`showDialog_${type}`] = false; |
|||
}, |
|||
clickConfirm(type) { |
|||
this[`showDialog_${type}`] = false; |
|||
}, |
|||
handleActionShow() { |
|||
this.$refs.xyDialog.show() |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.demo { |
|||
padding: 60upx; |
|||
.demo-item { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 30upx 0; |
|||
border-bottom: 1px solid #EBEEF5; |
|||
text { |
|||
flex: 1; |
|||
font-size: 32upx; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,95 @@ |
|||
### Dialog 弹出框 |
|||
|
|||
自定义 Dialog 弹出框组件 |
|||
|
|||
**使用方式：** |
|||
|
|||
在 script 中引用组件 |
|||
|
|||
```javascript |
|||
import xyDialog from '@/components/xy-dialog/xy-dialog.vue'; |
|||
export default { |
|||
components: {xyDialog} |
|||
} |
|||
``` |
|||
|
|||
基础使用方式 |
|||
|
|||
```html |
|||
<xy-dialog |
|||
:show="show" |
|||
title="提示" |
|||
content="哈哈，还是被你看到了..." |
|||
@cancel="clickCancel('cancel')" |
|||
@confirm="clickConfirm('confirm')"> |
|||
</xy-dialog> |
|||
``` |
|||
|
|||
单个确认按钮+无标题 |
|||
|
|||
```html |
|||
<xy-dialog |
|||
:show="show" |
|||
title="" |
|||
content="哈哈，还是被你看到了..." |
|||
:isShowCancel="!show" |
|||
@confirm="clickConfirm('confirm')"> |
|||
</xy-dialog> |
|||
``` |
|||
|
|||
更多案例，请下载到本地进行体验... |
|||
|
|||
**属性说明：** |
|||
|
|||
|属性名 |类型 |默认值 |说明 | |
|||
|--- |---- |--- |--- | |
|||
|title|String||标题 | |
|||
|content|String||内容| |
|||
|align|String|left|内容对齐方式，值为：left（左对齐）、center（居中对齐）、right（右对齐）| |
|||
|show|Boolean|false|Dialog的显示状态 | |
|||
|isShowCancel|Boolean|true |是否显示取消按钮| |
|||
|confirmColor|String|#409EFF|确认按钮的颜色 | |
|||
|confirmText|String|确定|确定按钮的文字 | |
|||
|cancelColor|String|#909399|取消按钮的颜色 | |
|||
|cancelText|String|取消|取消按钮的文字 | |
|||
|
|||
**事件说明：** |
|||
|
|||
|事件名 |说明 | |
|||
|--- |---- | |
|||
|close|组件关闭时触发事件| |
|||
|confirmButton|点击确认按钮时触发事件| |
|||
|cancelButton|点击取消按钮时触发事件| |
|||
|
|||
**方法说明：** |
|||
|
|||
|方法名 |说明 | |
|||
|--- |---- | |
|||
|show()|显示组件-this.$refs.xyDialog.show()| |
|||
|
|||
**slot** |
|||
|
|||
在 ``xy-dialog`` 节点下，可以通过插入节点实现自定义 content 的需求（只有 content 属性为空的时候才会加载 slot） |
|||
|
|||
使用示例： |
|||
|
|||
```html |
|||
<xy-dialog |
|||
title="提示" |
|||
content="" |
|||
:show="show" |
|||
@cancelButton="clickCancel" |
|||
@confirmButton="clickConfirm"> |
|||
<view style="padding: 0 30upx 30upx;"> |
|||
<view>锄禾日当午</view> |
|||
<view>汗滴禾下土</view> |
|||
<view>举头望明月</view> |
|||
<view>低头思故乡</view> |
|||
</view> |
|||
</xy-dialog> |
|||
``` |
|||
|
|||
**注意** |
|||
|
|||
* 通过本页面下载按钮下载的zip为一个部分 ``components`` 单个组件工程，拖入 HBuilderX粘贴components 目录中即可运行体验效果； |
|||
* 使用过程出现问题或有新的需求可在评论区留言。 |
|||
@ -0,0 +1,254 @@ |
|||
<template> |
|||
<view class="xy-dialog" |
|||
:class="{ 'xy-dialog__show': isShow }" |
|||
@touchmove.stop.prevent="bindTouchmove" |
|||
> |
|||
<view class="xy-dialog__mask"></view> |
|||
<view class="xy-dialog__container"> |
|||
<view class="xy-dialog__header" v-if="title.length > 0">{{ title }}</view> |
|||
<view class="xy-dialog__content" :style="{ 'text-align': textalign }"> |
|||
<template v-if="content"> |
|||
<view class="modal-content">{{ content }}</view> |
|||
</template> |
|||
<template v-else> |
|||
<slot /> |
|||
</template> |
|||
</view> |
|||
<view class="xy-dialog__footer"> |
|||
<view v-if="isShowCancel" class="xy-dialog__btn xy-dialog__footer-cancel" |
|||
:style="{ color: cancelColor }" |
|||
@click="clickCancel" |
|||
> |
|||
{{ cancelText }} |
|||
</view> |
|||
<view class="xy-dialog__btn xy-dialog__footer-confirm" |
|||
:style="{ color: confirmColor }" |
|||
:class="[ isShowCancel ? '' : 'xy-dialog__btn-row' ]" |
|||
@click="clickConfirm" |
|||
> |
|||
{{ confirmText }} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
props: { |
|||
|
|||
// 标题 |
|||
title: { |
|||
type: String, |
|||
default: '' |
|||
}, |
|||
|
|||
// 内容 |
|||
content: String, |
|||
|
|||
// 对齐方式 |
|||
textalign: { |
|||
type: String, |
|||
default: 'center' |
|||
}, |
|||
|
|||
// 取消文字 |
|||
cancelText: { |
|||
type: String, |
|||
default: '取消' |
|||
}, |
|||
|
|||
// 取消颜色 |
|||
cancelColor: { |
|||
type: String, |
|||
default: '#909399' |
|||
}, |
|||
|
|||
// 确定文字 |
|||
confirmText: { |
|||
type: String, |
|||
default: '确定' |
|||
}, |
|||
|
|||
// 确定文字颜色 |
|||
confirmColor: { |
|||
type: String, |
|||
default: '#409EFF' |
|||
}, |
|||
|
|||
// 是否显示取消按钮 |
|||
isShowCancel: { |
|||
type: Boolean, |
|||
default: true |
|||
}, |
|||
|
|||
// 是否显示弹出框 |
|||
showDialog: { |
|||
type: Boolean, |
|||
default: false |
|||
} |
|||
}, |
|||
data() { |
|||
return { |
|||
isShow: false |
|||
} |
|||
}, |
|||
watch: { |
|||
showDialog (val) { |
|||
this.isShow = val |
|||
} |
|||
}, |
|||
methods: { |
|||
// 禁止穿透 |
|||
bindTouchmove() {}, |
|||
|
|||
show() { |
|||
this.isShow = true; |
|||
}, |
|||
|
|||
// 取消方法 |
|||
clickCancel() { |
|||
setTimeout(() => { |
|||
this.$emit('cancelButton'); |
|||
}, 200); |
|||
this.closeDialog(); |
|||
}, |
|||
|
|||
// 确定方法 |
|||
clickConfirm() { |
|||
setTimeout(() => { |
|||
this.$emit('confirmButton'); |
|||
}, 200); |
|||
this.closeDialog(); |
|||
}, |
|||
|
|||
// 关闭弹窗 |
|||
closeDialog() { |
|||
this.isShow = false; |
|||
this.$emit('close') |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.xy-dialog { |
|||
position: fixed; |
|||
visibility: hidden; |
|||
width: 100%; |
|||
height: 100%; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
left: 0; |
|||
z-index: 1500; |
|||
transition: visibility 200ms ease-in; |
|||
&.xy-dialog__show { |
|||
visibility: visible; |
|||
} |
|||
|
|||
&__container { |
|||
position: absolute; |
|||
z-index: 1010; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
transition: transform 0.3s; |
|||
width: 540upx; |
|||
border-radius: 10upx; |
|||
background-color: #fff; |
|||
overflow: hidden; |
|||
opacity: 0; |
|||
transition: opacity 200ms ease-in; |
|||
padding-top: 30upx; |
|||
} |
|||
|
|||
&__header { |
|||
position: relative; |
|||
overflow: auto; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
padding: 0 24upx 24upx; |
|||
line-height: 1.5; |
|||
color: #303133; |
|||
font-weight: bold; |
|||
font-size: 40upx; |
|||
text-align: center; |
|||
} |
|||
|
|||
|
|||
&__content { |
|||
position: relative; |
|||
color: #303133; |
|||
font-size: 36upx; |
|||
box-sizing: border-box; |
|||
line-height: 1.5; |
|||
.modal-content { |
|||
padding: 0 30upx 30upx; |
|||
} |
|||
&::after { |
|||
content: " "; |
|||
position: absolute; |
|||
left: 0; |
|||
bottom: -1px; |
|||
right: 0; |
|||
height: 1px; |
|||
border-bottom: 1px solid #EBEEF5; |
|||
transform-origin: 0 0; |
|||
transform: scaleY(.5); |
|||
} |
|||
} |
|||
|
|||
&__footer { |
|||
position: relative; |
|||
overflow: auto; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
color: #303133; |
|||
font-size: 36upx; |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
.xy-dialog__btn { |
|||
width: 50%; |
|||
text-align: center; |
|||
padding: 20upx 0; |
|||
&.xy-dialog__footer-cancel { |
|||
color: #909399; |
|||
} |
|||
&.xy-dialog__footer-confirm { |
|||
color: #409EFF; |
|||
} |
|||
&.xy-dialog__btn-row { |
|||
width: 100%; |
|||
text-align: center; |
|||
padding: 20upx 0; |
|||
&.xy-dialog__footer-confirm { |
|||
color: #409EFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
&__mask { |
|||
display: block; |
|||
position: absolute; |
|||
z-index: 1000; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: rgba(0,0,0,.2); |
|||
opacity: 0; |
|||
transition: opacity 200ms ease-in; |
|||
} |
|||
&__show { |
|||
.xy-dialog__container,.xy-dialog__mask { |
|||
opacity: 1; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue