mpvue实现自定义带有输入框的弹框

最新推荐文章于 2025-05-21 15:29:06 发布

原创

最新推荐文章于 2025-05-21 15:29:06 发布 · 2.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#自定义输入框弹框 #mpvue #输入框

本文介绍了如何利用mpvue框架来实现一个具有输入框功能的自定义弹窗。通过展示效果图、HTML结构、JavaScript逻辑以及CSS样式，详细阐述了创建过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述
html

<!--填写手机号弹框-->
  <div class="modalMask" v-if="isModel"></div>
  <div class="modalDialog" v-if="changeModel">
    <div class="modalContent">
      <p class="contentTip">请指定手机号</p>
      <input type="number" placeholder="请输入手机号" class="teleStyle" v-model="phoneNumber" maxlength="11">
    </div>
    <div class="modalFooter">
      <div class="btnCancel" @tap="tapCancel">取消</div>
      <div class="btnConfirm" @tap="confirmSend">确定发送</div>
    </div>
  </div>

script部分

export default {
    name: "reliefInsureInfo.vue",
    props: ['noCarProposalInfo','imageInfo'],
    data(){
      return{
        changeModel: true,
        isModel: true,
        phoneNumber: '',
      }
    },
    watch:{
    },
    methods:{
      // 打开输入手机