1 | # @livelybone/vue-select
|
2 | [![NPM Version](http://img.shields.io/npm/v/@livelybone/vue-select.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/vue-select)
|
3 | [![Download Month](http://img.shields.io/npm/dm/@livelybone/vue-select.svg?style=flat-square)](https://www.npmjs.com/package/@livelybone/vue-select)
|
4 | ![gzip with dependencies: 15kb](https://img.shields.io/badge/gzip--with--dependencies-15kb-brightgreen.svg "gzip with dependencies: 15kb")
|
5 | ![typescript](https://img.shields.io/badge/typescript-supported-blue.svg "typescript")
|
6 | ![pkg.module](https://img.shields.io/badge/pkg.module-supported-blue.svg "pkg.module")
|
7 | ![ssr supported](https://img.shields.io/badge/ssr-supported-blue.svg "ssr supported")
|
8 |
|
9 | > `pkg.module supported`, which means that you can apply tree-shaking in you project
|
10 |
|
11 | A vue select component, includes cascader
|
12 |
|
13 | ## repository
|
14 | https://github.com/livelybone/vue-select
|
15 |
|
16 | ## Demo
|
17 | https://livelybone.github.io/vue/vue-select/
|
18 |
|
19 | ## Run Example
|
20 | Your can see the usage by run the example of the module, here is the step:
|
21 |
|
22 | 1. Clone the library `git clone https://github.com/livelybone/vue-select.git`
|
23 | 2. Go to the directory `cd vue-select`
|
24 | 3. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
|
25 | 4. Open service `npm run dev`
|
26 | 5. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser
|
27 |
|
28 | ## Installation
|
29 | ```bash
|
30 | npm i -S @livelybone/vue-select
|
31 | ```
|
32 |
|
33 | ## Register
|
34 | ```js
|
35 | // import all
|
36 | import {SelectBase, SelectMulti, Cascader, CascaderMulti} from '@livelybone/vue-select';
|
37 | // or
|
38 | import * as VueSelect from '@livelybone/vue-select';
|
39 |
|
40 | // Global register
|
41 | Vue.component('select-base', SelectBase);
|
42 | Vue.component('select-multi', SelectMulti);
|
43 | Vue.component('cascader', Cascader);
|
44 | Vue.component('cascader-multi', CascaderMulti);
|
45 |
|
46 | // Local register
|
47 | new Vue({
|
48 | components:{SelectBase, SelectMulti, Cascader, CascaderMulti}
|
49 | })
|
50 | ```
|
51 |
|
52 | Use in html, see what your can use in [CDN: unpkg](https://unpkg.com/@livelybone/vue-select/lib/umd/)
|
53 | ```html
|
54 | <-- use what you want -->
|
55 | <script src="https://unpkg.com/@livelybone/vue-select/lib/umd/<--module-->.js"></script>
|
56 | ```
|
57 |
|
58 | ## Props
|
59 |
|
60 | ### Common
|
61 | | Name | Type | DefaultValue | Description |
|
62 | | ------------------------- | ----------------------------------------- | --------------------------------------------- | ------------ |
|
63 | | `id` | `[String, Number]` | none | |
|
64 | | `options` | `Array` | `[]` | Select options |
|
65 | | `canEdit` | `Boolean` | `true` | If it's set to false, the component can only be used for show |
|
66 | | `canSearch` | `Boolean` | `false` | Set to true to enable search |
|
67 | | `placeholder` | `String` | none | Placeholder |
|
68 | | `searchPlaceholder` | `String` | `true` | Placeholder of search input |
|
69 | | `popperProps` | `Object` | `defaultPopperProps` | Props of module [@livelybone/vue-popper](https://github.com/livelybone/vue-popper) |
|
70 | | `scrollbarProps` | `Object` | `{isMobile:false, maxHeight: '50vh'}` | Props of module [@livelybone/vue-scrollbar-live](https://github.com/livelybone/vue-scrollbar-live) |
|
71 |
|
72 | ```js
|
73 | const defaultPopperProps = {
|
74 | arrowPosition: 'start',
|
75 | arrowOffsetScaling: 1,
|
76 | popperOptions: {
|
77 | placement: 'bottom-start',
|
78 | // If component is Cascader or CascaderMulti -> `positionFixed: true`
|
79 | // More options in https://popper.js.org
|
80 | },
|
81 | }
|
82 | ```
|
83 |
|
84 | ### SelectBase
|
85 | | Name | Type | DefaultValue | Description |
|
86 | | ----------------- | --------------------- | --------------------- | ------------ |
|
87 | | `value` | `[String, Number]` | none | |
|
88 | | `inputWrapStyle` | `[String, Object]` | none | |
|
89 |
|
90 | ### SelectMulti
|
91 | | Name | Type | DefaultValue | Description |
|
92 | | ----------------- | --------------------- | --------------------- | ------------ |
|
93 | | `value` | `Array` | none | |
|
94 |
|
95 | ### Cascader
|
96 | | Name | Type | DefaultValue | Description |
|
97 | | ----------------- | --------------------- | --------------------- | ------------ |
|
98 | | `value` | `Array` | none | |
|
99 | | `expandType` | `String` | `click` | Options: `['click', 'hover']`. Set how to expand children options |
|
100 | | `changeOnSelect` | `Boolean` | `false` | If set to true, options of all level can be selected |
|
101 | | `inputWrapStyle` | `[String, Object]` | none | input wrap style |
|
102 |
|
103 | ### CascaderMulti
|
104 | | Name | Type | DefaultValue | Description |
|
105 | | ----------------- | --------------------- | --------------------- | ------------ |
|
106 | | `value` | `Array` | none | |
|
107 | | `expandType` | `String` | `click` | Options: `['click', 'hover']`. Set how to expand children options |
|
108 |
|
109 | ## Events
|
110 | | Name | EmittedData | Description |
|
111 | | ----------------- | --------------------- | ------------------------------------------------- |
|
112 | | `input` | `[Array, String]` | |
|
113 | | `search` | `String` | |
|
114 |
|
115 | ## style
|
116 | For building style, you can use the css or scss file in lib directory.
|
117 | ```js
|
118 | // scss
|
119 | import 'node_modules/@livelybone/vue-select/lib/css/index.scss'
|
120 |
|
121 | // css
|
122 | import 'node_modules/@livelybone/vue-select/lib/css/index.css'
|
123 | ```
|
124 | Or
|
125 | ```scss
|
126 | // scss
|
127 | @import 'node_modules/@livelybone/vue-select/lib/css/index.scss';
|
128 |
|
129 | // css
|
130 | @import 'node_modules/@livelybone/vue-select/lib/css/index.css';
|
131 | ```
|
132 |
|
133 | Or, you can build your custom style by copying and editing `index.scss`
|
134 |
|
135 | ## QA
|
136 |
|
137 | 1. Error `Error: spawn node-sass ENOENT`
|
138 |
|
139 | > You may need install node-sass globally, `npm i -g node-sass`
|