vue-bootstrap-selectpicker
vue-bootstrap-selectpicker
https://long-woo.github.io/vue-bootstrap-selectpicker
依赖库
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
archiver: ^2.1.1autoprefixer: ^7.1.2babel-core: ^6.22.1babel-eslint: ^7.2.3babel-helper-vue-jsx-merge-props: ^2.0.3babel-loader: ^7.1.1babel-plugin-syntax-jsx: ^6.18.0babel-plugin-transform-runtime: ^6.22.0babel-plugin-transform-vue-jsx: ^3.5.0babel-preset-env: ^1.3.2babel-preset-stage-2: ^6.22.0bootstrap: ^4.1.1chalk: ^2.0.1copy-webpack-plugin: ^4.0.1css-loader: ^0.28.0eslint: ^4.15.0eslint-config-standard: ^10.2.1eslint-friendly-formatter: ^3.0.0eslint-loader: ^1.7.1eslint-plugin-import: ^2.7.0eslint-plugin-node: ^5.2.0eslint-plugin-promise: ^3.4.0eslint-plugin-standard: ^3.0.1eslint-plugin-vue: ^4.0.0extract-text-webpack-plugin: ^3.0.2file-loader: ^1.1.4friendly-errors-webpack-plugin: ^1.6.1html-webpack-plugin: ^2.30.1node-notifier: ^5.1.2optimize-css-assets-webpack-plugin: ^3.2.0ora: ^1.2.0popper.js: ^1.16.1portfinder: ^1.0.13postcss-import: ^11.0.0postcss-loader: ^2.0.8postcss-url: ^7.2.1prerender-spa-plugin: ^3.4.0prismjs: ^1.15.0rimraf: ^2.6.0semver: ^5.3.0shelljs: ^0.7.6uglifyjs-webpack-plugin: ^1.1.1url-loader: ^0.5.8vue: ^2.5.2vue-loader: ^13.3.0vue-meta: ^1.5.6vue-router: ^3.0.1vue-style-loader: ^3.0.1vue-template-compiler: ^2.5.2webpack: ^3.12.0webpack-bundle-analyzer: ^3.3.2webpack-dev-server: ^3.1.11webpack-merge: ^4.1.0