我有一个vue 3项目中的区域点击事件的现有图像Map。图像缩放根据浏览器大小，但图像坐标显然是固定的像素大小。我有什么选项来调整图像Map坐标？我是vue 3新手，感谢任何帮助和想法
我在简单组件中尝试了此操作，但它不起作用，单击事件不在区域上
<script>
export default {
props: ['selfValue'],
data() {
return {
current: '',
};
},
methods: {
press(key) {
this.current = `${this.current}${key}`;
console.log(key)
},
},
watch: {
current() {
this.$emit('pressed', this.current);
},
selfValue() {
this.value = this.selfValue;
},
},
};
</script>
<template>
<div class="passwordkeyboard">
<img class="keypadimg"
src="/pwd.png" usemap="#image-map" />
<map id="image-map" name="image-map">
<area @click="press(1)" alt="key1" coords="57,15,9,64" shape="rect">
<area @click="press(2)" alt="key2" coords="76,16,125,64" shape="rect">
<area @click="press(8)" alt="key8" coords="144,16,191,64" shape="rect">
<area @click="press(3)" alt="key3" coords="211,15,260,64" shape="rect">
<area @click="press(4)" alt="key4" coords="278,15,327,64" shape="rect">
<area @click="press(7)" alt="key7" coords="9,95,58,144" shape="rect">
<area @click="press(5)" alt="key5" coords="76,95,125,144" shape="rect">
<area @click="press(6)" alt="key6" coords="143,95,192,144" shape="rect">
<area @click="press(0)" alt="key0" coords="211,95,260,144" shape="rect">
<area @click="press(9)" alt="key9" coords="277,95,328,144" shape="rect">
</map>
</template>
<style>
</style>
1条答案
按热度按时间7ajki6be1#
我会重新计算坐标的图像调整大小的事件，并将其传递到组件使用模板;首先创建按键0到9排序的坐标数组
更好的是，在数组中保存百分比值（计算相对于原始图像大小的百分比），然后在每次调整图像大小时迭代coords数组，用/height乘以每个坐标。