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}" :class="{'divider': menu.divider, 'disable': menu.disable}"
> >
<div class="contextmenu-item-content" :class="{'has-sub-menu': menu.children}" v-if="!menu.divider"> <div class="contextmenu-item-content" :class="{'has-sub-menu': menu.children}" v-if="!menu.divider">
<span class="text"> <span class="text">{{menu.text}}</span>
<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="sub-text" v-if="menu.subText && !menu.children">{{menu.subText}}</span> <span class="sub-text" v-if="menu.subText && !menu.children">{{menu.subText}}</span>
<contextmenu-content <contextmenu-content
@ -35,13 +31,8 @@
import { PropType } from 'vue' import { PropType } from 'vue'
import { ContextmenuItem } from './types' import { ContextmenuItem } from './types'
import IconFont from '@/components/IconFont.vue'
export default { export default {
name: 'contextmenu-content', name: 'contextmenu-content',
components: {
IconFont,
},
props: { props: {
menus: { menus: {
type: Array as PropType<ContextmenuItem[]>, type: Array as PropType<ContextmenuItem[]>,
@ -126,22 +117,8 @@ $subMenuWidth: 120px;
top: 50%; top: 50%;
transform: translateY(-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 { .sub-text {
opacity: 0.3; opacity: 0.6;
} }
.sub-menu { .sub-menu {
position: absolute; position: absolute;

View File

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

View File

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

View File

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