uni-app實現點擊彈窗輸入文本的交互操作

研究出來了，結合網上的方法，寫出一個最簡單的彈窗輸入文本頁面

 

 

 

代碼：

<view class="login">
            <!-- <view class="login-btn" @tap="prompt">
                <prompt ref="prompt" @onConfirm="onConfirm" @onCancel="onCancel" title="提示" :text="promptText"></prompt>
            </view> -->
            <view class="login-btn" @click="show">
                <view class="prompt-box" v-if="isHidden" @click.stop="!show">
                    <view class="prompt-content contentFontColor">
                        <view class="prompt-title">{{title}}</view>
                        <view class="prompt-text">{{text}}</view>
                        <input class="prompt-input" type="text" @input="_input" :value="cost" />
                        <view class="prompt-btn-group">
                            <button class="btn-item prompt-cancel-btn contentFontColor" @tap="_cancel">{{btn_cancel}}</button>
                            <button class="btn-item prompt-certain-btn" @tap="_confirm">{{btn_certain}}</button>
                        </view>
                    </view>
                </view>
            </view>
        </view>

data() {
            return {
                // promptText: '',
                // isHidden: true,
                title: '提示',
                btn_cancel: '取消',
                btn_certain: '確定',
                text: '',
                multipleSlots: true, // 在組件定義時的選項中啟用多slot支持
                isHidden: false,
                cost: ''
            };
        },

hide: function() {
                this.isHidden = true;
            },

            show: function() {
                this.isHidden = !this.isHidden;
            },
            /*
             * 內部私有方法建議以下划線開頭
             * triggerEvent 用於觸發事件
             */
            _cancel() {
                //觸發cancel事件，即在外部，在組件上綁定cancel事件即可，bind:cancel，像綁定tap一樣
                this.cost = '';
                this.isHidden = !this.isHidden;

            },
            _confirm() {
                let _cost = this.cost;
                if (_cost == '') {
                    uni.showModal({
                        title: '你還未輸入',
                    })
                    return;
                } else {
                    // this.$refs.prompt.hide();
                    uni.showModal({
                        title: '提示',
                        content: '你輸入的是:' + _cost,
                        showCancel: false,
                        confirmText: "確定"
                    })
                }
            },
            _input(e) {
                //將參數傳出去，這樣在getInput函數中可以通過e去獲得必要的參數
                //this.triggerEvent("getInput",e.detail);
                this.cost = e.detail.value;
            }

/* 登錄按鈕 */
.login{
    width: 100%;
    margin: auto;
    margin-top: 140rpx;
}
.login .login-btn{
    width: 86%;
    height: 90rpx;
    border-radius: 45rpx;
    line-height: 90rpx;
    font-size: 40rpx;
    color: #a4c572;
    background-color: #FFFFFF;
    text-align: center;
    margin: auto;
}

/* components/vas-prompt/vas-prompt.wxss */
.prompt-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
  background: rgba(209, 209, 209, 0.5);
}

.prompt-content {
  position: absolute;
  left: 50%;
  top: 40%;
  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%); 
  overflow: hidden;
  background: #fff;
}

.prompt-title {
  width: 100%;
  padding: 20rpx 0;
  text-align: center;
  font-size: 40rpx;
  border-bottom: 2rpx solid gray;
}
.prompt-input{
  margin: 8%;
  padding: 10rpx 15rpx;
  width: 80%;
  height:85rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
}
.prompt-btn-group{
  display: flex;
}

.btn-item {
  width: 35%;
  margin-bottom: 20rpx;
  height: 100rpx;
  line-height: 100rpx;
  background-color: white;
  justify-content: space-around;
}
.prompt-certain-btn{
  color: white;
  background-color: #4FEBDE;
}
.prompt-cancel-btn{
  border: 1px solid #4FEBDE;
}
.contentFontColor {
  color: #868686;
}
.prompt-text{
    margin-top:15rpx;
    font-size:38rpx;
}

 

 

 這是在一個頁面上的，沒有將彈窗寫成組件，因為開始時是組件出來不少問題。。。。改成這個了

 還有很多要修改的，后面更新！！！

已更新：https://www.cnblogs.com/yoona-lin/p/13668921.html

有時間就換成組件試試看

參考：https://blog.csdn.net/anlixi/article/details/85346979