Laravel 8中Vue 3配置Croppie后不显示裁剪边界、圆形选区如何解决？

核心原因 #

该异常的核心诱因是未引入Croppie对应的样式文件，裁剪边界、圆形选区、遮罩层等UI元素完全依赖Croppie自带的CSS渲染，仅引入JS逻辑的情况下只会加载基础的图片加载、缩放功能，不会渲染配套UI效果。

修复方案 #

按优先级依次执行以下操作：

• 引入Croppie样式
  两种引入方式二选一即可：
  1. 局部引入：在ImageUpload组件的script头部添加引入代码

  import 'croppie/croppie.css'
  

  2. 全局引入：在resources/sass/app.scss中添加引入代码

  @import '~croppie/croppie.css';
  

• 优化DOM获取逻辑
  当前使用getElementById获取容器，当页面存在多个ImageUpload组件实例时会出现ID重复异常，建议改用ref获取DOM：
  修改ImageUpload的template部分：

  <div ref="croppieContainer"></div>
  

  调整setUpCroppie方法内的容器获取逻辑：

  let el = this.$refs.croppieContainer;
  

• 修正初始化时机
  父组件通过v-if控制ImageUpload显示的场景下，可能出现DOM未完全渲染就初始化Croppie的问题，可将mounted中的初始化逻辑包裹在$nextTick中：

  mounted(){
      this.image = this.imgUrl
      this.$nextTick(() => {
          this.setUpCroppie()
      })
  }
  

• 排查样式冲突
  检查项目全局样式、ImageUpload组件自定义样式，确认没有对.cr-viewport、.cr-boundary等Croppie原生类名做异常覆盖，也没有父容器设置过高z-index、非visible的overflow属性导致选区被遮挡。

内容的提问来源于stack exchange，提问作者M.Koops