Newlyweds Proposing Marriage

    @livelybone/vue-select
    TypeScript icon, indicating that this package has built-in type declarations

    2.6.5 • Public • Published

    @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

    Install

    npm i @livelybone/vue-select

    DownloadsWeekly Downloads

    70

    Version

    2.6.5

    License

    MIT

    Unpacked Size

    335 kB

    Total Files

    12

    Last publish

    Collaborators

    • livelybone