vue-bootstrap-select-wrapper

0.0.5 • Public • Published

vue-bootstrap-select-wrapper

使用 vue 对 bootstrap-select 的简单包装

安装

依赖 jQuery, bootstrapbootstrap-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>

Package Sidebar

Install

npm i vue-bootstrap-select-wrapper

Weekly Downloads

0

Version

0.0.5

License

MIT

Unpacked Size

37.3 kB

Total Files

6

Last publish

Collaborators

  • whosphp