uniapp 微信小程序 弹出框 带输入框 带html

代码分享

👍记得点赞哦 😄

👇大佬请看👇

  • html:
<modal v-if="showModal" class="showModal" title="  " confirm-text="确定" cancel-text="取消" @cancel="cancelWin" @confirm="Review">
    <span>拒绝原因:</span>
    <textarea class="RefuseText" placeholder="请填写具体原因" v-model="contentPop" />
</modal>
// (我没有填写title是因为 鼠标悬浮会有提示  //  各位可以试试 )
  • js:
// 点击取消
cancelWin() {  //取消
    this.contentPop = ''// 清空数据
    this.showModal = false// 关闭弹框
},
// 点击确定
Review(){
        this.showModal = true // 打开弹框
        if(this.contentPop.length < 1) {  //是否输入内容
            uni.showToast({
                title: '请填写内容!',
                icon: 'none',
            })
            return
        }
    console.log(this.contentPop)//;逻辑处理
    },
  • css:
         .showModal span{
             color:#565656;
         }
        .RefuseText {
         height: 80rpx;
         width: 94%;
         border: 1px solid;
         margin-top: 10rpx; 
         padding: 8rpx 14rpx;
         border-radius: 10rpx;
        }

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

都看👓完了,就👍1️⃣👇吧!
☺ 欢迎评论探讨 ☺

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