Skip to content

P
pptist
Commit 2de0ad61 authored by zhengke's avatar zhengke
Browse files
Options

系统资料 替换图

parent 021693b3
Hide whitespace changes
Inline Side-by-side
Showing with 52 additions and 20 deletions
src/views/components/source/ImageOpera.vue
View file @ 2de0ad61
......@@ -21,7 +21,6 @@
<script lang="ts" setup>
import { useMainStore } from "@/store";
import { copyText, replaceText } from "@/utils/clipboard";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { ref } from "vue";
......@@ -62,7 +61,7 @@ const handleInsert=()=>{
color: black;
}
.imageOperaBox{
padding:4px 10px;
padding:4px;
position: relative;
position: fixed;
top: -50px;
......@@ -78,11 +77,11 @@ const handleInsert=()=>{
width: 0;
height: 0;
position: absolute;
left: 15px;
bottom: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(23,23,23,.5);
left: 13px;
bottom: -5px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 5px solid rgba(23,23,23,.5);
}
.imageOperaI{
left: 160px;
......@@ -93,9 +92,9 @@ const handleInsert=()=>{
height: 0;
position: absolute;
left: 28px;
bottom: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(23,23,23,.5);
bottom: -5px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 5px solid rgba(23,23,23,.5);
}
</style>
\ No newline at end of file
src/views/components/source/SourceDetail.vue
View file @ 2de0ad61
......@@ -13,20 +13,52 @@
<el-scrollbar max-height="50vh">
<div class="item-poi-img q-mt-md" v-if="data.ImgArray && data.ImgArray.length > 0">
<div class="container row">
<el-image class="col full-height" :preview-teleported="true" :src="data.ImgArray[0]" fit="cover" @click="setImages(0)" />
<div class="col full-height">
<image-opera-hover
@handleInsert="currentImg=0,handleInsert()"
@handleReplace="currentImg=0,handleReplace()">
<el-image class="full-height" :preview-teleported="true" :src="data.ImgArray[0]" fit="cover" @click="setImages(0)" />
</image-opera-hover>
</div>
<div style="width: 60%;" class="q-ml-sm row" v-if="data.ImgArray.length > 1">
<div class="col column">
<el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[1]" fit="cover" @click="setImages(1)" />
<el-image v-if="data.ImgArray.length > 2" :preview-teleported="true"
class="col full-width q-mt-sm" :src="data.ImgArray[2]" fit="cover" @click="setImages(2)" />
<div class="col full-height">
<image-opera-hover
@handleInsert="currentImg=1,handleInsert()"
@handleReplace="currentImg=1,handleReplace()">
<el-image class="full-height" :preview-teleported="true" :src="data.ImgArray[1]" fit="cover" @click="setImages(1)" />
</image-opera-hover>
</div>
<div v-if="data.ImgArray.length > 2" class="col full-height q-mt-sm">
<image-opera-hover
@handleInsert="currentImg=2,handleInsert()"
@handleReplace="currentImg=2,handleReplace()">
<el-image :preview-teleported="true"
class="full-height" :src="data.ImgArray[2]" fit="cover" @click="setImages(2)" />
</image-opera-hover>
</div>
</div>
<div class="col column q-ml-sm" v-if="data.ImgArray.length > 3">
<el-image class="col full-width" :preview-teleported="true" :src="data.ImgArray[3]" fit="cover" @click="setImages(3)" />
<div class="col full-width">
<image-opera-hover
@handleInsert="currentImg=3,handleInsert()"
@handleReplace="currentImg=3,handleReplace()">
<el-image class="full-width full-height" :preview-teleported="true" :src="data.ImgArray[3]" fit="cover" @click="setImages(3)" />
</image-opera-hover>
</div>
<div class="col full-width q-mt-sm last-img" v-if="data.ImgArray.length > 4">
<el-image class="col full-height" v-if="data.ImgArray.length > 4"
:preview-teleported="true" :src="data.ImgArray[4]" fit="cover" @click="setImages(4)" />
<div class="col full-height">
<image-opera-hover
@handleInsert="currentImg=4,handleInsert()"
@handleReplace="currentImg=4,handleReplace()">
<el-image class="full-height"
:preview-teleported="true" :src="data.ImgArray[4]" fit="cover" @click="setImages(4)" />
</image-opera-hover>
</div>
<div class="content column items-center flex-center text-white"
style="text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);"
......@@ -81,8 +113,7 @@
</div>
<template v-if="isViewerShow">
<image-opera
@handleCopyImage="handleCopyImage"
<image-opera
@handleInsert="handleInsert"
@handleReplace="handleReplace"/>
<el-image-viewer
......@@ -106,6 +137,8 @@ import type { PPTImageElement } from '@/types/slides'
import { copyImage, replaceText } from "@/utils/clipboard";
import TextOpera from './TextOpera.vue'
import ImageOpera from './ImageOpera.vue'
import ImageOperaHover from './ImageOperaHover.vue'
const { createImageElement } = useCreateElement()
const mainStore = useMainStore()
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment