2. 程式人生 > 實用技巧 >uni-app實現點選彈窗輸入文字的互動操作（2）

uni-app實現點選彈窗輸入文字的互動操作（2）

阿新 • • 發佈：2020-09-14

結合之前的簡單案例，改進到實用版：

https://www.cnblogs.com/yoona-lin/p/13666959.html

<view class="login">
　　<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">修改庫存</view>
                        <view class="container">
                            <view class="pic">
                                <image src="../../static/logo.png" mode=""></image>
                            </view>
                            <
 
view class="content">
                                <view class="title">
                                    獲得合法手段和史蒂芬收到反饋和速度手段和史蒂芬收到反饋和速度手段和史蒂芬收到反饋和速度sdg貨速度 活動是否合適的
                                </view>
                                <view class="com-price">
                                    <
 
text>￥</text>
                                    <text class="price-num">{{234.03}}</text>
                                </view>
                            </view>
                        </view>
                        <view class="prompt-text">
                            <text>原庫存</text>
                            <text>{{stock}}</text>
                            <text>件</text>
                        </view>
                        <input class="prompt-input" type="text" @blur="_judge" :value="stock" placeholder="請輸入庫存數量" />
                        <view class="prompt-btn-group">
                            <button class="btn-item prompt-cancel-btn contentFontColor" @tap="_cancel">取消</button>
                            <button class="btn-item prompt-certain-btn" @tap="_confirm">確定</button>
                        </view>
                    </view>
                </view>
            </view>
        </view>
　　</view>

        <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="showClick">
                <view class="prompt-box" v-if="isHiddenClick" @click.stop="!showClick">
                    <view class="prompt-content contentFontColor">
                        <view class="prompt-title">加入採購</view>
                        <view class="container">
                            <view class="pic">
                                <image src="../../static/logo.png" mode=""></image>
                            </view>
                            <view class="content">
                                <view class="title">
                                    獲得合法手段和史蒂芬收到反饋和速度手段和史蒂芬收到反饋和速度手段和史蒂芬收到反饋和速度sdg貨速度 活動是否合適的
                                </view>
                                <view class="com-price">
                                    <text>￥</text>
                                    <text class="price-num">{{234.03}}</text>
                                </view>
                            </view>
                        </view>
                        <view class="prompt-text">
                            <text>原庫存</text>
                            <text>{{stock}}</text>
                            <text>件</text>
                        </view>
                        <view class="click-num">
                            <text class="text">數量:</text>
                            <view class="click-btn">
                                <button class="btn-item reduce" type="default" @tap="reduce">-</button>
                                <input class="btn-item click-input" type="text" @input="inputNum" @blur="judgeNum" :value="number" />
                                <button class="btn-item increase" type="default" @tap="increase">+</button>
                            </view>
                        </view>
                        <view class="prompt-btn-group">
                            <button class="btn-item prompt-cancel-btn contentFontColor" @tap="_cancelClick">取消</button>
                            <button class="btn-item prompt-certain-btn" @tap="_confirmClick">確定</button>
                        </view>
                    </view>
                </view>
            </view>
        </view>

data() {
            return {
                // promptText: '',
                text: '',
                // multipleSlots: true, // 在元件定義時的選項中啟用多slot支援
                isHidden: false,
                isHiddenClick: false,
                stock: '12',

                number: 1,
            };
        },

