feat: 底部导航组件为固定页面底部，无需拖拽调整位置

src/App.vue

@@ -46,7 +46,7 @@ export default {
   top: 0;
 }
 
-/* // 页面切换动画 */
+// 页面切换动画
 .fade-enter-active {
   transition: all 1.5s ease;
 }
@@ -64,4 +64,9 @@ export default {
 .el-message-box.JSONView {
   width: 1100px;
 }
+
+// 提示样式
+.Prompt{
+  font-size: 12px; color: #969799; margin-bottom: 10px
+}
 </style>

src/components/rightslider/componenmanagement/index.vue

@@ -2,11 +2,15 @@
   <div class="componenManagement">
     <!-- 标题 -->
     <h2>组件设置</h2>
-
+    <p class="Prompt">底部导航组件为固定页面底部，无需拖拽调整位置</p>
     <!-- 拖拽 -->
     <vuedraggable v-model="data" v-bind="dragOptions">
       <transition-group>
-        <div v-for="(item, ind) in data" :key="item.text + ind" class="item">
+        <div
+          v-for="(item, ind) in data"
+          :key="item.text + ind"
+          :class="item.text == '底部导航' ? 'item delDragitem' : 'item'"
+        >
           <p>
             <i class="el-icon-s-grid" style="margin-right: 15px" />{{
               item.text
@@ -42,6 +46,8 @@ export default {
       data: this.datas,
       dragOptions: {
         animation: 200,
+        // class是 delDragitem 禁止拖拽
+        filter: '.delDragitem',
       },
     }
   },
@@ -102,5 +108,9 @@ export default {
       color: #999;
     }
   }
+  .delDragitem {
+    background-color: rgba(10, 42, 97, 0.2);
+    cursor: no-drop;
+  }
 }
 </style>