使用 vue 对 bootstrap-select 的简单包装
依赖 jQuery, bootstrap 和 bootstrap-select
$ npm install vue-bootstrap-select-wrapper -S
或者
$ yarn add vue-bootstrap-select-wrapper
在 main.js
文件中引入插件并注册
# main.js
// 先引入 jquery bootstrap 和 bootstrap-select
window.$ = window.jQuery = require('jquery')
require('bootstrap')
require('bootstrap-select')
// 然后引入组件
import BootstrapSelect from 'vue-bootstrap-select-wrapper'
Vue.use(BootstrapSelect)
在项目中使用 vue-bootstrap-select-wrapper
<template>
Single Select:
<bootstrap-select :options="options" v-model="value"></bootstrap-select>
Multi Select:
<bootstrap-select :options="options" v-model="value1" multiple></bootstrap-select>
绑定二维数组时指定 label 和 key
<bootstrap-select track-by="id" label="name" :options="options3" v-model="value3"></bootstrap-select>
</template>
<script>
export default {
data () {
return {
options: [
1, 2, 3
],
options3: [
{
id : 1,
name : 'test1',
},
{
id : 2,
name : 'test2',
}
],
value: null,
value1: [],
value3: null,
}
}
}
</script>