feat(fixednav): 增加拖拽效果

src/packages/__VUE/drag/index.scss

@@ -4,6 +4,10 @@
   z-index: 9997 !important;
   width: fit-content;
   height: fit-content;
+
+  .nut-fixednav {
+    position: relative !important;
+  }
 }
 .nut-taro-drag {
   // position: fixed;

src/packages/__VUE/fixednav/demo.vue

@@ -23,12 +23,8 @@
       :nav-list="navList"
       @selected="selected"
     />
-    <nut-fixednav
-      :position="{ top: '280px' }"
-      type="left"
-      v-model:visible="myActive"
-      @selected="selected"
-    >
+
+    <nut-fixednav :position="{ top: '280px' }" type="left" v-model:visible="myActive" @selected="selected">
       <template v-slot:list>
         <ul class="nut-fixednav__list">
           <li class="nut-fixednav__list-item">1</li>
@@ -43,6 +39,11 @@
         <span class="text">{{ myActive ? '自定义开' : '自定义关' }}</span>
       </template>
     </nut-fixednav>
+
+    <!-- 配合 Drag 支持拖拽 ，小程序暂不支持 -->
+    <nut-drag direction="y" :style="{ right: '0px', bottom: '240px' }">
+      <nut-fixednav un-active-text="支持拖拽" v-model:visible="visible3" :nav-list="navList" @selected="selected" />
+    </nut-drag>
   </div>
 </template>
 
@@ -56,6 +57,7 @@ export default createDemo({
     const visible = ref(false);
     const visible1 = ref(false);
     const visible2 = ref(false);
+    const visible3 = ref(false);
     const myActive = ref(false);
 
     onMounted(() => {
@@ -94,6 +96,7 @@ export default createDemo({
       visible,
       visible1,
       visible2,
+      visible3,
       myActive,
       navList,
       selected

src/packages/__VUE/fixednav/doc.md

@@ -71,6 +71,13 @@ app.use(FixedNav);
 <nut-fixednav :overlay="false"  :position="{top:'210px' }" v-model:visible="visible" :nav-list="navList" />
 ```
 
+### 配合 Drag 支持拖拽 , 小程序暂不支持
+
+``` html
+<nut-drag direction="y" :style="{right:'0px',bottom:'240px'}">
+  <nut-fixednav un-active-text="支持拖拽" v-model:visible="visible" :nav-list="navList" />
+</nut-drag>
+```
 
 ### 自定义使用
 

src/packages/__VUE/fixednav/index.scss

@@ -55,7 +55,9 @@
     right: 0;
     transform: translateX(100%);
     transition: all 0.5s;
-
+    box-sizing: border-box;
+    padding: 0;
+    margin: 0;
     z-index: $fixednav-index;
     flex-shrink: 0;
     height: 100%;
@@ -69,6 +71,9 @@
       right: 80px;
     }
     &-item {
+      box-sizing: border-box;
+      padding: 0;
+      margin: 0;
       position: relative;
       flex: 1;
       height: 100%;

src/sites/mobile-taro/vue/src/nav/pages/fixednav/index.vue

@@ -23,12 +23,8 @@
       :nav-list="navList"
       @selected="selected"
     />
-    <nut-fixednav
-      :position="{ top: '280px' }"
-      type="left"
-      v-model:visible="myActive"
-      @selected="selected"
-    >
+
+    <nut-fixednav :position="{ top: '280px' }" type="left" v-model:visible="myActive" @selected="selected">
       <template v-slot:list>
         <ul class="nut-fixednav__list">
           <li class="nut-fixednav__list-item">1</li>
@@ -47,13 +43,14 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, reactive, ref } from 'vue';
-export default defineComponent({
+import { onMounted, reactive, ref } from 'vue';
+export default {
   props: {},
   setup() {
     const visible = ref(false);
     const visible1 = ref(false);
     const visible2 = ref(false);
+    const visible3 = ref(false);
     const myActive = ref(false);
 
     onMounted(() => {
@@ -92,10 +89,11 @@ export default defineComponent({
       visible,
       visible1,
       visible2,
+      visible3,
       myActive,
       navList,
       selected
     };
   }
-});
+};
 </script>