Pārlūkot izejas kodu

对齐下拉菜单添加图片

xiebeibei 4 gadi atpakaļ
vecāks
revīzija
e9a99fe0db
1 mainītis faili ar 22 papildinājumiem un 10 dzēšanām
  1. 22 10
      src/components/edit/top_toolbar.vue

+ 22 - 10
src/components/edit/top_toolbar.vue

@@ -36,8 +36,8 @@
               <a-icon type="caret-down" class="down-icon"/>
             </div>
             <a-menu slot="overlay">
-              <a-menu-item v-for="item in alignmentOptions" :key="item.value" @click="changeAlignItem(item.value)">
-                {{item.label}}
+              <a-menu-item  v-for="item in alignmentOptions" :key="item.value" @click="changeAlignItem(item.value)">
+                <img style="width: 16px;margin-right: 5px;" :src="require(`./../../assets/images/`+item.img+`.png`)" alt/> <span>{{item.label}}</span>
               </a-menu-item>
             </a-menu>
           </a-dropdown>
@@ -83,35 +83,43 @@ export default {
       alignmentOptions:[  //对齐数据
         {
           value:SGraphLayoutType.Left,
-          label:'左对齐'
+          label:'左对齐',
+          img: "t-left"
         },
         {
           value:SGraphLayoutType.Right,
-          label:'右对齐'
+          label:'右对齐',
+          img: "t-right"
         },
         {
           value:SGraphLayoutType.Top,
-          label:'顶对齐'
+          label:'顶对齐',
+          img: "t-top"
         },
         {
           value:SGraphLayoutType.Bottom,
-          label:'底对齐'
+          label:'底对齐',
+          img: "t-bottom"
         },
         {
           value:SGraphLayoutType.Center,
-          label:'水平居中对齐'
+          label:'水平居中对齐',
+          img:'t-center'
         },
         {
           value:SGraphLayoutType.Middle,
-          label:'垂直居中对齐'
+          label:'垂直居中对齐',
+          img:'t-topandbottm'
         },
         {
           value:SGraphLayoutType.Vertical,
-          label:'垂直分布'
+          label:'垂直分布',
+          img:'t-vertical'
         },
         {
           value:SGraphLayoutType.Horizontal,
-          label:'水平分布'
+          label:'水平分布',
+          img:'t-level'
         }
       ]
     };
@@ -242,4 +250,8 @@ li {
     }
   }
 }
+  /deep/ .ant-dropdown-menu-item{
+    display: flex;
+    align-items: center;
+  }
 </style>