微信小程序====＞模态输入框modal(弹窗输入框)

最新推荐文章于 2025-09-09 15:49:53 发布

原创

最新推荐文章于 2025-09-09 15:49:53 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #小程序

这篇博客详细介绍了在前端开发中如何使用Modal组件创建一个输入门店编号的弹窗，包括设置`bindconfirm`事件来处理用户点击确认时的逻辑，以及`bindcancel`事件用于处理取消操作的情况。内容主要涉及HTML、JavaScript和Vue.js相关知识。

<modal wx:if="{
   
   {inputModel}}" title="请输入门店编号" bindconfirm="handlestoreCodeOK" bindcancel="handlestoreCodeNo">
<input type="text" model:value="{
   
   {modelinput}}"/>
<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

雪酒呀

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序自定义文本输入框

挖到尽头

03-18

7278

本文摘录于：https://blog.youkuaiyun.com/ZNYSYS520/article/details/81878598-只是做学习备份之用，绝无抄袭之意，有疑惑请联系本人！这里参考git仓库,然后自行整理:https://gitee.com/waf2311/WeChatDiyModal.git 1.建立文件:component\modal\modal.wxml 他的内容如下: <!--文本弹窗https://blog.youkuaiyun.com/ZNYSYS520/article/details/81

微信小程序实战七：输入弹框的实现

博主逸尘

10-21

1682

文章目录1.界面效果2.界面布局3.页面逻辑4.源码修改 1.界面效果 2.界面布局 <view> <uni-popup ref="popup" type="dialog"> <uni-popup-dialog mode="input" type="info" title="PIN码" placeholder="请输入PIN码" :before-close="true" @confirm="dialogInputConfirm" @close="closeDia

参与评论您还未登录，请先登录后发表或查看评论

小程序实现弹出输入框

weixin_46001736的博客

11-02

1万+

小程序实现弹出输入框

微信小程序—自定义模态框

02-20

微信小程序自定义模态框插件资源，自用成功，欢迎下载。

小程序模态对话框开发实战：支持用户输入与交互

最新发布

weixin_35756624的博客

09-09

1317

