VueJS 自定义组件

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 控制台输出

Uncaught TypeError: Cannot read property 'push' of undefined at Cropit.init (eval at (app-d1eddf4073.js:2440), :274:41)
at new Cropit (eval at (app-d1eddf4073.js:2440), :194:11)
at HTMLDivElement.eval (eval at (app-d1eddf4073.js:2440), :102:21)
at Function.each (eval at (app-d1eddf4073.js:176), :368:19)
at jQuery.fn.init.each (eval at (app-d1eddf4073.js:176), :157:17)
at jQuery.fn.init.init (eval at (app-d1eddf4073.js:2440), :96:18)
at jQuery.fn.init._jquery2.default.fn.cropit (eval at (app-d1eddf4073.js:2440), :147:26)
at VueComponent.mounted (eval at (app-d1eddf4073.js:1565), :65:29)
at callHook (eval at (app-d1eddf4073.js:2428), :2758:19)
at Object.insert (eval at (app-d1eddf4073.js:2428), :1769:5)

Answer 1

目前cropit插件似乎不兼容jQuery3.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 自定义组件

VueJS custom component

jquery

crop

vue.js