From b52b5f35ac8175d6c08a113ca672d73337d18924 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E5=A5=A5=E6=96=AF?= <9068149@qq.com>
Date: Mon, 24 Jan 2022 11:39:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=BA=95=E9=83=A8=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E4=B8=BA=E5=9B=BA=E5=AE=9A=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=BA=95=E9=83=A8=EF=BC=8C=E6=97=A0=E9=9C=80=E6=8B=96=E6=8B=BD?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=BD=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                        |  7 ++++++-
 .../rightslider/componenmanagement/index.vue       | 14 ++++++++++++--
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 66c490a..ebf67c7 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/components/rightslider/componenmanagement/index.vue b/src/components/rightslider/componenmanagement/index.vue
index a1c6a7a..9a49ed5 100644
--- a/src/components/rightslider/componenmanagement/index.vue
+++ b/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>