mirror of
https://github.com/pipipi-pikachu/PPTist.git
synced 2025-04-15 02:20:00 +08:00
update
This commit is contained in:
parent
2ab338f21b
commit
ccf935615e
@ -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;
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
@ -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,
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
Loading…
x
Reference in New Issue
Block a user