/*
            引入彈窗prompt外掛
            */
            hide: function() {
                this.isHidden = !this.isHidden;
            },

            show: function() {
                this.isHidden = !this.isHidden;
            },
            /*
             * 內部私有方法建議以下劃線開頭
             * triggerEvent 用於觸發事件
             */
            _cancel() {
                //觸發cancel事件，即在外部，在元件上繫結cancel事件即可，bind:cancel，像繫結tap一樣
                this.stock = this.stock;
                this.isHidden = !this.isHidden;
            },
            _confirm() {
                let stock = this.stock;
                if (stock == '') {
                    uni.showModal({
                        title: '你還未輸入',
                    })
                    return;
                } else {
                    this.isHidden = !this.isHidden;
                    // uni.showModal({
                    //     title: '提示',
                    //     content: '你輸入的是:' + _cost,
                    //     showCancel: false,
                    //     confirmText: "確定"
                    // })
                }
            },
            _judge(e) {
                //將引數傳出去，這樣在getInput函式中可以通過e去獲得必要的引數
                //this.triggerEvent("getInput",e.detail);
                let number = e.detail.value;
                let stock = this.stock;
                if (number < 1) {
                    uni.showModal({
                        title: '不能少於1件',
                        //     content: '你輸入的是:' + _cost,
                        showCancel: false,
                        confirmText: "確定"
                    })
                    this.number = 1;
                } else {
                    this.stock = number;
                }
            },


            hideClick: function() {
                this.isHiddenClick = !this.isHiddenClick;
            },

            showClick: function() {
                this.isHiddenClick = !this.isHiddenClick;
            },
            /*
             * 內部私有方法建議以下劃線開頭
             * triggerEvent 用於觸發事件
             */
            _cancelClick() {
                //觸發cancel事件，即在外部，在元件上繫結cancel事件即可，bind:cancel，像繫結tap一樣
                this.number = 1;
                this.isHiddenClick = !this.isHiddenClick;

            },
            _confirmClick() {
                let number = this.number;
                if (number == '') {
                    uni.showModal({
                        title: '你還未輸入',
                        showCancel: false,
                        confirmText: "確定"
                    })
                    return;
                } else {
                    this.isHiddenClick = !this.isHiddenClick;
                    // uni.showModal({
                    //     title: '提示',
                    //     content: '你輸入的是:' + _cost,
                    //     showCancel: false,
                    //     confirmText: "確定"
                    // })
                }
            },
            inputNum(e) {
                
            },

            judgeNum(e) {
                let number = e.detail.value;
                let stock = this.stock;
                if (number < 1) {
                    uni.showModal({
                        title: '不能少於1件',
                        //     content: '你輸入的是:' + _cost,
                        showCancel: false,
                        confirmText: "確定"
                    })
                    this.number = 1;
                } else if (number >= stock) {
                    uni.showModal({
                        title: '超出庫存,請重新輸入',
                        //     content: '你輸入的是:' + _cost,
                        showCancel: false,
                        confirmText: "確定"
                    })
                    this.number = this.stock;
                } else {
                    this.number = number;
                }
            },

            reduce: function() {
                if (this.number === 1) {
                    this.number = 1;
                    uni.showModal({
                        title: '不能少於一件',
                        //     content: '你輸入的是:' + _cost,
                        showCancel: false,
                        confirmText: "確定"
                    })
                } else {
                    this.number = this.number - 1;
                }
            },
            increase: function() {

                if (this.number < this.stock) {
                    this.number += 1;
                } else {
                    uni.showModal({
                        title: '不能超過庫存',
                        //     content: '你輸入的是:' + _cost,
                        showCancel: false,
                        confirmText: "確定"
                    })
                    this.number = this.stock;

                }
            }

/* 登入按鈕 */
.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: -140rpx;
  width: 100%;
  height: 120%;
  z-index: 11;
  background: rgba(209, 209, 209, 0.3);
  font-size: 30rpx;
}

.container{
    padding: 10rpx;
    display: flex;
    background-color: #e8e8e8;
}
.container .pic image{
    width: 140rpx;
    height: 140rpx;
    margin-right: 16rpx;
    margin-left: 10rpx;
}
.container .content{
    line-height: 50rpx;
    text-align: left;
    width: 70%;
}
.container .content .title{
    font-size: 28rpx;
    margin: 0 10rpx 20rpx 0;
    color: #585858;
    height: 78rpx;
    line-height: 42rpx;
    overflow: hidden; //一定要寫
    text-overflow: ellipsis; //超出省略號
    display: -webkit-box; //一定要寫
    -webkit-line-clamp: 2; //控制行數
    -webkit-box-orient: vertical;
}
.container .content .com-price{
    color: #585858;
    font-weight: 600;
}
.prompt-text text{
    font-size: 32rpx;
}



.prompt-content {
  position: absolute;
  left: 50%;
  top: 600rpx;
  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: 4rpx 0;
  text-align: center;
  font-size: 30rpx;
  color: #000000;
  /* border-bottom: 2rpx solid gray; */
}
.prompt-input{
  margin: auto;
  margin-top: 10rpx;
  margin-bottom: 70rpx;
  padding: 4rpx 0;
  width: 60%;
  height:30rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
}
.prompt-btn-group{
  display: flex;
}

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

.prompt-input{
  margin: auto;
  margin-top: 10rpx;
  margin-bottom: 70rpx;
  padding: 4rpx 0;
  width: 60%;
  height:30rpx;
  border: 1px solid #ccc;
  border-radius: 10rpx;
}


.click-num{
    display: flex;
    margin-left: 10%;
    margin-top: -30rpx;
}
.click-num .text{
    padding: 20rpx;
    width: 100rpx;
}
.click-num .click-btn{
    display: flex;
}
.click-num .click-btn .btn-item{
    /* display: inline-block; */
    width: 40rpx;
    height: 40rpx;
    font-size: 28rpx;
    text-align: center;
    line-height: 20rpx;
    float: left;
    padding: 10rpx;
    margin-top: 48rpx;
}
.click-num .click-btn .reduce{
    
}
.click-num .click-btn .click-input{
    border-top: 0 solid #D9D9D9;
    border-bottom: 0 solid #D9D9D9;
    padding: 0 10rpx;
    width: 80rpx;
}
.click-num .click-btn .increase{
    
}

