<template>
|
<div v-if="isMultiple || isGroup" class="attr-item-box">
|
<div class="bg-item">
|
<!-- 组合按钮 多选时不可用 -->
|
<el-button v-if="isMultiple" long :disabled="!isMultiple" @click="group" text>
|
<groupIcon width="14" height="14"></groupIcon>
|
{{ '成组' }}
|
</el-button>
|
<!-- 拆分组合按钮，为单选且组元素时可用 -->
|
<el-button v-if="isGroup" long :disabled="!isGroup" @click="unGroup" text>
|
<unGroupIcon width="14" height="14"></unGroupIcon>
|
{{ '拆分组' }}
|
</el-button>
|
</div>
|
|
<!-- <Divider plain v-if="isGroup"></Divider> -->
|
</div>
|
</template>
|
|
<script setup name="Group">
|
import useSelect from '@/fabric-editor/hooks/select';
|
import groupIcon from '@/fabric-editor/assets/icon/group/group.svg';
|
import unGroupIcon from '@/fabric-editor/assets/icon/group/unGroup.svg';
|
|
const { isGroup, isMultiple, canvasEditor } = useSelect();
|
|
// 拆分组
|
const unGroup = () => {
|
canvasEditor.unGroup();
|
};
|
const group = () => {
|
canvasEditor.group();
|
};
|
</script>
|
<style scoped lang="scss">
|
:deep(.ivu-btn) {
|
&[disabled] {
|
svg {
|
opacity: 0.2;
|
}
|
}
|
}
|
</style>
|
