文章图片
【uniapp 输入对话框 漂亮】l-modal.vue
{{modalTitle}}
{{cancelText}}
{{confirmText}}
>
export default {
props: {
// 是否显示蒙层
showMasking: {
type: Boolean,
default: true
},
// 蒙层背景色
bgColor: {
type: String,
default: 'rgba(0,0,0,.6)'
},
// 模态框标题
modalTitle: {
type: String,
default: ''
},
// 取消按钮文字
cancelText: {
type: String,
default: '取消'
},
// 确定按钮文字
confirmText: {
type: String,
default: '确定'
},
// 取消按钮文字颜色
cancelTextColor: {
type: String,
default: '#666'
},
// 确定按钮文字颜色
confirmTextColor: {
type: String,
default: '#5999FF'
}
},
data() {
return {
isShowModal: false,
inputSerialNum: null
}
},
methods: {
showModal() {
this.isShowModal = true
},
handleCancel() {
this.isShowModal = false
this.$emit('onClickCancel', 'cancel')
},
handleConfirm() {
this.isShowModal = false
this.$emit('onClickConfirm', this.inputSerialNum)
}
}
}
scoped>
.masking {
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
z-index: 999;
} .model-wraper {
width: 600rpx;
background-color: #fff;
border-radius: 16rpx;
position: absolute;
z-index: 1000;
top: 50%;
left: 50%;
margin-top: -161rpx;
margin-left: -300rpx;
box-shadow: #dcdcdc 0px 0px 20rpx;
} .modal-title {
height: 90rpx;
line-height: 90rpx;
width: 100%;
text-align: center;
font-size: 32rpx;
color: #666;
} .modal-body {
padding: 30rpx 30rpx 80rpx 30rpx;
} .btn {
width: 300rpx;
height: 90rpx;
text-align: center;
line-height: 90rpx;
font-size: 32rpx;
float: left;
border-top: 1rpx solid #ddd;
} .btn.cancel {
width: 299rpx;
border-right: 1rpx solid #dcdcdc;
}
this.$refs['customModal'].showModal()
推荐阅读
- 学习笔记|uni-app开发小程序
- uni-app开发（四）（项目实战之仿糗百搜索页）
- uni-app开发（二）（基础组件及样式）
- uni-app开发（三）（项目实战之仿糗百首页）
- uni-app开发（一）（准备工作及环境配置）
- view里面内容左对齐或者右对齐