fix: 拖动排序和Tab记忆功能一起启用时拖动后应该也保持拖动后的顺序 (#1)

Signed-off-by: ajiho <lujiahao@88.com>
ajiho · Jun 1, 2024 · c0a6d56 · c0a6d56
1 parent 9f644de
commit c0a6d56
Show file tree

Hide file tree

Showing 6 changed files with 199 additions and 30 deletions.
diff --git a/demo/issues1.html b/demo/issues1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="dist/css/quicktab.css">
+
+</head>
+
+<body>
+
+    <button onclick="add()">添加Tab</button>
+    <div id="qtab"></div>
+
+    <script src="dist/js/quicktab.js"></script>
+    <script>
+
+        const tab = new Quicktab('#qtab', {
+            id:'qtab',
+            defaultTabs: [
+                {
+                    title:'欢迎页面1',
+                    url: 'welcome.html'
+                },
+                {
+                    title:'欢迎页面2',
+                    url: 'welcome.html?id=10'
+                }
+            ],
+            tab:{
+                dragSort:true,
+                remember:true,
+            }
+        })
+
+        function add(){
+            tab.addTab({
+                title:'新标签'+Math.random(),
+                url:'welcome.html?id='+ Math.random()
+            })
+        }
+
+    </script>
+</body>
+
+</html>
diff --git a/src/docs/public/demo/issues1.html b/src/docs/public/demo/issues1.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="dist/css/quicktab.css">
+
+</head>
+
+<body>
+
+    <button onclick="add()">添加Tab</button>
+    <div id="qtab"></div>
+
+    <script src="dist/js/quicktab.js"></script>
+    <script>
+
+        const tab = new Quicktab('#qtab', {
+            id:'qtab',
+            defaultTabs: [
+                {
+                    title:'欢迎页面1',
+                    url: 'welcome.html'
+                },
+                {
+                    title:'欢迎页面2',
+                    url: 'welcome.html?id=10'
+                }
+            ],
+            tab:{
+                dragSort:true,
+                remember:true,
+            }
+        })
+
+        function add(){
+            tab.addTab({
+                title:'新标签'+Math.random(),
+                url:'welcome.html?id='+ Math.random()
+            })
+        }
+
+    </script>
+</body>
+
+</html>
diff --git a/src/docs/public/demo/issues4 copy.html b/src/docs/public/demo/issues4 copy.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="zh">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="dist/css/quicktab.css">
+
+    <style>
+
+        .container{
+            position: fixed;
+            /* height: 10px; */
+            inset: 0;
+        }
+    </style>
+</head>
+
+<body>
+
+
+
+
+<div class="container">
+    <div id="qtab"></div>
+</div>
+
+
+
+<script src="dist/js/quicktab.js"></script>
+<script>
+    // 1.父元素的样式如果是设置的固定定位或者绝对定位时也没有设置固定高度
+    // 2.同时选项的高度设置100%时 会引发该bug
+
+    const tab = new Quicktab('#qtab',{
+        defaultTabs:[
+            {
+                url:'welcome.html'
+            },
+            {
+                url:'welcome.html?id=10'
+            }
+        ],
+
+        height:'100%',
+        toolbar:{
+            dropdown:{
+                enable:true//启用下拉菜单
+            }
+        }
+    })
+
+</script>
+</body>
+</html>
diff --git a/src/js/quicktab.js b/src/js/quicktab.js
@@ -94,6 +94,7 @@ class Quicktab {
     //参数额外处理
     this.#optionsProcess(options)
 
+
     //参数验证
     const result = Utils.validate(OptionsSchema, this.#options)
     if (result !== true) {
@@ -690,28 +691,33 @@ class Quicktab {
     )
 
     //响应式处理
-    Utils.onResize(this.#element.parentNode, function (entry) {
-      //关闭tab右键菜单和下拉菜单
-      that.#closeContextmenu()
-      that.#closeDropdown()
-
-
-      if (that.#options.responsive.enable !== false) {
-        //如果启用了响应式就动态设置显示和隐藏
-        Utils.setProperty(
-          that.#containerEl,
-          that.#hideItemSelector,
-          'display',
-          entry.contentRect.width < that.#options.responsive.breakpoint ? 'none' : null,
-        )
-      }
+    Utils.onResize(
+      this.#element.parentNode,
+      function (entry) {
+        //关闭tab右键菜单和下拉菜单
+        that.#closeContextmenu()
+        that.#closeDropdown()
 
-      if (that.#options.tab.resizeCenterActive === true) {
-        that.#debounceCenterActive()
-      }
-    },{
-      type:'width'
-    })
+        if (that.#options.responsive.enable !== false) {
+          //如果启用了响应式就动态设置显示和隐藏
+          Utils.setProperty(
+            that.#containerEl,
+            that.#hideItemSelector,
+            'display',
+            entry.contentRect.width < that.#options.responsive.breakpoint
+              ? 'none'
+              : null,
+          )
+        }
+
+        if (that.#options.tab.resizeCenterActive === true) {
+          that.#debounceCenterActive()
+        }
+      },
+      {
+        type: 'width',
+      },
+    )
 
     //添加通过html属性添加tab的能力(这个非常方便)
     that.#dataAttrAddTabEventRegister(document, Constants.DATAKEYS.addTabTarget)
@@ -965,6 +971,23 @@ class Quicktab {
       //拖拽结束
       event(this.#toolbarItemTabWrapperEl).on('dragend', function () {
         dragging = null
+
+        //判断是否启用了tab缓存
+        if(that.#options.tab.remember === true){
+
+          that.#cacheHandle.delete(that.#cacheKey)
+
+
+
+          that.#getTabs().forEach(item=>{
+            const option = item[Constants.DATAKEYS.tabOptionDataKey];
+            delete option.timestamp
+            that.#addCacheTab(option)
+          })
+
+        }
+
+
       })
     }
 
@@ -1601,7 +1624,7 @@ class Quicktab {
   #cacheTabsCheck(tabs) {
     //要检查的键数组
     let targetKeys = [
-      ...Object.keys(Constants.TABDEFAULTS),
+      ...Object.keys(Constants.OPTIONS.TabDefault),
       Constants.CLASSES.tabActive,
     ]
 

diff --git a/src/js/schema/options.js b/src/js/schema/options.js
@@ -19,7 +19,7 @@ const ContextmenuItemSchema = v.object({
 })
 
 const OptionsSchema = v.object({
-  id: v.string(),
+  id: v.pipe(v.string(), v.minLength(1)),
   minHeight: v.optional(v.string()),
   height: v.optional(v.string()),
   width: v.optional(v.string()),

diff --git a/src/js/utils/index.js b/src/js/utils/index.js
@@ -252,7 +252,6 @@ export default {
   },
 
   onResize(element, callback, options) {
-
     const Default = {
       //是否立即执行
       immediate: false,
@@ -262,8 +261,6 @@ export default {
 
     options = Object.assign(Default, typeof options === 'object' && options)
 
-
-
     const resizeObserver = new ResizeObserver((entries) => {
       // 处理大小变化的回调函数
       entries.forEach((entry) => {
@@ -275,9 +272,6 @@ export default {
             return
           }
         }
-
-        console.log(options);
-
         // 获取当前元素的宽度和高度
         const newWidth = entry.contentRect.width
         const newHeight = entry.contentRect.height
@@ -303,7 +297,7 @@ export default {
       })
     })
     resizeObserver.observe(element)
-    return resizeObserver;
+    return resizeObserver
   },
 
   // 获取开启和激活的选项