1

simple-demo/mycopy.html

@@ -10,6 +10,24 @@
     <script src="elementUI/index.js"></script>
     <link rel="stylesheet" href="elementUI/index.css"/>
     <style>
+        .tab-item {
+            min-width: 100px;
+            max-width: 200px;
+            /*    文字居中*/
+            text-align: center;
+            /*文字垂直居中*/
+            line-height: 2em;
+            background: #c5e7cd;
+            margin: 0 20px;
+            /*    鼠标变成手*/
+            cursor: pointer;
+        }
+
+        .tab-item:hover {
+            background-color: #a3badc;
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+        }
+
         .tab-container {
             max-width: 1600px;
             margin: 0 auto;
@@ -106,7 +124,8 @@
                 v-for="(content, tabName) in myObj"
                 :key="tabName"
                 :label="tabName"
-                :name="tabName">
+                :name="tabName"
+        >
             <!-- 标签页内容 -->
             <div class="tab-content">
                 <!-- 内容项列表 -->
@@ -203,16 +222,18 @@
                         </el-button>
                     </div>
 
-
-
                 </div>
-
             </div>
         </el-tab-pane>
         <br>
-
-
     </el-tabs>
+    <div v-if="!readOnly && showOptions">
+        <draggable v-model="tabOrder" @change="onTabOrderChange" handle=".drag-handle" style="display: flex;">
+            <div v-for="tabName in tabOrder" :key="tabName" class="tab-item drag-handle">
+                <span>{{ tabName }}</span>
+            </div>
+        </draggable>
+    </div>
     <!-- 新增和编辑对话框 -->
     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
         <el-form :model="form" label-width="80px">
@@ -244,6 +265,7 @@
     let _this = new Vue({
         el: '#app',
         data: {
+            tabOrder: [],
             all_data: {},
             activeTab: '',
             myObj: {
@@ -295,9 +317,18 @@
                 }
 
                 this.mouseOver();
+                this.tabOrder = Object.keys(this.myObj);
             });
         },
         methods: {
+            onTabOrderChange() {
+                const newMyObj = {};
+                this.tabOrder.forEach(tabName => {
+                    newMyObj[tabName] = this.myObj[tabName];
+                });
+                this.myObj = newMyObj;
+                this.updateData();
+            },
             // 鼠标滑过，切换tabs
             mouseOver() {
                 this.$nextTick(() => {
@@ -364,6 +395,7 @@
                 this.myObj[this.newTabName] = [];
                 this.activeTab = this.newTabName;
                 this.newTabName = '';
+                _this.tabOrder = Object.keys(this.myObj);
                 _this.updateData();
             },
 

simple-demo/nav.html

@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <title>导航</title>
     <!--解决资源跨域-->
-    <meta name="referrer" content="no-referrer" />
+    <meta name="referrer" content="no-referrer"/>
 
     <!--解决缓存问题-->
-    <meta http-equiv="pragma" content="no-cache" />
-    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
-    <meta http-equiv="expires" content="0" />
+    <meta http-equiv="pragma" content="no-cache"/>
+    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
+    <meta http-equiv="expires" content="0"/>
 
     <script src="https://map.tianyunperfect.cn/common-page.js"></script>
 
@@ -18,6 +18,24 @@
     <script src="elementUI/index.js"></script>
     <link rel="stylesheet" href="elementUI/index.css"/>
     <style>
+        .tab-item {
+            min-width: 100px;
+            max-width: 200px;
+            /*    文字居中*/
+            text-align: center;
+            /*文字垂直居中*/
+            line-height: 2em;
+            background: #c5e7cd;
+            margin: 0 20px;
+            /*    鼠标变成手*/
+            cursor: pointer;
+        }
+
+        .tab-item:hover {
+            background-color: #a3badc;
+            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+        }
+
         .tab-container {
             max-width: 1600px;
             margin: 0 auto;
@@ -190,7 +208,7 @@
                             </div>
                             <div class="item-content">
                                 <div style="width: 100%">
-                                    <div  class="item-description">{{ item.description || item.title }}</div>
+                                    <div class="item-description">{{ item.description || item.title }}</div>
                                     <el-tooltip>
                                         <div class="link-section">
                                             <el-link
@@ -264,7 +282,14 @@
             </div>
         </el-tab-pane>
     </el-tabs>
-
+    <br>
+    <div v-if="showTabManage">
+        <draggable v-model="tabOrder" @change="onTabOrderChange" handle=".drag-handle" style="display: flex;">
+            <div v-for="tabName in tabOrder" :key="tabName" class="tab-item drag-handle">
+                <span>{{ tabName }}</span>
+            </div>
+        </draggable>
+    </div>
     <!-- 编辑对话框 -->
     <el-dialog
             :title="isEditing ? '编辑项目' : '添加新项'"
@@ -327,6 +352,7 @@
     let _this = new Vue({
         el: '#app',
         data: {
+            tabOrder: [],
             all_data: {},
             activeTab: '常用工具',
             myObj: {
@@ -372,9 +398,18 @@
                 if (pageManager.isReadOnly()) this.readOnly = true;
 
                 this.mouseOver();
+                this.tabOrder = Object.keys(this.myObj);
             });
         },
         methods: {
+            onTabOrderChange() {
+                const newMyObj = {};
+                this.tabOrder.forEach(tabName => {
+                    newMyObj[tabName] = this.myObj[tabName];
+                });
+                this.myObj = newMyObj;
+                this.updateData();
+            },
             // 鼠标滑过，切换tabs
             mouseOver() {
                 this.$nextTick(() => {
@@ -465,6 +500,7 @@
                 this.$set(this.myObj, this.newTabName, []);
                 this.activeTab = this.newTabName;
                 this.newTabName = '';
+                _this.tabOrder = Object.keys(this.myObj);
                 this.updateData();
             },