浏览代码

增加动态效果

YaolongHan 4 年之前
父节点
当前提交
04b7523d46
共有 2 个文件被更改,包括 169 次插入111 次删除
  1. 67 13
      src/components/editview/leftToolBar/addBaseItem.vue
  2. 102 98
      src/components/editview/leftToolBar/data.js

+ 67 - 13
src/components/editview/leftToolBar/addBaseItem.vue

@@ -20,19 +20,29 @@
         v-for="(itemList, i) in item.itemList"
         :key="i"
       >
-        <div class="title">{{ itemList.title }}</div>
-        <ul>
-          <li
-            :class="{ 'btn-active': editCmd == baseItem.id }"
-            v-for="(baseItem, k) in itemList.itemList"
-            :key="k"
-            @click="drawItem(baseItem.id)"
-            :title="baseItem.name"
-          >
-            <img class="icon" :src="baseItem.icon" />
-            <span class="iconName">{{ baseItem.name }}</span>
-          </li>
-        </ul>
+        <div @click="collapse(itemList)" class="title">
+          {{ itemList.title }}
+          <i
+            v-bind:class="[
+              itemList.isClip ? 'caret-icon-active' : 'caret-icon',
+              'el-icon-caret-bottom ',
+            ]"
+          ></i>
+        </div>
+        <el-collapse-transition>
+          <ul v-show="itemList.isClip">
+            <li
+              :class="{ 'btn-active': editCmd == baseItem.id }"
+              v-for="(baseItem, k) in itemList.itemList"
+              :key="k"
+              @click="drawItem(baseItem.id)"
+              :title="baseItem.name"
+            >
+              <img class="icon" :src="baseItem.icon" />
+              <span class="iconName">{{ baseItem.name }}</span>
+            </li>
+          </ul>
+        </el-collapse-transition>
       </div>
     </div>
   </div>
@@ -56,6 +66,10 @@ export default {
       this.SETCHOICELEHEND(item);
     },
     pressEnter() {},
+    // /是否下拉折叠
+    collapse(item) {
+      item.isClip = !item.isClip;
+    },
   },
 };
 </script>
