vue3实现图片缩放
时间: 2024-01-30 12:12:16 浏览: 26
以下是Vue3实现图片缩放的示例代码:
父组件:
```vue
<template>
<div>
<imgbox :imgSrc="imgData.imgSrc" :scale="imgData.scale" @scaleImg="scaleImgFun"></imgbox>
</div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';
import imgbox from './imgbox.vue';
const imgData = reactive({
imgSrc: 'xxx.png',
scale: 1, // 默认缩放1
});
const scaleImgFun = (type) => {
// 缩放图片
switch (type) {
case 'large':
imgData.scale += 0.1;
break;
case 'small':
if (imgData.scale >= 0.1) imgData.scale -= 0.1;
break;
}
};
</script>
```
子组件(imgbox.vue):
```vue
<template>
<div>
<img :src="imgSrc" :style="{ transform: `scale(${scale})` }" />
<button @click="scaleImg('large')">放大</button>
<button @click="scaleImg('small')">缩小</button>
</div>
</template>
<script>
export default {
props: ['imgSrc', 'scale'],
methods: {
scaleImg(type) {
this.$emit('scaleImg', type);
},
},
};
</script>
```