xyxiao001 / vue-cropper

A simple picture clipping plugin for vue
https://github.xyxiao.cn/vue-cropper/docs/vue3.html
MIT License
4.32k stars 700 forks source link

vue2.x版本 部署到生产报错TypeError: n.call is not a function #851

Open xiaohuxd opened 3 days ago

xiaohuxd commented 3 days ago

版本号 vue: 2.5.2 vue-cropper: 0.6.5 webpack: 3.6.0

作者可以顺带推一下微信群二维码吗

<template>
  <TyDialog
    :visible.sync="visibleCptd"
    title="更新学生头像"
    width="680px"
    class="avatar-cropper__container"
    :close-on-click-modal="false"
    @open="handleOpen"
  >
    <div class="cropper-wrapper">
      <div class="cropper-box">
        <VueCropper
          ref="cropper"
          :img="img"
          center-box
          fixed
          auto-crop
          :auto-crop-height="128"
          :auto-crop-width="128"
          :limit-min-size="128"
          @real-time="handleRealTime"
        />
      </div>

      <div class="preview-box">
        <div :style="previewStyle">
          <div :style="previews.div">
            <img :src="previews.url" :style="previews.img" />
          </div>
        </div>
      </div>
    </div>

    <template #footer>
      <el-button @click="visibleCptd = false" type="primary" plain :size="size">取消</el-button>
      <el-button @click="handleSubmit" type="primary" :size="size">确定</el-button>
    </template>
  </TyDialog>
</template>

<script>
/**
 * 头像裁切
 */
import { VueCropper } from 'vue-cropper';
export default {
  components: {
    VueCropper,
    TyDialog,
  },

  data() {
    return {
      size: 'mini',
      img: undefined,
      previews: {},
      previewStyle: {},
    };
  },

  methods: {
    handleOpen() {
        this.img =this.checkedStudentInfo.zp
    },
    handleRealTime(data) {
      this.previews = data;
      this.previewStyle = {
        width: data.w + 'px',
        height: data.h + 'px',
        overflow: 'hidden',
        borderRadius: '50%',
        margin: '0',
        zoom: 128 / data.w,
      };
    },
  },
};
</script>

image

xyxiao001 commented 3 days ago

image 可能是弹框异步渲染导致的,可以给vue-cropper也加一个v-if

xiaohuxd commented 3 days ago

image 可能是弹框异步渲染导致的,可以给vue-cropper也加一个v-if

我甚至加了一个settimeout,延迟2s后加载vue-cropper都没有用

xyxiao001 commented 3 days ago

本地是好的嘛

xyxiao001 commented 3 days ago

TyDialog 这个是什么组件库

xiaohuxd commented 3 days ago

本地是好的,ty-dialog是基于el-dialog二次封装的

xiaohuxd commented 3 days ago

本地是好的嘛 现在暂时是基于这篇帖子解决的,不过这种办法实在是没办法的办法 https://www.jianshu.com/p/b991fdcdceff