@@ -85,6 +99,46 @@ export default {
         font-size: 14px;
         padding-top: 16px;
         padding-bottom: 16px;
+        cursor: pointer;
+        .caret-icon {
+          animation: nowhirling 0.2s linear forwards;
+        }
+        .caret-icon-active {
+          animation: whirling 0.2s linear forwards;
+        }
+      }
+
+      @keyframes whirling {
+        0% {
+          transform: rotate(0deg);
+          -ms-transform: rotate(0deg); /* Internet Explorer */
+          -moz-transform: rotate(0deg); /* Firefox */
+          -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
+          -o-transform: rotate(0deg); /* Opera */
+        }
+        100% {
+          transform: rotate(180deg);
+          -ms-transform: rotate(180deg); /* Internet Explorer */
+          -moz-transform: rotate(180deg); /* Firefox */
+          -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
+          -o-transform: rotate(180deg); /* Opera */
+        }
+      }
+      @keyframes nowhirling {
+        0% {
+          transform: rotate(180deg);
+          -ms-transform: rotate(180deg); /* Internet Explorer */
+          -moz-transform: rotate(180deg); /* Firefox */
+          -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
+          -o-transform: rotate(180deg); /* Opera */
+        }
+        100% {
+          transform: rotate(0deg);
+          -ms-transform: rotate(0deg); /* Internet Explorer */
+          -moz-transform: rotate(0deg); /* Firefox */
+          -webkit-transform: rotate(0deg); /* Safari 和 Chrome */
+          -o-transform: rotate(0deg); /* Opera */
+        }
       }
       ul {
         display: flex;

+ 102 - 98
src/components/editview/leftToolBar/data.js

@@ -2,110 +2,114 @@
 export const baseEditItems = [{
     title: '基础组件',
     itemList: [{
-            title: '通用元素',
-            itemList: [{
-                    name: '线条',
-                    id: "EditBaseLine",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseLine.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseLine"+"Active"+".png")
-                },
-                {
-                    name: '文本框',
-                    id: "EditBasetext",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBasetext.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBasetext"+"Active"+".png")
-                },
-                {
-                    name: '图片',
-                    id: "EditBaseImage",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseImage.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseImage"+"Active"+".png")
-                },
-                {
-                    name: '批注',
-                    id: "BaseExplain",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBasePostil.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBasePostil"+"Active"+".png")
-                }
-            ]
+        title: '通用元素',
+        isClip: true,// 是否展开
+        itemList: [{
+            name: '线条',
+            id: "EditBaseLine",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBaseLine.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBaseLine" + "Active" + ".png")
         },
         {
-            title: '图形',
-            itemList: [{
-                    name: '矩形',
-                    id: "EditBaseRect",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseRect.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseRect"+"Active"+".png")
-                },
-                {
-                    name: '多边形',
-                    id: "EditBasePolygon",
-                    icon:require("./../../../assets/images/leftImgs/"+"polygon.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "polygon"+"Active"+".png")
-                },
-                {
-                    name: '圆',
-                    id: "EditBaseCircle",
-                    icon:require("./../../../assets/images/leftImgs/"+"circle.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "circle"+"Active"+".png")
-                },
-                {
-                    name: '箭头',
-                    id: "EditBaseArrows",
-                    icon:require("./../../../assets/images/leftImgs/"+"EditBaseArrows.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "EditBaseArrows"+"Active"+".png")
-                }
-            ]
+            name: '文本框',
+            id: "EditBasetext",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBasetext.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBasetext" + "Active" + ".png")
         },
         {
-            title: '联通方式',
-            itemList: [{
-                    name: '弯头',
-                    id: "wantou",
-                    icon:require("./../../../assets/images/leftImgs/"+"wantou.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "wantou"+"Active"+".png")
-                },
-                {
-                    name: '三通',
-                    id: "santong",
-                    icon:require("./../../../assets/images/leftImgs/"+"santong.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "santong"+"Active"+".png")
-                },
-                {
-                    name: '四通',
-                    id: "sitong",
-                    icon:require("./../../../assets/images/leftImgs/"+"sitong.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "sitong"+"Active"+".png")
-                }
-            ]
+            name: '图片',
+            id: "EditBaseImage",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBaseImage.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBaseImage" + "Active" + ".png")
         },
         {
-            title: '动态取值',
-            itemList: [{
-                    name: '公式',
-                    id: "equation",
-                    icon:require("./../../../assets/images/leftImgs/"+"equation.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "equation"+"Active"+".png")
-                },
-                {
-                    name: '信息点',
-                    id: "infoPoint",
-                    icon:require("./../../../assets/images/leftImgs/"+"infoPoint.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "infoPoint"+"Active"+".png")
-                },
-                {
-                    name: '设备组',
-                    id: "equipList",
-                    icon:require("./../../../assets/images/leftImgs/"+"equipList.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "equipList"+"Active"+".png")
-                },
-                {
-                    name: '通用实例',
-                    id: "publicItem",
-                    icon:require("./../../../assets/images/leftImgs/"+"publicItem.png"),
-                    activeIcon:require("./../../../assets/images/leftImgs/"+ "publicItem"+"Active"+".png")
-                }
-            ]
+            name: '批注',
+            id: "BaseExplain",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBasePostil.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBasePostil" + "Active" + ".png")
+        }
+        ]
+    },
+    {
+        title: '图形',
+        isClip: true,// 是否展开
+        itemList: [{
+            name: '矩形',
+            id: "EditBaseRect",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBaseRect.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBaseRect" + "Active" + ".png")
         },
+        {
+            name: '多边形',
+            id: "EditBasePolygon",
+            icon: require("./../../../assets/images/leftImgs/" + "polygon.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "polygon" + "Active" + ".png")
+        },
+        {
+            name: '圆',
+            id: "EditBaseCircle",
+            icon: require("./../../../assets/images/leftImgs/" + "circle.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "circle" + "Active" + ".png")
+        },
+        {
+            name: '箭头',
+            id: "EditBaseArrows",
+            icon: require("./../../../assets/images/leftImgs/" + "EditBaseArrows.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "EditBaseArrows" + "Active" + ".png")
+        }
+        ]
+    },
+    {
+        title: '联通方式',
+        isClip: true,// 是否展开
+        itemList: [{
+            name: '弯头',
+            id: "wantou",
+            icon: require("./../../../assets/images/leftImgs/" + "wantou.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "wantou" + "Active" + ".png")
+        },
+        {
+            name: '三通',
+            id: "santong",
+            icon: require("./../../../assets/images/leftImgs/" + "santong.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "santong" + "Active" + ".png")
+        },
+        {
+            name: '四通',
+            id: "sitong",
+            icon: require("./../../../assets/images/leftImgs/" + "sitong.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "sitong" + "Active" + ".png")
+        }
+        ]
+    },
+    {
+        title: '动态取值',
+        isClip: true,// 是否展开
+        itemList: [{
+            name: '公式',
+            id: "equation",
+            icon: require("./../../../assets/images/leftImgs/" + "equation.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "equation" + "Active" + ".png")
+        },
+        {
+            name: '信息点',
+            id: "infoPoint",
+            icon: require("./../../../assets/images/leftImgs/" + "infoPoint.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "infoPoint" + "Active" + ".png")
+        },
+        {
+            name: '设备组',
+            id: "equipList",
+            icon: require("./../../../assets/images/leftImgs/" + "equipList.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "equipList" + "Active" + ".png")
+        },
+        {
+            name: '通用实例',
+            id: "publicItem",
+            icon: require("./../../../assets/images/leftImgs/" + "publicItem.png"),
+            activeIcon: require("./../../../assets/images/leftImgs/" + "publicItem" + "Active" + ".png")
+        }
+        ]
+    },
     ]
 }]