fix: 修改预览图片的功能;

This commit is contained in:
yangws 2024-07-18 15:34:52 +08:00
parent f77584e849
commit 385d6ed25e
3 changed files with 75 additions and 5 deletions

View File

@ -21,6 +21,7 @@
"@electron-toolkit/preload": "^3.0.1", "@electron-toolkit/preload": "^3.0.1",
"@electron-toolkit/utils": "^3.0.0", "@electron-toolkit/utils": "^3.0.0",
"@element-plus/icons-vue": "^2.3.1", "@element-plus/icons-vue": "^2.3.1",
"@vueuse/core": "^10.11.0",
"crypto-js": "^4.2.0", "crypto-js": "^4.2.0",
"electron-dl-manager": "^3.0.0", "electron-dl-manager": "^3.0.0",
"electron-updater": "^6.1.7", "electron-updater": "^6.1.7",

View File

@ -136,4 +136,8 @@ getUser()
width: 1em; width: 1em;
height: 1em; height: 1em;
} }
.app-container{
padding-top: 20px;
height: 100%;
}
</style> </style>

View File

@ -26,7 +26,7 @@
</el-col> </el-col>
<el-col :xs="24" :md="12" :style="{ height: '350px' }"> <el-col :xs="24" :md="12" :style="{ height: '350px' }">
<div class="avatar-upload-preview"> <div class="avatar-upload-preview">
<el-image style="width: 100px; height: 100px" :src="options.previews.url" :style="options.previews.img"/> <div v-show="show" class="large" :style="[{backgroundImage:`url(${options.img})`},largePosition]"></div>
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
@ -67,12 +67,13 @@
<script setup> <script setup>
import { Upload, Plus, Minus, RefreshLeft, RefreshRight } from '@element-plus/icons-vue' import { Upload, Plus, Minus, RefreshLeft, RefreshRight } from '@element-plus/icons-vue'
import { ref, reactive, getCurrentInstance } from 'vue' import {ref, reactive, getCurrentInstance, watch} from 'vue'
import 'vue-cropper/dist/index.css' import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper' import { VueCropper } from 'vue-cropper'
import { uploadAvatar } from '@/api/system/user' import { uploadAvatar } from '@/api/system/user'
import useUserStore from '@/store/modules/user' import useUserStore from '@/store/modules/user'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import { useMouseInElement } from '@vueuse/core'
const userStore = useUserStore() const userStore = useUserStore()
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
@ -91,6 +92,22 @@ const options = reactive({
outputType: 'png', // PNG outputType: 'png', // PNG
previews: {} // previews: {} //
}) })
//
const show = ref(false)
//
const random = ref('')
// ()
const layerPosition = reactive({
left: 0,
top: 0
})
// ()
const largePosition = reactive({
backgroundPositionX: 0,
backgroundPositionY: 0
})
const cropper = ref(null)
const { elementX, elementY } = useMouseInElement(cropper)
/** 编辑头像 */ /** 编辑头像 */
function editCropper() { function editCropper() {
@ -147,15 +164,41 @@ function uploadImg() {
}) })
}) })
} }
/** 实时预览 */ /** 实时预览 */
function realTime(data) { function realTime(data) {
options.previews = data options.previews = data
random.value = getRandomValue()
}
//
const getRandomValue = () => {
return Math.random()
} }
/** 关闭窗口 */ /** 关闭窗口 */
function closeDialog() { function closeDialog() {
options.img = userStore.avatar options.img = userStore.avatar
console.log(userStore.avatar,'userStore.avatar')
options.visible = false options.visible = false
} }
watch(random, () => {
//
show.value = true
//
const position = { x: 0, y: 0 }
if (elementX.value < 100) position.x = 0
else if (elementX.value > 300) position.x = 200
else position.x = elementX.value - 100
if (elementY.value < 100) position.y = 0
else if (elementY.value > 300) position.y = 200
else position.y = elementY.value - 100
//
layerPosition.left = position.x + 'px'
layerPosition.top = position.y + 'px'
largePosition.backgroundPositionX = -2 * position.x + 'px'
largePosition.backgroundPositionY = -2 * position.y + 'px'
},{deep:true})
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
@ -186,4 +229,26 @@ function closeDialog() {
height: 120px; height: 120px;
width: auto; width: auto;
} }
.avatar-upload-preview {
position:relative;
height: 100%;
width: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
position: relative; /* 设置相对定位 */
left: 10px; /* 向右偏移10像素 */
}
.large {
position: absolute;
top: 0;
left: 0;
width: 500px;
height: 450px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-repeat: no-repeat;
background-size: 800px 800px;
background-color: #f8f8f8;
}
</style> </style>