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插件

2 个答案: