This commit is contained in:
pipipi-pikachu 2020-12-25 11:10:43 +08:00
parent 2ab338f21b
commit ccf935615e
4 changed files with 2 additions and 42 deletions

View File

@ -9,11 +9,7 @@
:class="{'divider': menu.divider, 'disable': menu.disable}"
>
<div class="contextmenu-item-content" :class="{'has-sub-menu': menu.children}" v-if="!menu.divider">
<span class="text">
<IconFont class="icon" v-if="menu.icon" :type="menu.icon" />
<div v-else-if="menu.iconPlacehoder" class="icon-placehoder"></div>
<span>{{menu.text}}</span>
</span>
<span class="text">{{menu.text}}</span>
<span class="sub-text" v-if="menu.subText && !menu.children">{{menu.subText}}</span>
<contextmenu-content
@ -35,13 +31,8 @@
import { PropType } from 'vue'
import { ContextmenuItem } from './types'
import IconFont from '@/components/IconFont.vue'
export default {
name: 'contextmenu-content',
components: {
IconFont,
},
props: {
menus: {
type: Array as PropType<ContextmenuItem[]>,
@ -126,22 +117,8 @@ $subMenuWidth: 120px;
top: 50%;
transform: translateY(-50%);
}
.icon {
margin-right: 7px;
vertical-align: middle;
}
.text span {
vertical-align: middle;
}
.icon-placehoder {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 7px;
}
.sub-text {
opacity: 0.3;
opacity: 0.6;
}
.sub-menu {
position: absolute;

View File

@ -1,11 +1,9 @@
export interface ContextmenuItem {
text?: string;
subText?: string;
icon?: string;
divider?: boolean;
disable?: boolean;
hide?: boolean;
iconPlacehoder?: boolean;
children?: ContextmenuItem[];
handler?: (el: HTMLElement) => void;
}

View File

@ -95,37 +95,31 @@ export default defineComponent({
{
text: '剪切',
subText: 'Ctrl + X',
icon: 'icon-scissor',
handler: cutSlide,
},
{
text: '复制',
subText: 'Ctrl + C',
icon: 'icon-copy',
handler: copySlide,
},
{
text: '粘贴',
subText: 'Ctrl + V',
icon: 'icon-paste',
handler: pasteSlide,
},
{ divider: true },
{
text: '新建页面',
subText: 'Enter',
icon: 'icon-add-page',
handler: createSlide,
},
{
text: '复制页面',
icon: 'icon-copy',
handler: copyAndPasteSlide,
},
{
text: '删除页面',
subText: 'Delete',
icon: 'icon-delete',
handler: deleteSlide,
},
]

View File

@ -108,7 +108,6 @@ export default defineComponent({
if(props.elementInfo.lock) {
return [{
text: '解锁',
icon: 'icon-unlock',
handler: () => unlockElement(props.elementInfo),
}]
}
@ -117,19 +116,16 @@ export default defineComponent({
{
text: '剪切',
subText: 'Ctrl + X',
icon: 'icon-scissor',
handler: cutElement,
},
{
text: '复制',
subText: 'Ctrl + C',
icon: 'icon-copy',
handler: copyElement,
},
{ divider: true },
{
text: '层级排序',
icon: 'icon-top-layer',
disable: props.isMultiSelect && !props.elementInfo.groupId,
children: [
{ text: '置顶层', handler: () => orderElement(props.elementInfo, ElementOrderCommands.TOP) },
@ -141,7 +137,6 @@ export default defineComponent({
},
{
text: '水平对齐',
icon: 'icon-align-left',
children: [
{ text: '水平居中', handler: () => alignElementToCanvas(ElementAlignCommands.HORIZONTAL) },
{ text: '左对齐', handler: () => alignElementToCanvas(ElementAlignCommands.LEFT) },
@ -150,7 +145,6 @@ export default defineComponent({
},
{
text: '垂直对齐',
icon: 'icon-align-bottom',
children: [
{ text: '垂直居中', handler: () => alignElementToCanvas(ElementAlignCommands.VERTICAL) },
{ text: '上对齐', handler: () => alignElementToCanvas(ElementAlignCommands.TOP) },
@ -161,20 +155,17 @@ export default defineComponent({
{
text: props.elementInfo.groupId ? '取消组合' : '组合',
subText: 'Ctrl + G',
icon: 'icon-block',
handler: props.elementInfo.groupId ? uncombineElements : combineElements,
hide: !props.isMultiSelect,
},
{
text: '锁定',
subText: 'Ctrl + L',
icon: 'icon-lock',
handler: lockElement,
},
{
text: '删除',
subText: 'Delete',
icon: 'icon-delete',
handler: deleteElement,
},
]