github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 支持设置/修改元素名

Browse Source
This commit is contained in:
pipipi-pikachu 2022-09-27 21:14:19 +08:00
parent f62e7da258
commit cd786f3465
3 changed files with 60 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MoveablePanel.vue
View File

@ -107,7 +107,7 @@ const startMove = (e: MouseEvent) => {
border-radius: $borderRadius;
display: flex;
flex-direction: column;
z-index: 99999;
z-index: 999;
}
.header {
height: 40px;

3
src/types/slides.ts
View File

@ -99,6 +99,8 @@ export interface PPTElementLink {
* rotate: 旋转角度
*
* link?: 超链接
*
* name?: 元素名
*/
interface PPTBaseElement {
id: string
@ -110,6 +112,7 @@ interface PPTBaseElement {
height: number
rotate: number
link?: PPTElementLink
name?: string
}

60
src/views/Editor/SelectPanel.vue
View File

@ -25,8 +25,18 @@
v-for="groupItem in item.elements"
:key="groupItem.id"
@click="selectGroupEl(item, groupItem.id)"
@dblclick="enterEdit(groupItem.id)"
>
<div class="name">{{ELEMENT_TYPE_ZH[groupItem.type]}}</div>
<input
:id="`input-${groupItem.id}`"
:value="groupItem.name || ELEMENT_TYPE_ZH[groupItem.type]"
class="input"
type="text"
v-if="editingElId === groupItem.id"
@blur="$event => saveElementName($event, groupItem.id)"
@keydown.enter="$event => saveElementName($event, groupItem.id)"
>
<div v-else class="name">{{groupItem.name || ELEMENT_TYPE_ZH[groupItem.type]}}</div>
<div class="icons">
<IconPreviewClose style="font-size: 17px;" @click.stop="hideElement(groupItem.id)" v-if="hiddenElementIdList.includes(groupItem.id)" />
<IconPreviewOpen style="font-size: 17px;" @click.stop="hideElement(groupItem.id)" v-else />
@ -38,8 +48,18 @@
:class="{ 'active': activeElementIdList.includes(item.id) }"
v-else
@click="selectEl(item.id)"
@dblclick="enterEdit(item.id)"
>
<div class="name">{{ELEMENT_TYPE_ZH[item.type]}}</div>
<input
:id="`input-${item.id}`"
:value="item.name || ELEMENT_TYPE_ZH[item.type]"
class="input"
type="text"
v-if="editingElId === item.id"
@blur="$event => saveElementName($event, item.id)"
@keydown.enter="$event => saveElementName($event, item.id)"
>
<div v-else class="name">{{item.name || ELEMENT_TYPE_ZH[item.type]}}</div>
<div class="icons">
<IconPreviewClose style="font-size: 17px;" @click.stop="hideElement(item.id)" v-if="hiddenElementIdList.includes(item.id)" />
<IconPreviewOpen style="font-size: 17px;" @click.stop="hideElement(item.id)" v-else />
@ -51,7 +71,7 @@
</template>
<script lang="ts" setup>
import { computed, nextTick } from 'vue'
import { computed, nextTick, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useSlidesStore, useMainStore } from '@/store'
import { PPTElement } from '@/types/slides'
@ -121,6 +141,22 @@ const hideAll = () => {
if (activeElementIdList.value.length) mainStore.setActiveElementIdList([])
}
const editingElId = ref('')
const saveElementName = (e: FocusEvent | KeyboardEvent, id: string) => {
const name = (e.target as HTMLInputElement).value
slidesStore.updateElement({ id, props: { name } })
editingElId.value = ''
}
const enterEdit = (id: string) => {
editingElId.value = id
nextTick(() => {
const inputRef = document.querySelector(`#input-${id}`) as HTMLInputElement
inputRef.focus()
})
}
const close = () => {
mainStore.setSelectPanelState(false)
}
@ -146,7 +182,6 @@ const close = () => {
font-size: 12px;
border-radius: $borderRadius;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
@ -160,11 +195,18 @@ const close = () => {
background-color: rgba($color: $themeColor, $alpha: .25);
}
.name {
height: 18px;
line-height: 18px;
flex: 1;
@include ellipsis-oneline();
}
.icons {
width: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 5px;
}
}
.group-els {
@ -178,4 +220,14 @@ const close = () => {
margin-left: 15px;
}
}
.input {
width: 100%;
height: 18px;
line-height: 18px;
border: 0;
outline: 0;
padding-left: 0;
padding-right: 0;
flex: 1;
}
</style>