Vue中如何实现图片的裂变和特效处理？

npm install vue

<template>  <div class="container">    <div class="split-image">      <div v-for="(item, index) in imagePieces" :key="index" :style="getImageStyle(item)">        <img :src="imageUrl" alt="split-image" />      </div>    </div>  </div></template><script>export default {  data() {    return {      imageUrl: 'path/to/image.jpg',      imagePieces: [] // 存储裂变后的图片块的位置和尺寸    };  },  mounted() {    this.splitImage();  },  methods: {    splitImage() {      const image = new Image();      image.src = this.imageUrl;      image.onload = () => {        const { width, height } = image;        // 计算每个图片块的位置和尺寸        for (let row = 0; row < 4; row++) {          for (let col = 0; col < 4; col++) {            const pieceWidth = width / 4;            const pieceHeight = height / 4;            this.imagePieces.push({              left: col * pieceWidth,              top: row * pieceHeight,              width: pieceWidth,              height: pieceHeight            });          }        }      };    },    getImageStyle(piece) {      return {        position: 'absolute',        left: `${piece.left}px`,        top: `${piece.top}px`,        width: `${piece.width}px`,        height: `${piece.height}px`,        overflow: 'hidden'      };    }  }};</script>

<template>  <div class="container">    <div class="image-effect">      <img :src="imageUrl" alt="image-effect" :  style="max-width:90%" />    </div>    <button @click="rotateImage">旋转</button>    <button @click="scaleImage">放大缩小</button>  </div></template><script>export default {  data() {    return {      imageUrl: 'path/to/image.jpg',      imageStyle: {        transform: 'none'      }    };  },  methods: {    rotateImage() {      this.imageStyle.transform = 'rotate(90deg)';    },    scaleImage() {      this.imageStyle.transform = 'scale(2)';    }  }};</script>