|
@@ -30,14 +30,23 @@
|
|
|
<a-dropdown :trigger="['click']">
|
|
|
<div class="ant-dropdown-link dropdown-flex" @click="e => e.preventDefault()">
|
|
|
<div>
|
|
|
- <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt/>
|
|
|
+ <img class="lock" :src="require(`./../../assets/images/t-format.png`)" alt />
|
|
|
<div>对齐</div>
|
|
|
</div>
|
|
|
- <a-icon type="caret-down" class="down-icon"/>
|
|
|
+ <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)">
|
|
|
- <img style="width: 16px;margin-right: 5px;" :src="require(`./../../assets/images/`+item.img+`.png`)" alt/> <span>{{item.label}}</span>
|
|
|
+ <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>
|
|
@@ -74,52 +83,53 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import bus from "@/bus";
|
|
|
-import {SGraphLayoutType} from "@saga-web/graph/lib";
|
|
|
+import { SGraphLayoutType } from "@saga-web/graph/lib";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
isLock: false, //是否锁定
|
|
|
focusItem: null,
|
|
|
- alignmentOptions:[ //对齐数据
|
|
|
+ alignmentOptions: [
|
|
|
+ //对齐数据
|
|
|
{
|
|
|
- value:SGraphLayoutType.Left,
|
|
|
- label:'左对齐',
|
|
|
+ value: SGraphLayoutType.Left,
|
|
|
+ label: "左对齐",
|
|
|
img: "t-left"
|
|
|
},
|
|
|
{
|
|
|
- value:SGraphLayoutType.Right,
|
|
|
- label:'右对齐',
|
|
|
+ value: SGraphLayoutType.Right,
|
|
|
+ label: "右对齐",
|
|
|
img: "t-right"
|
|
|
},
|
|
|
{
|
|
|
- value:SGraphLayoutType.Top,
|
|
|
- label:'顶对齐',
|
|
|
+ value: SGraphLayoutType.Top,
|
|
|
+ label: "顶对齐",
|
|
|
img: "t-top"
|
|
|
},
|
|
|
{
|
|
|
- value:SGraphLayoutType.Bottom,
|
|
|
- label:'底对齐',
|
|
|
+ value: SGraphLayoutType.Bottom,
|
|
|
+ label: "底对齐",
|
|
|
img: "t-bottom"
|
|
|
},
|
|
|
{
|
|
|
- value:SGraphLayoutType.Center,
|
|
|
- label:'水平居中对齐',
|
|
|
- img:'t-center'
|
|
|
+ value: SGraphLayoutType.Center,
|
|
|
+ label: "水平居中对齐",
|
|
|
+ img: "t-center"
|
|
|
},
|
|
|
{
|
|
|
- value:SGraphLayoutType.Middle,
|
|
|
- label:'垂直居中对齐',
|
|
|
- img:'t-topandbottm'
|
|
|
+ value: SGraphLayoutType.Middle,
|
|
|
+ label: "垂直居中对齐",
|
|
|
+ img: "t-topandbottm"
|
|
|
},
|
|
|
{
|
|
|
- value:SGraphLayoutType.Vertical,
|
|
|
- label:'垂直分布',
|
|
|
- img:'t-vertical'
|
|
|
+ value: SGraphLayoutType.Vertical,
|
|
|
+ label: "垂直分布",
|
|
|
+ img: "t-vertical"
|
|
|
},
|
|
|
{
|
|
|
- value:SGraphLayoutType.Horizontal,
|
|
|
- label:'水平分布',
|
|
|
- img:'t-level'
|
|
|
+ value: SGraphLayoutType.Horizontal,
|
|
|
+ label: "水平分布",
|
|
|
+ img: "t-level"
|
|
|
}
|
|
|
]
|
|
|
};
|
|
@@ -128,14 +138,8 @@ export default {
|
|
|
FocusItemChanged(itemMsg) {
|
|
|
this.focusItem = null;
|
|
|
if (itemMsg.itemList.length == 1) {
|
|
|
- if (
|
|
|
- itemMsg.itemType == "images" ||
|
|
|
- itemMsg.itemType == "text" ||
|
|
|
- itemMsg.itemType == "position"
|
|
|
- ) {
|
|
|
- this.isLock = itemMsg.itemList[0].moveable;
|
|
|
- this.focusItem = itemMsg.itemList[0];
|
|
|
- }
|
|
|
+ this.isLock = itemMsg.itemList[0].moveable;
|
|
|
+ this.focusItem = itemMsg.itemList[0];
|
|
|
}
|
|
|
},
|
|
|
lockItem() {
|
|
@@ -148,10 +152,11 @@ export default {
|
|
|
},
|
|
|
saveMsg() {
|
|
|
// this.$message.success("保存成功!", 1);
|
|
|
- bus.$emit("saveMsgItem");
|
|
|
+ bus.$emit("saveMsgItem");
|
|
|
},
|
|
|
// 删除item
|
|
|
deleteItem() {
|
|
|
+ console.log(this.focusItem);
|
|
|
if (this.focusItem) {
|
|
|
bus.$emit("deleiteItem");
|
|
|
this.focusItem = null;
|
|
@@ -162,11 +167,12 @@ export default {
|
|
|
},
|
|
|
// 对齐item
|
|
|
changeAlignItem(val) {
|
|
|
- bus.$emit("changeAlignItem",val);
|
|
|
+ bus.$emit("changeAlignItem", val);
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
bus.$on("FocusItemChanged", itemMsg => {
|
|
|
+ console.log("itemMsg", itemMsg);
|
|
|
this.FocusItemChanged(itemMsg);
|
|
|
});
|
|
|
}
|
|
@@ -212,25 +218,25 @@ li {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
}
|
|
|
- .percentage{
|
|
|
- border-bottom: 1px solid #C3C7CB;
|
|
|
+ .percentage {
|
|
|
+ border-bottom: 1px solid #c3c7cb;
|
|
|
margin: 0 13px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
- .dropdown-flex{
|
|
|
+ .dropdown-flex {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- .down-icon{
|
|
|
+ .down-icon {
|
|
|
margin-left: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- li:hover{
|
|
|
- background: #F5F6F7;
|
|
|
+ li:hover {
|
|
|
+ background: #f5f6f7;
|
|
|
}
|
|
|
- .zoom-window{
|
|
|
- border-left:1px solid #8D9399;
|
|
|
- border-right:1px solid #8D9399;
|
|
|
+ .zoom-window {
|
|
|
+ border-left: 1px solid #8d9399;
|
|
|
+ border-right: 1px solid #8d9399;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -250,8 +256,8 @@ li {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- /deep/ .ant-dropdown-menu-item{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
+/deep/ .ant-dropdown-menu-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
</style>
|