/vue-multi-select

A Custom Select via Vue 2.0 & TypeScript

Primary LanguageVueMIT LicenseMIT

Vue-Multi-Select

以 Vue 2 和 TypeScript 為基底的簡易選擇器 A Vue-Multi-Select via Vue 2.0 & TypeScript

Table of Contents

Demo

Alt text

Getting Started

Prerequisites 安裝環境建置

  • Node.js - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
  • Vue 2.0 - The Progressive JavaScript Framework

How to use 如何使用

  1. Install via npm 使用 npm 來進行安裝
    cd /"your-vue-project-root-folder"/
    npm install @andy922200/vue-multi-select
  1. Usage in Vue 2 在 Vue 2 環境下使用
    /*  main.ts or main.js */
    import '@andy922200/vue-multi-select/dist/vue-multi-select.css'
    import VueMultiSelect from '@andy922200/vue-multi-select'
    Vue.use(VueMultiSelect)
  1. Use the component in *.vue 在 *.vue 中使用套件
<!-- Single Layer Mode-->
<template>
    <vue-multi-select 
        selector-title="SingleLayer"
        :is-fetching="isFetching"
        :button-options="{
            close: { name: 'Close1', hide: false},
            apply: { name: 'Apply1', hide: false},
            selectAll: { name: 'SelectAll1', hide: false},
            clear: { name: 'Clear1', hide: false},
        }"
        :options="yourData"
        place-holder-text="placeHolderText"
        @getSelectedOptions="method for receiving data"
    />
</template>

<!-- Double Layer Mode-->
<template>
    <vue-multi-select 
        selector-title="DoubleLayer"
        :is-fetching="isFatherFetching"
        :button-options="{
            close: { name: 'Close2', hide: false},
            apply: { name: 'Apply2', hide: false},
            selectAll: { name: 'SelectAll2', hide: false},
            clear: { name: 'Clear2', hide: false},
        }"
        :double-layer-mode="true"
        :group-mode="true"
        :father-options="tests"
        :children-option-fetch-function="fetchData"
        place-holder-text="placeHolderText"
        @getSelectedOptions="printValue"
    />
</template>

Props 傳入參數

Name Default Value Type Required Describe
buttonOptions buttonOption[] Object false 4 Buttons ( Close, Apply, SelectAll Clear)
childrenOptionFetchFunction {} Function false Fetch ChildrenLayer Option
doubleLayerMode false Boolean false Activate DoubleLayer Mode
fatherOptions [] Array false FatherLayer Options
groupMode false Boolean false Activate GroupMode (The object in each option should include 'groupName' )
isFetching false Boolean false built-in spinner
isToggleButtonDisable false Boolean false toggle button status
limit Infinity Number false limit numbers of user-selected options
options [] Array false Selector Options
placeHolderText false String false searchBar placeHolderText
single false Boolean false single select
selectorTitle "" String true Trigger Dropdown Button Text 
// buttonOption Interface
{
    "name": "string",
    "hide": boolean
}

// buttonOption Default
{
    close: { name: 'Close1', hide: false},
    apply: { name: 'Apply1', hide: false},
    selectAll: { name: 'SelectAll1', hide: false},
    clear: { name: 'Clear1', hide: false},
}

Event 觸發事件

Name Type Describe
getSelectedOptions customObject [] [Array] get user-selected options 
// SingleLayer Option Object Demo
{
    "key1":"value1",
    "key2":"value2",
    "key3":"value3",
    "label": "label1, This should be included.",
    "groupName": "If you are using groupMode, this key-value pair should be included"
}

// DoubleLayer FatherOption Object Demo
{
    "label": "NodeJS",
    "value": "nodejs"
}

// DoubleLayer ChildrenOption Object Demo
{
    "key1":"value1",
    "key2":"value2",
    "key3":"value3",
    "label": "label1, This should be included.",
    "fatherOptionLabel": "This value will be generated from 'DoubleLayer FatherOption Object label'",
    "groupName": "If you are using groupMode, this key-value pair should be included"
}
// childrenOptionFetchFunction Demo
async fetchData(query='', fatherOptionLabel=''){
    try{
        const { data: rawData } = await axios.get(`/positions.json?search=${query}`)
        const result = rawData.map((d:any)=>{
            const newObject = {
                ... d,
                label: `${fatherOptionLabel} ${d.title}`,
                fatherOptionLabel,
                groupName: d.company ? d.company : 'N/A'
            }
            return newObject
        })
        return result
    }catch(err){
        console.log(err)
    }
}

Customize your Button 客製化按鈕

<vue-multi-select>
    <template #closeBtn="{closeMethod}">
        <button @click="closeMethod">
            Close
        </button>
    </template>

    <template #spinner>
        Your Spinner Component
    </template>
</<vue-multi-select>

Slot

Name Method
closeBtn closeMethod
applyBtn applyMethod
selectAllBtn selectAllMethod
clearBtn clearSelectedOptionsMethod
spinner None

Built With

  • Node.js - Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
  • Vue 2.0 - The Progressive JavaScript Framework
  • Vue-Sfc-Rollup - vue-sfc-rollup is a CLI templating utility that scaffolds a minimal setup for compiling a Vue Single File Component (SFC) - or library of multiple SFCs
  • TypeScript - TypeScript extends JavaScript by adding types.

Author

License

This project is licensed under the MIT License - see the LICENSE for details.