fix: 修改预览图片的功能;
This commit is contained in:
parent
385d6ed25e
commit
acf0018a9c
|
@ -94,8 +94,6 @@ const options = reactive({
|
||||||
})
|
})
|
||||||
// 是否显示遮罩和大图
|
// 是否显示遮罩和大图
|
||||||
const show = ref(false)
|
const show = ref(false)
|
||||||
//监听是否拖动
|
|
||||||
const random = ref('')
|
|
||||||
// 遮罩的坐标(样式)
|
// 遮罩的坐标(样式)
|
||||||
const layerPosition = reactive({
|
const layerPosition = reactive({
|
||||||
left: 0,
|
left: 0,
|
||||||
|
@ -108,6 +106,8 @@ const largePosition = reactive({
|
||||||
})
|
})
|
||||||
const cropper = ref(null)
|
const cropper = ref(null)
|
||||||
const { elementX, elementY } = useMouseInElement(cropper)
|
const { elementX, elementY } = useMouseInElement(cropper)
|
||||||
|
//监听是否拖动
|
||||||
|
const transform = ref({})
|
||||||
|
|
||||||
/** 编辑头像 */
|
/** 编辑头像 */
|
||||||
function editCropper() {
|
function editCropper() {
|
||||||
|
@ -168,19 +168,16 @@ function uploadImg() {
|
||||||
/** 实时预览 */
|
/** 实时预览 */
|
||||||
function realTime(data) {
|
function realTime(data) {
|
||||||
options.previews = data
|
options.previews = data
|
||||||
random.value = getRandomValue()
|
transform.value = Object.assign({}, data.img)
|
||||||
}
|
|
||||||
// 生成一个随机数的函数监听滑动的改变
|
|
||||||
const getRandomValue = () => {
|
|
||||||
return Math.random()
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 关闭窗口 */
|
/** 关闭窗口 */
|
||||||
function closeDialog() {
|
function closeDialog() {
|
||||||
options.img = userStore.avatar
|
options.img = userStore.avatar
|
||||||
console.log(userStore.avatar,'userStore.avatar')
|
console.log(userStore.avatar,'userStore.avatar')
|
||||||
options.visible = false
|
options.visible = false
|
||||||
}
|
}
|
||||||
watch(random, () => {
|
watch(transform, () => {
|
||||||
// 根据得到数据设置样式数据和是否显示数据
|
// 根据得到数据设置样式数据和是否显示数据
|
||||||
show.value = true
|
show.value = true
|
||||||
// 计算坐标
|
// 计算坐标
|
||||||
|
|
Loading…
Reference in New Issue