htmltable {th, td {th {pre {简介：在移动端和网页应用开发中，模态对话框是一种常见且重要的交互组件，常用于用户确认、信息输入和操作反馈等场景。本项目围绕小程序中的API展开，详细讲解如何实现一个支持用户输入内容、包含确认和取消按钮的模态对话框。通过实际案例，开发者将掌握配置对话框属性、处理用户操作反馈以及优化用户体验设计的方法，适用于微信小程序等开发环境，帮助提升应用的交互体验与功能性。

微信小程序之封装带输入框的modal组件

MFMLN~ 星辰大海

08-05

2348

由于原生小程序自带modal不可输入，自己又不想因为一个可输入modal去特地引用一个ui框架，而且ui框架的组件风格并不一定和自己的项目一致，所以最后想最好的方法就自己封装两个，比较简单可供参考，之后需要用到类似的就可直接引用或在其基础上进行改动，方便多了。目录组件一：组件二组件一： <!-- wxml 1.mask是遮罩层，防止弹窗时用户点击其他处，modalShow控制整个组件的显隐； 2.modal是带输入框的modal容器 2-1.getValue事件获取输入值 2-2

微信小程序 弹出输入框

Faaaaaaq的博客

01-13

1119

微信小程序 弹出输入框。

微信小程序点击按钮在当前页面弹出一个弹窗输入数据

weixin_42579969的博客

01-12

3780

微信小程序中可以使用 wx.showModal 或 wx.prompt 来在当前页面弹出一个弹窗，让用户输入数据。使用 wx.showModal 时可以设置模态框的标题、内容和按钮文字，当用户点击确定或取消按钮时会返回一个对象，其中 confirm 属性表示用户是否点击了确定按钮，cancel 属性表示用户是否点击了取消按钮。示例： wx.showModal({ title:'提示',...

微信小程序 封装模态框modal组件（用法看描述中的博客）

02-28

在微信小程序开发中，模态框（Modal）是一种常见的用户交互元素，用于显示临时的通知、询问或确认信息。为了提高代码复用性和程序的可维护性，开发者常常会选择封装一个自定义的模态框组件。本篇文章将详细介绍如何...

小程序中，点击按钮或者图标，弹出输入框和键盘

Khoo5323的博客

03-24

5203

小程序中，点击按钮或者图标，弹出输入框和键盘

微信小程序自定义模态框

Sun_Maple_jw的博客

09-29

1390

效果展示可在模态框中添加图片输入框 代码展示-wxml <button class="show-btn" bindtap="showDialogBtn">弹窗</button> <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{{showModal}}"...

微信小程序点击弹出输入框

热门推荐

qq_43457714的博客

08-08

1万+

微信小程序点击弹出输入框 第一次写博客，我决定不要太old school。 let’s get it！最近在学习微信开发，刚接触到微信小程序，自己尝试着做了一个简单的小程序，过程中发现类似web开发中的点击弹出模态输入框的功能不好实现，于是找了许多文章，最终是实现了这个little bin，话不多说，骡子牵出来：需求很简单：点击编辑按钮可以编辑商家编号，上代码： wxml： <butto...

微信小程序--组件input输入框控件的使用示例源码

03-03

微信小程序定制过程中用到的Input输入框控件。 输入框在程序开发中是经常用到的，比较常见的地方，如：登录、注册、搜索等。另外输入框在不同的场景下，也会有不同的样式。这里给大家示范一下各种场景下的实例效果和代码。以便需要的时候直接采用。

小程序带输入框的弹窗

chaosama的博客

09-29

1万+

老规矩，直接上代码 <block wx:if="{{isShowConfirm}}"> <view class='toast-box'> <view class='toastbg'></view> <view class='showToast'> <...

微信小程序组件 - 中间底部弹出输入弹框

iotjin的专栏

08-28

5035

GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类一、 jh-input-alert 中间输入弹框，可设置最大输入长度，单行多行显示单行 <jh-input-alert title='输入框标题' placeholder='请输入' maxlength='10' bind:cancel='cancel' bind:confirm='confirm' wx:if='{{ showDialog2 }}' /> 多行 <jh-i.

微信小程序——输入框input

weixin_58963766的博客

07-08

7004

编写时为方便，写的一般是changeContent（），但这是缩写了，全部应该写changeContent：function（），也就是如图所示的方式。从展开的可以发现，（）是人家function的，所以自定义的事件的名称为changeContent。当输入框的内容发生变化时，通过事件对象 e 的 detail.value 属性可以获取到最新的输入框内容。可以结合下图，通过按路径查找的方式理解这句代码：通过不断修改输入文本框的内容发现，detail中包含的value的值在随着文本框内容变化而变化。

小程序点击按钮弹出可填写框

祈澈菇凉

12-23

6629

这是项目里面一个简单的效果，小程序点击按钮弹出可填写框，摘下代码，方便之后遇到的时候可以直接拿来使用。效果如下： wxml  <view wx:for="{{list}}" wx:key="{{index}}" class="item"> <view data-index="{{.

uni-app 微信小程序 弹出输入框

刘骐毓的博客

07-20

9846

弹出输入框样式效果图 1.html 弹出框和遮罩层 <view :hidden="userFeedbackHidden" class="popup_content"> <view class="popup_title">写下您的反馈意见</view> <view class="popup_textarea_item"&g...

微信小程序：模态框（弹窗）的实现

weixin_46001736的博客

12-11

2390

微信小程序：模态框（弹窗）的实现

微信小程序自定义模态对话框实现

本文将详细解析如何在微信小程序中实现自定义模态对话框，以满足更复杂的交互需求。通过自定义WXML、WXSS和JS文件，我们可以创建一个具有弹性和灵活性的对话框，包括标题、内容输入框以及自定义的确认和取消按钮。 ...