0

一个页面中有很多动态生成的选择框。我想应用 jquery selectBoxIt ( http://gregfranko.com/jquery.selectBoxIt.js/ ) 插件。我正在使用Vue js。我应该放在哪里

$('.cl_v').selectBoxIt({ theme: 'default', 'defaultText': 'select', autoWidth: false });

为了附加插件与选择元素？应用于选择框的类是cl_v。我已经将上面的代码放在created:，mounted:和destroyed:中。但它没有用。如何将插件与 Vue.js 一起使用？谢谢

4

2 回答 2

1

您应该创建一个包装组件。这就是你如何让 VueJS 和 jQuery 玩得更好。

如果您唯一需要的selectBoxIt工作就是上面的调用，那么您只需要类似于本mounted节的内容：

mounted() {
  $(this.el).selectBoxIt({ theme: 'default', 'defaultText': 'select', autoWidth: false });
}
于 2017-04-21T16:55:14.113 回答
0

请查看官方文档：Wrapper Component

这是示例代码： 

Vue.component('selectBoxIt', {
  props: ['options', 'value'],
  template: '#selectBoxIt-template',
  mounted: function () {
    var vm = this
    $(this.$el)
      .val(this.value)
      .trigger('change')
      // emit event on change.
      .on('change', function () {
        vm.$emit('input', this.value)
      })
  },
  watch: {
    value: function (value) {
      // update value
      $(this.$el).val(value)
    }
  }
});

var app = new Vue({
  el: '#app',
  template: '#demo-template',
  data: {
    fruits: [{id:1,name:'apple'},{id:2,name:'banana'}],
    selectId: 0
  },
  mounted: function() {
  	$('#fruits').selectBoxIt();
  }
});
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" />
 <link type="text/css" rel="stylesheet" href="https://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.css" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.selectboxit/3.8.0/jquery.selectBoxIt.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app"></div>

<script type="text/x-template" id="demo-template">
<div>
  <p>selectId: {{ selectId }}</p>
  <selectBoxIt id="fruits" :options="fruits" v-model="selectId">
  </selectBoxIt>
</div>
</script>

<script type="text/x-template" id="selectBoxIt-template">
  <select>
    <option v-for="option in options" :value="option.id">{{ option.name }}</option>
  </select>
</script>

这是 JSFiddle：https ://jsfiddle.net/5qnqkjr1/131/

于 2018-03-09T10:26:35.920 回答