Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
xiaohuxd opened this issue Oct 23, 2024 · 6 comments
Open

Comments

@xiaohuxd
Copy link

xiaohuxd commented Oct 23, 2024

版本号
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
Copy link
Owner

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

@xiaohuxd
Copy link
Author

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

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

@xyxiao001
Copy link
Owner

本地是好的嘛

@xyxiao001
Copy link
Owner

TyDialog 这个是什么组件库

@xiaohuxd
Copy link
Author

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

@xiaohuxd
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants