|
@@ -47,6 +47,33 @@
|
|
|
</li>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
<!-- 对齐方式 -->
|
|
|
+ <!-- <el-dropdown trigger="click">
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ <i class="icon iconfont icon-zuoduiqi"></i>
|
|
|
+ <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <i class="icon iconfont icon-zuoduiqi" disabled></i>
|
|
|
+ 左对齐
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item icon="icon iconfont icon-zuoduiqi">左对齐</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown> -->
|
|
|
+
|
|
|
+ <el-dropdown trigger="click" @command="changeAlignItem" placement="top-start">
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ <i class="icon iconfont icon-zuoduiqi"></i>
|
|
|
+ <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown" class="top-dropdown">
|
|
|
+ <el-dropdown-item v-for="item in alignmentOptions" :key="item.value" :command="item.value" :disabled="item.disabled">
|
|
|
+ <img :src="require(`@/assets/images/` + item.img + `.png`)" alt="" />
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <!-- <el-dropdown-item icon="icon iconfont icon-zuoduiqi">左对齐</el-dropdown-item> -->
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
<el-divider direction="vertical"></el-divider>
|
|
|
<li @click="setLock()">
|
|
|
<el-tooltip class="item" effect="dark" :content="!isLock ? '解锁' : '锁定'" placement="bottom">
|
|
@@ -55,12 +82,12 @@
|
|
|
</li>
|
|
|
<li @click="hideItem">
|
|
|
<el-tooltip class="item" effect="dark" content="隐藏" placement="bottom">
|
|
|
- <span class="icon iconfont icon-yincang" :class="{'disabled': hideDisabled}"></span>
|
|
|
+ <span class="icon iconfont icon-yincang" :class="{ disabled: hideDisabled }"></span>
|
|
|
</el-tooltip>
|
|
|
</li>
|
|
|
<li @click="deleteItem">
|
|
|
<el-tooltip class="item" effect="dark" content="删除" placement="bottom">
|
|
|
- <span class="icon iconfont icon-shanchu" :class="{'disabled': deleteDisabled}"></span>
|
|
|
+ <span class="icon iconfont icon-shanchu" :class="{ disabled: deleteDisabled }"></span>
|
|
|
</el-tooltip>
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -72,6 +99,7 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import bus from "@/bus/bus";
|
|
|
+import { SGraphLayoutType } from "@persagy-web/graph/lib";
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
@@ -80,7 +108,57 @@ export default {
|
|
|
lockDisabled: false,
|
|
|
deleteDisabled: false,
|
|
|
hideDisabled: false,
|
|
|
-
|
|
|
+ alignmentOptions: [
|
|
|
+ //对齐数据
|
|
|
+ {
|
|
|
+ value: SGraphLayoutType.Left,
|
|
|
+ label: "左对齐",
|
|
|
+ img: "t-left",
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: SGraphLayoutType.Right,
|
|
|
+ label: "右对齐",
|
|
|
+ img: "t-right",
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: SGraphLayoutType.Top,
|
|
|
+ label: "顶对齐",
|
|
|
+ img: "t-top",
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: SGraphLayoutType.Bottom,
|
|
|
+ label: "底对齐",
|
|
|
+ img: "t-bottom",
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: SGraphLayoutType.Center,
|
|
|
+ label: "水平居中对齐",
|
|
|
+ img: "t-center",
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: SGraphLayoutType.Middle,
|
|
|
+ label: "垂直居中对齐",
|
|
|
+ img: "t-topandbottm",
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: SGraphLayoutType.Vertical,
|
|
|
+ label: "垂直分布",
|
|
|
+ img: "t-vertical",
|
|
|
+ disabled: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: SGraphLayoutType.Horizontal,
|
|
|
+ label: "水平分布",
|
|
|
+ img: "t-level",
|
|
|
+ disabled: true
|
|
|
+ }
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
@@ -96,6 +174,26 @@ export default {
|
|
|
deleteItem() {
|
|
|
bus.$emit("deleteItem");
|
|
|
},
|
|
|
+ /**
|
|
|
+ * 修改对齐方式
|
|
|
+ * @param val 选中的对齐方式类型
|
|
|
+ */
|
|
|
+ changeAlignItem(val) {
|
|
|
+ console.log(val)
|
|
|
+ bus.$emit("changeAlignItem", val);
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 处理对齐方式
|
|
|
+ * @param itemList 选中的元素数组
|
|
|
+ */
|
|
|
+ handleAlign(itemList) {
|
|
|
+ // 选中两个以上元素时,对齐方式解开禁用
|
|
|
+ if (itemList?.length > 1) {
|
|
|
+ this.alignmentOptions.map(v => v.disabled = false)
|
|
|
+ } else {
|
|
|
+ this.alignmentOptions.map(v => v.disabled = true)
|
|
|
+ }
|
|
|
+ },
|
|
|
// 复制
|
|
|
copy() {
|
|
|
bus.$emit("copy");
|
|
@@ -150,6 +248,8 @@ export default {
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
+ // 处理对齐方式
|
|
|
+ this.handleAlign(itemList)
|
|
|
},
|
|
|
},
|
|
|
mounted() {
|
|
@@ -160,6 +260,32 @@ export default {
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
+<style lang="less">
|
|
|
+// 对齐方式下拉按钮菜单
|
|
|
+.top-dropdown {
|
|
|
+ li {
|
|
|
+ padding-left: 12px !important;
|
|
|
+ width: 130px;
|
|
|
+ height: 30px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ margin-right: 5px;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-dropdown-menu__item.is-disabled {
|
|
|
+ pointer-events: initial;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
<style lang="less" scoped>
|
|
|
ul,
|
|
|
li {
|