UNPKG

6.53 kBMarkdownView Raw
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
11A vue select component, includes cascader
12
13## repository
14https://github.com/livelybone/vue-select
15
16## Demo
17https://livelybone.github.io/vue/vue-select/
18
19## Run Example
20Your can see the usage by run the example of the module, here is the step:
21
221. Clone the library `git clone https://github.com/livelybone/vue-select.git`
232. Go to the directory `cd vue-select`
243. Install npm dependencies `npm i`(use taobao registry: `npm i --registry=http://registry.npm.taobao.org`)
254. Open service `npm run dev`
265. See the example(usually is `http://127.0.0.1/examples/test.html`) in your browser
27
28## Installation
29```bash
30npm i -S @livelybone/vue-select
31```
32
33## Register
34```js
35// import all
36import {SelectBase, SelectMulti, Cascader, CascaderMulti} from '@livelybone/vue-select';
37// or
38import * as VueSelect from '@livelybone/vue-select';
39
40// Global register
41Vue.component('select-base', SelectBase);
42Vue.component('select-multi', SelectMulti);
43Vue.component('cascader', Cascader);
44Vue.component('cascader-multi', CascaderMulti);
45
46// Local register
47new Vue({
48 components:{SelectBase, SelectMulti, Cascader, CascaderMulti}
49})
50```
51
52Use 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
73const 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
116For building style, you can use the css or scss file in lib directory.
117```js
118// scss
119import 'node_modules/@livelybone/vue-select/lib/css/index.scss'
120
121// css
122import 'node_modules/@livelybone/vue-select/lib/css/index.css'
123```
124Or
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
133Or, you can build your custom style by copying and editing `index.scss`
134
135## QA
136
1371. Error `Error: spawn node-sass ENOENT`
138
139> You may need install node-sass globally, `npm i -g node-sass`