本文摘录于:只是做学习备份之用,绝无抄袭之意,有疑惑请联系本人!
这里参考git仓库,然后自行整理:https://gitee.com/waf2311/WeChatDiyModal.git
1.建立文件:component\modal\modal.wxml
他的内容如下:
<template name="TextPopupBox">
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{hintinfo.ishow}}"></view>
<view class="modal-dialog" wx:if="{{hintinfo.ishow}}">
<view class="modal-title">{{hintinfo.title}}</view>
<view class="modal-content">
<view class="modal-input">
<input placeholder-class="input-holder" type="number" bindinput="inputChange" class="input" placeholder="{{hintinfo.inputplaceholder}}" maxlength="11"></input>
</view>
</view>
<view class="modal-footer">
<view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{hintinfo.canletext}}</view>
<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{hintinfo.confirmtext}}</view>
</view>
</view>
</template>
2.在需要弹窗的page的wxml文件中,这样来引用:
<import src="../../component/modal/modal.wxml" />
<template is="TextPopupBox" data="{{hintinfo}}"/>
3.在page的js文件的data字段中加入如下声明:
/*文本弹窗类的特定数据
*ishow是否显示,默认不显示
*title弹窗标题,数据过多的时候会分行显示
*inputplaceholder输入框预输入内容
*inputValue当前输入的值,onConfirm事件可通过该值确定输入的内容
*confirmtext确认按钮显示的文字
*canletext取消按钮显示的文字
*/
hintinfo: {
ishow: false,
title: "注意:手机号是获取云文件的凭证,输入错误将获取不到之前的文件",
inputplaceholder: "请输入手机号",
inputValue: "",
confirmtext: "确定",
canletext: "取消"
},
3.在page的js文件加入如下代码:
/*.............................................文本弹窗类开始.............................................*/
/**
* 文本弹窗
*/
showDialogBtn: function() {
var that = this;
var _hintinfo = that.data.hintinfo;
_hintinfo.ishow = true;
that.setData({
hintinfo: _hintinfo
})
},
/**
* 弹出框蒙层截断touchmove事件
*/
preventTouchMove: function () {
},
/**
* 隐藏模态对话框
*/
hideModal: function () {
var that = this;
var _hintinfo = that.data.hintinfo;
_hintinfo.ishow = false;
that.setData({
hintinfo: _hintinfo
})
},
/**
* 对话框取消按钮点击事件
*/
onCancel: function () {
this.hideModal();
util.showHintModal("请注意:取消输入将不能够获取到云文件,并且和文件相关功能不能够使用");
},
/**
* 对话框确认按钮点击事件
*/
onConfirm: function (res) {
this.hideModal();
console.log("set phone:",this.data.hintinfo.inputValue)
if(this.data.hintinfo.inputValue.length!=11)
{
util.showHintModal("手机号格式错误,请重新输入!");
this.showDialogBtn()
}
},
/**
* 对话框湿输入数据改变事件
*/
inputChange: function (res) {
this.data.hintinfo.inputValue = res.detail.value;
}
/*.............................................文本弹窗类结束.............................................*/
经过上面的修改已经可以弹出一个文本框了
微信小程序文本框输入
这里没有把代码也引用,因为这样做太复杂了!补充说明:
上面的处理有一个地方没有说,其实不算完整,就是wxss文件没有做说明,要让一个wxml文件能够布局成功,这里还必须要用wxss里面的对象做辅助,所以修改modal目录下增加一个modal.wxss文件:
/* component\modal\modal.wxss*/
.show-btn {
margin-top: 100rpx;
color: #22cc22;
}
.modal-mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: #000;
opacity: 0.5;
overflow: hidden;
z-index: 9000;
color: #fff;
}
.modal-dialog {
width: 540rpx;
overflow: hidden;
position: fixed;
top: 50%;
left: 0;
z-index: 9999;
background: #f9f9f9;
margin: -180rpx 105rpx;
border-radius: 36rpx;
}
.modal-title {
padding-top: 50rpx;
font-size: 36rpx;
color: #030303;
text-align: center;
}
.modal-content {
padding: 50rpx 32rpx;
}
.modal-input {
display: flex;
background: #fff;
border: 2rpx solid #ddd;
border-radius: 4rpx;
font-size: 28rpx;
}
.input {
width: 100%;
height: 82rpx;
font-size: 28rpx;
line-height: 28rpx;
padding: 0 20rpx;
box-sizing: border-box;
color: #333;
}
input-holder {
color: #666;
font-size: 28rpx;
}
.modal-footer {
display: flex;
flex-direction: row;
height: 86rpx;
border-top: 1px solid #dedede;
font-size: 34rpx;
line-height: 86rpx;
}
.btn-cancel {
width: 50%;
color: #666;
text-align: center;
border-right: 1px solid #dedede;
}
.btn-confirm {
width: 50%;
color: #ec5300;
text-align: center;
}
在需要引用modal的地方载入这个文件:
@import "../../component/modal/modal" ;
为了方便书写,wxml文件也不包含文件后缀:
<import src="../../component/modal/modal" />
<template is="TextPopupBox" data="{{...hintinfo}}"/>
补充说明
经过上次的修改后,modal.wxml文件中不再适合直接引用hintinfo变量,而是直接引用其内部成员,注意模块引用方法修改如下:
<import src="../../component/modal/modal" />
<template is="TextPopupBox" data="{{...hintinfo}}"/>
modal.wxml文件内容如下:
<template name="TextPopupBox">
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{ishow}}"></view>
<view class="modal-dialog" wx:if="{{ishow}}">
<view class="modal-title">{{title}}</view>
<view class="modal-content">
<view class="modal-input">
<input placeholder-class="input-holder" type="number" bindinput="inputChange" class="input" placeholder="{{inputplaceholder}}" maxlength="11"></input>
</view>
</view>
<view class="modal-footer">
<view class="btn-cancel" bindtap="onCancel" data-status="cancel">{{canletext}}</view>
<view class="btn-confirm" bindtap="onConfirm" data-status="confirm">{{confirmtext}}</view>
</view>
</view>
</template>