1

simple-demo/mycopy.html

@@ -61,6 +61,15 @@
             align-items: center;
         }
 
+        .item-2 {
+            /*    禁止换行 - */
+            white-space: nowrap;
+            /* 超出部分隐藏 */
+            overflow: hidden;
+            /* 超出部分显示省略号 */
+            text-overflow: ellipsis;
+        }
+
         .copy-btn {
             color: #409EFF;
         }
@@ -116,7 +125,7 @@
                         <el-card shadow="hover" class="item-card">
                             <div slot="header" class="item-content">
                                 <span>{{ item.key }}</span>
-                                <div class="action-buttons" >
+                                <div class="action-buttons">
                                     <el-button
                                             type="text"
                                             class="drag-handle">
@@ -134,8 +143,8 @@
                                     </el-button>
                                 </div>
                             </div>
-                            <div class="item-content" >
-<!--                                内容第一行，不能换行，用css控制，多余的隐藏-->
+                            <div class="item-2">
+                                <!--                                内容第一行，不能换行，用css控制，多余的隐藏-->
                                 <span>{{ item.value }}</span>
                             </div>
                         </el-card>
@@ -144,7 +153,7 @@
 
                 <div v-if="!readOnly">
                     <!-- 添加内容项 -->
-                    <div class="add-item" >
+                    <div class="add-item">
                         <el-input
                                 v-model="newItemKey[activeTab]"
                                 placeholder="键名"
@@ -200,7 +209,7 @@
 <script>
     // let all_data = {};
     let pageManager = new PageManager();
-    pageManager.type='copy-page';
+    pageManager.type = 'copy-page';
 
     pageManager.setNameCallBack(() => {
         let title = localStorage.getItem("title");
@@ -211,7 +220,7 @@
     let _this = new Vue({
         el: '#app',
         data: {
-            all_data:{},
+            all_data: {},
             activeTab: 'tab1',
             myObj: {
                 "tab1": [
@@ -239,7 +248,7 @@
                 if (res && res.content) {
                     // 初始化数据
                     let showContent = res.content;
-                    if (pageManager.isBackup){
+                    if (pageManager.isBackup) {
                         // 如果是备份
                         showContent = res.content_back;
                     }
@@ -342,7 +351,7 @@
                 });
             },
             editContentItem(tabName, key, value) {
-                this.editingItem = { tabName, key, value };
+                this.editingItem = {tabName, key, value};
                 this.editingKey = key;
 
                 // 保存原始值用于回滚
@@ -356,7 +365,7 @@
                     inputPlaceholder: '输入新Key',
                     closeOnClickModal: false,
                     inputValue: key
-                }).then(({ value: newKey }) => {
+                }).then(({value: newKey}) => {
                     // 第二步：修改Value
                     return this.$prompt('修改值', '编辑内容', {
                         confirmButtonText: '保存',
@@ -364,7 +373,7 @@
                         inputPlaceholder: '输入新值',
                         closeOnClickModal: false,
                         inputValue: value
-                    }).then(({ value: newValue }) => {
+                    }).then(({value: newValue}) => {
                         // 更新数据
                         const items = this.myObj[tabName];
                         const itemIndex = items.findIndex(item => item.key === originalKey);