我照着官网实例写了一遍 没有正确加载出来裁剪框

[Ya-hui]

<template>
  <el-dialog title="智能搜图" :show-close="false" draggable>
    <div>
      <div class="afd-cropper-container afd-w-100% afd-h-350"></div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import Cropper from 'cropperjs';
import './style.scss';

onMounted(() => {
  const image = new Image();
  image.src = 'https://fengyuanchen.github.io/cropperjs/v2/picture.jpg';
  nextTick(() => {
    const cropper = new Cropper(image, {
      container: '.afd-cropper-container',
    });
    console.log(cropper);
  });
});
</script>

我不知道这是什么原因， 困扰了我好几个小时了。感觉像是样式没有加载？

[Ya-hui]

已经一周了 闲着没事的我 又照着文档实例试了一遍 还是不行。 好吧 我要放弃了 浪费的时间太多了

<template>
  <div class="cropper-container"></div>
</template>

<script lang="ts">
import Cropper from 'cropperjs'

export default {
  name: 'CropperExample',
  data() {
    return {
      src: `https://images.unsplash.com/photo-1619737307100-55b82496fcda?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80`
    }
  },
  mounted() {
    const image = new Image()

    image.src = this.src
    image.alt = 'Picture'

    const cropper = new Cropper(image, {
      container: '.cropper-container'
    })

    // eslint-disable-next-line no-console
    console.log(cropper)
  }
}
</script>

<style lang="scss">
.cropper-container {
  border: 1px solid var(--vp-c-divider);
  border-radius: 0.375rem;
  margin-bottom: 1rem;
  margin-top: 1rem;
  padding: 1.25rem 1.5rem;

  cropper-canvas {
    height: 360px;
  }
}
</style>

[fengyuanchen]

在 Vue 中使用自定义元素，需要额外配置：

// Only works if using in-browser compilation.
// If using build tools, see config examples below.
app.config.compilerOptions.isCustomElement = (tag) => tag.includes('cropper-')

或者变更配置文件：

// vite.config.js
import vue from '@vitejs/plugin-vue'

export default {
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all tags with a dash as custom elements
          isCustomElement: (tag) => tag.includes('cropper-')
        }
      }
    })
  ]
}

详见 Vue 官方文档：https://vuejs.org/guide/extras/web-components.html#using-custom-elements-in-vue