1. vue-bootstrap-selectpicker

vue-bootstrap-selectpicker

vue-bootstrap-selectpicker

BUILD STATUS
NPM VERSION
NPM LICENSE
NPM DOWNLOAD

https://long-woo.github.io/vue-bootstrap-selectpicker

img

依赖库

Vue.js(v2.20+)

Bootstrap(v4.0.0+) 推荐使用 Bootstrap-Vue

使用

npm(yarn)安装

 npm i vue-bootstrap-selectpicker # yarn add vue-bootstrap-selectpicker
 // 在main.js里面加入以下代码
import 'vue-bootstrap-selectpicker/dist/css/vue-bootstrap-selectpicker.min.css'
import SelectPicker from 'vue-bootstrap-selectpicker'

Vue.use(SelectPicker)

浏览器

 <head>
  ...
  <link ref="stylesheet" href="/vue-bootstrap-selectpicker/dist/css/vue-bootstrap-selectpicker.min.css">
</head>
<body>
  ...
  <script src="/vue-bootstrap-selectpicker/dist/js/vue-bootstrap-selectpicker.js"></script>
</body>

示例 更多...

 <select-picker :dropdown-data="dropdownData" placeholder="请选择..." v-model="defaultSelectText" @change="changeSelect" />
 export default {
  data () {
    return {
      ...
      dropdownData: ['Vue', 'React', 'Angular', 'jQuery'],
      defaultSelectText: ''
    }
  },
  methods: {
    ...
    changeSelect ({data, text}) {
      console.log(data)
      this.defaultSelectText = text
    }
  }
}

Dependencies