uniapp 弹窗输入

借鉴链接：https://blog.csdn.net/qq_40894259/article/details/110200721

<template>
    <view class="container">
        <view :hidden="textDialogHidden" class="popup_content">
            <view class="popup_title">{{dialogTitle}}</view>
            <uni-table :isEmptyText="false">
                <uni-tr>
                    <uni-td>内容：</uni-td>
                    <uni-td><input type="text" :value="textContent" @input="textInput" placeholder="请输入"/></uni-td>
                </uni-tr>
            </uni-table>
            <uni-table :isEmptyText="false">
                <uni-tr>
                    <uni-td>
                        <button type="default" @click="hideDiv()">取消</button>
                    </uni-td>
                    <uni-td>
                        <button type="default" @click="submitFeedback()">确定</button>
                    </uni-td>
                </uni-tr>
            </uni-table>
        </view>
        <view class="popup_overlay" :hidden="textDialogHidden"></view> <!-- @click="hideDiv()" -->
        
        <uni-table :isEmptyText="false" >
            <uni-tr v-for="(row,idx) in Table" :key="idx">
                <uni-td><view>{{row.ID}}</view></uni-td>
                <uni-td>
                    <input type="text" disabled="false" class="textStyle" :value="row.NM" @click="showDiv(idx, '标题')" />
                </uni-td>
            </uni-tr>
        </uni-table>
        
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                    Table:[],                    //数据列表
                    
                    textDialogHidden: true,     // 是否显示弹窗，默认隐藏
                    textContent: '' ,            // 输入备注
                    dialogTitle:'',                //编辑行提示
                    dialogIdx:'',                //编辑行下标
            }
        },
        methods:
        {
            //获取输入的值
            textInput(e)
            {
                this.textContent = e.detail.value;
            },
            // 显示输入弹出框
            showDiv(id,title) 
            {
                this.textDialogHidden = false;
                this.dialogTitle = title;
                this.dialogIdx = id;
            },
            // 隐藏输入弹出框
            hideDiv() 
            { 
                this.textDialogHidden = true;
            },
            //修改
            submitFeedback() 
            { 
                this.Table[this.dialogIdx].NM = this.textContent;
                //this.Table.splice(要替换下标, 替换个数, 替换元素);
                this.Table.splice(this.dialogIdx, 1, this.Table[this.dialogIdx]);
                // console.log(JSON.stringify(this.Table));
                this.textContent = "";
                this.textDialogHidden = true;
            }
        }
        ,onLoad()
        {
            for(var i = 1; i < 6; i++)
            {
                var row = 
                {
                    "ID":i,
                    "DT":(new Date().toISOString().slice(0, 10)) + " " + (new Date().toTimeString().slice(0, 8)),
                    "NM":"",
                };
                this.Table.unshift(row);
            }
        }
    
    }
</script>

<style>
    .container
    {
        position: relative;
        padding-bottom: 100rpx;
    }
    .textStyle
    {
        font-size: 12px;
        background-color:#F3F3F3;
    }
    
    /* 弹窗样式 */
    .popup_overlay 
    {
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        z-index: 1001;
        -moz-opacity: 0.8;
        opacity: .80;
        filter: alpha(opacity=88);
    }
    .popup_content 
    {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 520rpx;
        height: 220rpx;
        margin-left: -270rpx;
        margin-top: -270rpx;
        border: 10px solid white;
        background-color: white;
        z-index: 1002;
        overflow: auto;
    } 
    .popup_title 
    {
        font-size: 40rpx;
        color: #5677FC;
    }
    
</style>