樣式有問題再調整！！！

相關推薦

uni-app實現點選彈窗輸入文字的互動操作（2）

結合之前的簡單案例，改進到實用版： https://www.cnblogs.com/yoona-lin/p/13666959.html

uni-app實現點選彈窗輸入文字的互動操作（3）

uni-app實現點選彈窗輸入文字 寫成元件 前面的學習： uni-app實現點選彈窗輸入文字的互動操作

uni-app實現點選複製按鈕複製前面的內容

/* 複製按鈕的實現 */ copy(value) { //提示模板 uni.showModal({ content: value, //模板中提示的內容

vue整合openlayers載入geojson並實現點選彈窗教程

本文例項為大家分享了vue+openlayers載入geojson並實現點選彈窗教程，供大家參考，具體內容如下

jquery實現點選彈出對話方塊

本文例項為大家分享了jquery實現點選彈出對話方塊的具體程式碼，供大家參考，具體內容如下

uni-app 圖片點選放大預覽圖片 單張 多張

技術標籤：小程式初學者筆記vuejs //單張圖片 previewImg(logourl) { let _this = this; let imgsArray = [];

vue點選彈窗自動觸發點選事件的解決辦法(模擬場景)

業務場景：使用vue +element ui 的el-dialog，點選彈窗之後，預設載入第一個按鈕的資料進行初始化。

取消button的點選效果_0基礎掌握Django框架（43）點選劫持攻擊

技術標籤：取消button的點選效果網頁按鈕點選沒反應頁面載入預設點選button頁面載入預設點選一次button

【C#】通過點選事件與資料庫進行互動資料（分析篇）

前言：本文主要以分析需求的角度去實現功能，側重點是分析而不是程式碼的實現，所以本文中提供的程式碼較少，重在培養初學者的分析需求問題的意識。

vue實現點選按鈕“檢視詳情”彈窗展示詳情列表操作

html： <template> <div> <Modal v-model=\"classStatus\" width=\"900\" title=\"詳情：\" :styles=\"{top: \'80px\'}\">

vue中實現點選空白區域關閉彈窗的兩種方法

1. 第一種做法 首頁在外層容器裡面取一個名字為main，即ref=\"main\",當bankSwitch為true的時候，彈窗出現

vue+elementui實現點選table中的單元格觸發事件--彈框

elementui中提供了點選行處理事件 檢視位置： elementui的table事件 elementui的table中怎樣點選某個單元格觸發事件？

vue.js實現點選按鈕和彈出層其他位置彈出層消失方法

這其實是一個很常見的彈出層效果，滑鼠點選按鈕切換彈出層的顯示，點選其他區域彈出層消失，用javascript繫結事件可能幾行程式碼就搞定了，但是vue.js的狀態驅動模式和javascript的事件驅動模式是不同的，下面是使用

關於element如何實現點選行資料後臺彈出展開行資訊

1:首先設定table的屬性 如下圖: 第一個屬性row-key行資料的 Key，用來優化 Table 的渲染；在使用 reserve-selection 功能與顯示樹形資料時，該屬性是必填的。型別為 String 時，支援多層訪問：user.info.id，但不

Android實現點選某個按鈕指定位置彈出佈局

本文例項為大家分享了Android實現點選某個按鈕指定位置彈出佈局，供大家參考，具體內容如下

用Javascript實現點選input輸入框後輸入框的提示文字消失,並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

技術標籤：JScsshtmljavascript 用Javascript實現點選input輸入框後輸入框的提示文字消失。並且邊框顏色發生變化（包含input框的password型別如何顯示提示文字）

Android中實現一個可拖動的懸浮按鈕，點選彈出選單的功能

如圖： 實現思路通過重寫控制元件的onTouchEvent方法監聽觸控效果通過View的setX()和setY()方法實現移動使用屬性動畫實現邊緣吸附效果手指按下首先是處理手指按壓下的事件，這裡我們把拖拽識別符號設定為false並記

直播app系統原始碼，canvas上放置按鈕並實現點選之後全屏顯示

直播app系統原始碼，canvas上放置按鈕並實現點選之後全屏顯示 html               <div style=\"\">                <div class=\"canvas-div\">                  <canvas

android 使用kotlin 實現點選更換全域性語言(中日英切換)

> 因為我的工作要用kotlin所以今天在這裡給大家總結一下關於全域性語言切換的kotlin語言實現實現，很簡單，希望在這裡可以幫助到有需要的同學，下面簡單說一下實現步驟，會把執行截圖放在最後<

Django+uni-app實現資料通訊中的請求跨域的示例程式碼

前後端分離的模式下，後端使用Django RestFramework，前端使用uni-app來進行APP的開發。