@livelybone/vue-select v2.7.0

@livelybone/vue-select

pkg.module supported, which means that you can apply tree-shaking in you project

A vue select component, includes cascader

repository

https://github.com/livelybone/vue-select

Demo

https://livelybone.github.io/vue/vue-select/

Run Example

Your can see the usage by run the example of the module, here is the step:

1. Clone the library git clone https://github.com/livelybone/vue-select.git
2. Go to the directory cd vue-select
3. Install npm dependencies npm i(use taobao registry: npm i --registry=http://registry.npm.taobao.org)
4. Open service npm run dev
5. See the example(usually is http://127.0.0.1/examples/test.html) in your browser

Installation

npm i -S @livelybone/vue-select

Register

// 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>

Props

Common

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
  },
}

SelectBase

SelectMulti

Cascader

CascaderMulti

Events

style

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

QA

1. Error Error: spawn node-sass ENOENT

You may need install node-sass globally, npm i -g node-sass