Skip to content
A vue select component, includes cascader
Vue JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
src
test
.eslintignore
.eslintrc.js
.gitignore
.npmignore
.prettierrc.js
LICENSE
README.md
index.d.ts
karma.conf.js
package.json
rollup.config.base.js
rollup.config.js
watch.js
webpack.config.js

README.md

@livelybone/vue-select

NPM Version Download Month gzip with dependencies: 15kb typescript pkg.module ssr supported

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

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

SelectBase

Name Type DefaultValue Description
value [String, Number] none
inputWrapStyle [String, Object] none

SelectMulti

Name Type DefaultValue Description
value Array none

Cascader

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

CascaderMulti

Name Type DefaultValue Description
value Array none
expandType String click Options: ['click', 'hover']. Set how to expand children options

Events

Name EmittedData Description
input [Array, String]
search String

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

You can’t perform that action at this time.