在 Vue 组件中导入 jquery 插件

Question

我正在尝试在 Vuejs 组件中导入外部 jQuery 插件。该插件是 nested.js 我能怎么做？谢谢

Answer 1

你可以在脚本中导入插件并在你的函数中使用它，我会给你一个 datepicker 的例子，它是一个基于 jquery 的插件。

<template>
  <div class="input-group date">
    <input type="text" class="form-control datepicker" :name="name" :value="value" @keyup.enter="validate" @blur="validate">
  </div>
</template>

<script>
import "bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css"
import "bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"
import Moment from 'moment'

export default {
  props: {
    value: String,
    name: String,
    orientation: {
      type: String,
      default: "top"
    }
  },
  data() {
    return {}
  },
  mounted() {
    var vm = this;
    $(this.$el).find(".datepicker").datepicker({
      language: this.$store.state.currentLanguage,
      format: "dd/mm/yyyy",
      autoclose: true,
      orientation: vm.orientation
    }).on("show", () => { do what ever you want }
}
</script>

希望这会有所帮助。

Answer 2

也许你可以考虑 directive。

首先加载 jquery 和 nested.js.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.nested/1.01/jquery.nested.min.js"></script>

然后创建一个新指令。

Vue.directive('nested', function(el, binding) {
  $(el).nested(binding.value)
})

用法示例：

<div v-nested="nestedJsOptions">
  ...
</div>

在你的组件中：

data: {
  return {
    nestedJsOptions: {
      minWidth: 100,
      gutter: 10,
      // ..
    }
  }
}

在 Vue 组件中导入 jquery 插件

Import jquery plugin in Vue component

vue.js