1

simple-demo/mycopy.html

@@ -155,6 +155,13 @@
                 </draggable>
 
                 <div v-if="!readOnly">
+                    <el-button
+                            type="primary"
+                            size="small"
+
+                            @click="addContentItem(activeTab)">
+                        添加内容项
+                    </el-button>
                     <!-- 新增控制按钮 -->
                     <el-button
                             type="info"
@@ -162,57 +169,40 @@
                             @click="showOptions = !showOptions">
                         {{ showOptions ? '隐藏选项' : '显示选项' }}
                     </el-button>
-                    <!-- 添加内容项 -->
-                    <div class="add-item" v-if="showOptions"> <!-- 使用 v-if 控制显示 -->
-                        <el-input
-                                v-model="newItemKey[activeTab]"
-                                placeholder="键名"
-                                type="textarea"
-                                autosize style="width: 200px; margin-right: 10px;"></el-input>
-                        <el-input
-                                v-model="newItemValue[activeTab]"
-                                type="textarea"
-                                autosize
-                                placeholder="键值"
-                                style="width: 200px; margin-right: 10px;"></el-input>
-                        <el-button
-                                type="primary"
-                                @click="addContentItem(activeTab)"
-                                :disabled="!newItemKey[activeTab] || !newItemValue[activeTab]">
-                            添加内容项
-                        </el-button>
-                    </div>
-                    <br>
+                    <br/>
+                    <br/>
                     <!-- 添加新标签页 -->
                     <div class="add-tab" v-if="!readOnly && showOptions">
                         <el-input
                                 v-model="newTabName"
+                                size="small"
                                 placeholder="新标签页名称"
                                 style="width: 200px; margin-right: 10px;"></el-input>
                         <el-button
                                 type="primary"
+                                size="small"
                                 @click="addTab"
                                 :disabled="!newTabName || myObj[newTabName]">
                             添加标签页
                         </el-button>
+                        <!-- 修改当前标签名 -->
+                        <el-button
+                                type="primary"
+                                size="small"
+                                @click="editTabName(activeTab)"
+                                v-if="showOptions"> <!-- 使用 v-if 控制显示 -->
+                            修改当前标签名
+                        </el-button>
+                        <!-- 删除当前标签页 -->
+                        <el-button
+                                type="danger"
+                                size="small"
+                                @click="deleteTab(activeTab)"
+                                v-if="showOptions"> <!-- 使用 v-if 控制显示 -->
+                            删除当前标签页
+                        </el-button>
                     </div>
-                    <br>
-                    <!-- 修改当前标签名 -->
-                    <el-button
-                            type="primary"
-                            size="small"
-                            @click="editTabName(activeTab)"
-                            v-if="showOptions"> <!-- 使用 v-if 控制显示 -->
-                        修改当前标签名
-                    </el-button>
-                    <!-- 删除当前标签页 -->
-                    <el-button
-                            type="danger"
-                            size="small"
-                            @click="deleteTab(activeTab)"
-                            v-if="showOptions"> <!-- 使用 v-if 控制显示 -->
-                        删除当前标签页
-                    </el-button>
+
 
 
                 </div>
@@ -223,6 +213,21 @@
 
 
     </el-tabs>
+    <!-- 新增和编辑对话框 -->
+    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
+        <el-form :model="form" label-width="80px">
+            <el-form-item label="键名">
+                <el-input v-model="form.key" autocomplete="off"></el-input>
+            </el-form-item>
+            <el-form-item label="键值">
+                <el-input v-model="form.value" type="textarea" autosize></el-input>
+            </el-form-item>
+        </el-form>
+        <span slot="footer" class="dialog-footer">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+        </span>
+    </el-dialog>
 </div>
 
 <script>
@@ -259,6 +264,14 @@
             editingKey: '',
             readOnly: false,
             showOptions: false, // 新增变量控制按钮显示和隐藏
+            dialogVisible: false,
+            dialogTitle: '',
+            form: {
+                key: '',
+                value: ''
+            },
+            currentTabName: '',
+            currentKey: ''
         },
         mounted() {
             pageManager.init().then(res => {
@@ -370,13 +383,35 @@
 
             // 添加内容项
             addContentItem(tabName) {
-                const key = this.newItemKey[tabName];
-                const value = this.newItemValue[tabName];
-                if (!key || !value) return;
-                this.myObj[tabName].push({key, value});
-                this.newItemKey[tabName] = '';
-                this.newItemValue[tabName] = '';
-                _this.updateData();
+                this.dialogTitle = '新增内容项';
+                this.currentTabName = tabName;
+                this.form.key = '';
+                this.form.value = '';
+                this.dialogVisible = true;
+            },
+
+            editContentItem(tabName, key, value) {
+                this.dialogTitle = '编辑内容项';
+                this.currentTabName = tabName;
+                this.currentKey = key;
+                this.form.key = key;
+                this.form.value = value;
+                this.dialogVisible = true;
+            },
+
+            submitForm() {
+                if (this.dialogTitle === '新增内容项') {
+                    this.myObj[this.currentTabName].push({key: this.form.key, value: this.form.value});
+                } else if (this.dialogTitle === '编辑内容项') {
+                    const items = this.myObj[this.currentTabName];
+                    const itemIndex = items.findIndex(item => item.key === this.currentKey);
+                    if (itemIndex !== -1) {
+                        items[itemIndex].key = this.form.key;
+                        items[itemIndex].value = this.form.value;
+                    }
+                }
+                this.dialogVisible = false;
+                this.updateData();
             },
 
             // 删除内容项
@@ -392,46 +427,6 @@
                 }).catch(() => {
                 });
             },
-            editContentItem(tabName, key, value) {
-                this.editingItem = {tabName, key, value};
-                this.editingKey = key;
-
-                // 保存原始值用于回滚
-                const originalKey = key;
-                const originalValue = value;
-
-                // 第一步：修改Key
-                this.$prompt('修改Key', '编辑内容', {
-                    confirmButtonText: '保存',
-                    cancelButtonText: '取消',
-                    inputPlaceholder: '输入新Key',
-                    closeOnClickModal: false,
-                    inputValue: key
-                }).then(({value: newKey}) => {
-                    // 第二步：修改Value
-                    return this.$prompt('修改值', '编辑内容', {
-                        confirmButtonText: '保存',
-                        cancelButtonText: '取消',
-                        inputPlaceholder: '输入新值',
-                        closeOnClickModal: false,
-                        inputType: 'textarea',
-                        inputValue: value
-                    }).then(({value: newValue}) => {
-                        // 更新数据
-                        const items = this.myObj[tabName];
-                        const itemIndex = items.findIndex(item => item.key === originalKey);
-                        if (itemIndex !== -1) {
-                            items[itemIndex].key = newKey;
-                            items[itemIndex].value = newValue;
-                        }
-                        this.updateData();
-                        this.editingItem = null;
-                    });
-                }).catch(() => {
-                    // 如果任一步骤取消，重置状态
-                    this.editingItem = null;
-                });
-            },
 
             // 复制到剪贴板
             copyToClipboard(text) {