SHN-UI组件的使用

参考链接
1.使用
(1)安装

npm install vue-cropper
npm install shn-vue-ui

(2)注册插件

//main.js
import VueCropper from 'vue-cropper'
Vue.use(VueCropper)
import shnUI from 'shn-vue-ui'
Vue.use(shnUI);

(3)在组件中使用

//Cropper.vue
<template>
  <div>
    <div style="width: 100%; height: 500px">
      <vue-cropper
        autoCrop
        img="https://shnhz.github.io/shn-ui/img/Koala.jpg"
        ref="cropper"
        centerBox
      />
    </div>
    <shn-button @click="getCropData" block style="margin: 10px 0" type="primary"
      >获取截图后的图片</shn-button
    >
  </div>
</template>

<script>
export default {
  methods: {
    getCropData() {
      this.$refs.cropper.getCropData((data) => {
        console.log(data);
      });
    },
  },
};
</script>

效果如下所示:

裁剪后的图片.png