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

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

uni-app實現點選彈窗輸入文字

寫成元件

前面的學習：

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

元件形式：

主頁面：

<view class="login">
            <view class="login-btn" @click="show">
                <prompt ref="prompt" @onConfirm="onConfirm" @onCancel="onCancel" title="提示"></prompt>
            </ 
view>
        </view>

import prompt from '../prompt/prompt.vue';

data() {
   return {
   };
  },

  components: {
   prompt,
  },

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

元件：prompt.vue 與 prompt.css

<template>
    <view class="prompt">
        <!-- prompt彈窗外掛 -->

        <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>
</template>

<script>
    var http = require("../../utils/http.js");

    export default {
        data() {
            return {
                text: '',
                isHidden: false,
                stock: '12',
                number: 1,
            };
        },

        components: {},
        props: {

        },
        computed: {
            i18n() {
                return this.$t('index')
            }
        },

        /**
         * 生命週期函式--監聽頁面載入
         */
        onLoad: function(options) {
            //載入分銷員推廣
            // console.log(decodeURIComponent(options.scene))
            //   this.setData({
            //     scene: options.scene
            //   });
            //   this.getClaimerList(this.shopid);
        },

        /**
         * 生命週期函式--監聽頁面初次渲染完成
         */
        onReady: function() {},

        /**
         * 生命週期函式--監聽頁面顯示
         */
        onShow: function() {
            //頭部導航標題
            uni.setNavigationBarTitle({
                title: this.i18n.logisticsDetails
            });
        },

        /**
         * 生命週期函式--監聽頁面隱藏
         */
        onHide: function() {},

        /**
         * 生命週期函式--監聽頁面解除安裝
         */
        onUnload: function() {},

        /**
         * 頁面相關事件處理函式--監聽使用者下拉動作
         */
        onPullDownRefresh: function() {},

        /**
         * 頁面上拉觸底事件的處理函式
         */
        onReachBottom: function() {},

        /**
         * 使用者點選右上角分享
         */
        onShareAppMessage: function() {},
        methods: {
            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;
                }
            },
        }
    }
</script>
<style>
    @import "./prompt.css";
</style>

/* 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;
}