Question

我需要添加到我的组件jquery cropit plugin。所以我将cropit添加到我的package.json并安装

接下来我试了

<template>
  <div id="image-cropper">...</div>
</template>

和

import 'cropit'
export default{
  mounted: function(){
        $('#image-cropper').cropit({
            imageState: {
                src: 'http://lorempixel.com/500/400/',
            },
        });
  }
}

但无效

chrome console output

未捕获的TypeError：无法读取属性＆＃39; push＆＃39;未定义的   Cropit.init（eval at（app-d1eddf4073.js：2440），   ：274：41）
  在新的Cropit（eval at（app-d1eddf4073.js：2440），   ：194：11）
  在HTMLDivElement.eval（eval at（app-d1eddf4073.js：2440），   ：102：21）
  在Function.each（eval at（app-d1eddf4073.js：176），   ：368：19）
  在jQuery.fn.init.each（eval at（app-d1eddf4073.js：176），   ：157：17）
  在jQuery.fn.init.init（eval at（app-d1eddf4073.js：2440），   ：96：18）
  在jQuery.fn.init._jquery2.default.fn.cropit（eval at   （app-d1eddf4073.js：2440），：147：26）
  在VueComponent.mounted（eval at（app-d1eddf4073.js：1565），   ：65：29）
  在callHook（eval at（app-d1eddf4073.js：2428），   ：2758：19）
  在Object.insert（eval at（app-d1eddf4073.js：2428），   ：1769：5）

Answer 1

此时cropit插件似乎与jQuery 3.0及以上版本不兼容。请在github上查看此问题。

我安装了jQuery 2.1，但在我的控制台中没有发现任何错误：

<template>
  <div class="cropit">
    <div id="image-cropper"></div>
  </div>
</template>

<script>

import cropit from "cropit"
import $ from "jquery"

export default {
  name: 'cropit',
  mounted: function() { 
    $('#image-cropper').cropit();
  }
}
</script>

VueJS自定义组件

1 个答案: