uni-app實現點擊彈窗輸入文本的交互操作（3）（組件化）

uni-app實現點擊彈窗輸入文本

寫成組件

前面的學習：

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