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

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️⃣👇吧！
☺ 欢迎评论探讨 ☺