Vue中如何利用插件对图片进行进行裁剪

安装vue-rotate插件

npm install vue-rotate --save

vue图片旋转功能具体代码:

// MyComponent.vue

<template>
  <div>
    <img :src="imgSrc" v-rotate:deg="rotatedDegree" />
    <button @click="rotate">旋转</button>
  </div>
</template>
 
<script>
import VueRotate from 'vue-rotate';
 
export default {
  directives: {
    Rotate: VueRotate
  },
  data() {
    return {
      imgSrc: '', // 图片路径
      rotatedDegree: 0 // 旋转角度
    }
  },
  methods: {
    rotate() {
      this.rotatedDegree += 90; // 每次点击旋转90度
    }
  }
};
</script>
以上是编程学习网小编为您介绍的“Vue中如何利用插件对图片进行进行裁剪”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。

本文标题为:Vue中如何利用插件对图片进行进行裁剪

基础教程推荐