pkg.module supported
, which means that you can apply tree-shaking in you project
A vue select component, includes cascader
https://github.com/livelybone/vue-select
https://livelybone.github.io/vue/vue-select/
Your can see the usage by run the example of the module, here is the step:
- Clone the library
git clone https://github.com/livelybone/vue-select.git
- Go to the directory
cd vue-select
- Install npm dependencies
npm i
(use taobao registry:npm i --registry=http://registry.npm.taobao.org
) - Open service
npm run dev
- See the example(usually is
http://127.0.0.1/examples/test.html
) in your browser
npm i -S @livelybone/vue-select
// import all
import {SelectBase, SelectMulti, Cascader, CascaderMulti} from '@livelybone/vue-select';
// or
import * as VueSelect from '@livelybone/vue-select';
// Global register
Vue.component('select-base', SelectBase);
Vue.component('select-multi', SelectMulti);
Vue.component('cascader', Cascader);
Vue.component('cascader-multi', CascaderMulti);
// Local register
new Vue({
components:{SelectBase, SelectMulti, Cascader, CascaderMulti}
})
Use in html, see what your can use in CDN: unpkg
<-- use what you want -->
<script src="https://unpkg.com/@livelybone/vue-select/lib/umd/<--module-->.js"></script>
Name | Type | DefaultValue | Description |
---|---|---|---|
id |
[String, Number] |
none | |
options |
Array |
[] |
Select options |
canEdit |
Boolean |
true |
If it's set to false, the component can only be used for show |
canSearch |
Boolean |
false |
Set to true to enable search |
placeholder |
String |
none | Placeholder |
searchPlaceholder |
String |
true |
Placeholder of search input |
popperProps |
Object |
defaultPopperProps |
Props of module @livelybone/vue-popper |
scrollbarProps |
Object |
{isMobile:false, maxHeight: '50vh'} |
Props of module @livelybone/vue-scrollbar-live |
const defaultPopperProps = {
arrowPosition: 'start',
arrowOffsetScaling: 1,
popperOptions: {
placement: 'bottom-start',
// If component is Cascader or CascaderMulti -> `positionFixed: true`
// More options in https://popper.js.org
},
}
Name | Type | DefaultValue | Description |
---|---|---|---|
value |
[String, Number] |
none | |
inputWrapStyle |
[String, Object] |
none |
Name | Type | DefaultValue | Description |
---|---|---|---|
value |
Array |
none |
Name | Type | DefaultValue | Description |
---|---|---|---|
value |
Array |
none | |
expandType |
String |
click |
Options: ['click', 'hover'] . Set how to expand children options |
changeOnSelect |
Boolean |
false |
If set to true, options of all level can be selected |
inputWrapStyle |
[String, Object] |
none | input wrap style |
Name | Type | DefaultValue | Description |
---|---|---|---|
value |
Array |
none | |
expandType |
String |
click |
Options: ['click', 'hover'] . Set how to expand children options |
Name | EmittedData | Description |
---|---|---|
input |
[Array, String] |
|
search |
String |
For building style, you can use the css or scss file in lib directory.
// scss
import 'node_modules/@livelybone/vue-select/lib/css/index.scss'
// css
import 'node_modules/@livelybone/vue-select/lib/css/index.css'
Or
// scss
@import 'node_modules/@livelybone/vue-select/lib/css/index.scss';
// css
@import 'node_modules/@livelybone/vue-select/lib/css/index.css';
Or, you can build your custom style by copying and editing index.scss
- Error
Error: spawn node-sass ENOENT
You may need install node-sass globally,
npm i -g node-sass