VueJS 自定义组件

Posted 2023-02-25

【中文标题】VueJS 自定义组件

【英文标题】：VueJS custom component

【发布时间】：2017-01-28 13:16:27

【问题描述】：

我需要添加到我的组件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 控制台输出

未捕获的类型错误：无法读取未定义的属性“推送” Cropit.init（评估在（app-d1eddf4073.js:2440）， :274:41) 在新 Cropit（评估在（app-d1eddf4073.js:2440）， :194:11) 在 htmlDivElement.eval (eval at (app-d1eddf4073.js:2440), :102:21) 在 Function.each （评估在（app-d1eddf4073.js:176）， :368:19) 在 jQuery.fn.init.each （评估在（app-d1eddf4073.js:176）， :157:17) 在 jQuery.fn.init.init（评估在（app-d1eddf4073.js:2440）， :96:18) 在 jQuery.fn.init._jquery2.default.fn.cropit （评估在 (app-d1eddf4073.js:2440), :147:26) 在 VueComponent.mounted (eval at (app-d1eddf4073.js:1565), :65:29) 在 callHook （评估在（app-d1eddf4073.js:2428）， :2758:19) 在 Object.insert（评估在（app-d1eddf4073.js:2428）， :1769:5)

【参考方案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>

【讨论】：

如果其他一切都需要 3.0 怎么办？

Cropit 是 jQuery 插件，它依赖于 jQuery。正如您从 github 链接中看到的那样，其他人也有和您一样的问题 - 它与 jQuery 3.0 不兼容

像我一样尝试使用低版本的jQuery，你应该不会有任何错误。