vue-input-selector
Vue input component with list selector powered by Bootstrap modal
Last updated 2 years ago by tonysong .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-input-selector 
SYNC missed versions from official npm registry.

Vue Input Selector

Vue input component with list selector powered by Bootstrap modal.

Demo

Vue Input Selector Demo

Getting Started

First you need Bootstrap Framework and jQuery, these instructions will get you a copy of the project up and running on your local machine.

Prerequisites

Install the component

npm install --save-dev vue-input-selector

How to use

Import Vue and register this component at your main javascript file:

import Vue from 'vue'
import InputSelector from 'vue-input-selector'

Vue.component('InputSelector', InputSelector)

To display the interface, use input-selector element at your Vue component

<input-selector></input-selector>

Full props/configuration

All of these configurations/props are optional.

title [String, default: empty string]

Set title of the selector, this will prefix with "Select <your title>"

items [Object, default: empty Array]

List items with array of object, with key value and name.

disabled [Boolean, default: False]

Set "select" button disabled.

DisabledMessage [String, default: empty string]

Message to display on "select" button is selected when disabled is True.

inputError [Boolean, default: false]

Add class is-invalid to input, default behavior of Bootstrap is the input box will have red border.

errorMessage [String, default: "This column is required"]

Message to show below the input when inputError value is True.

busy [Boolean, default: false]

Show loading spinner

Event

Only single event available, @select, which will return current selected object item.

Full code example

<!-- app.vue  -->
<template>
  <div>
    <input-selector
      :items="customItems"
      :disabled="inputSelectorConfig.disabled"
      :disabledMessage="inputSelectorConfig.disabledMessage"
      :inputError="inputSelectorConfig.inputError"
      :errorMessage="inputSelectorConfig.errorMessage"
      :title="inputSelectorConfig.title"
      :busy="inputSelectorConfig.busy"
      @select="onStudentSelect">
    ></input-selector>
    
    <p>
      name: {{ selectedItem.name }}, value: {{ selectedItem.value }}
    </p>

  </div>
</template>

<script>
  export default {
    data(){
      return {
        selectedItem: {},
        inputSelectorConfig :{
          title : "Students",
          disabled : false,
          disabledMessage : "Disabled, try again later",
          inputError : false,
          errorMessage : "Well, something goes wrong",
          busy :false
        },
        customItems:
        [{
         "value": 1,
         "name": "Delcina"
         },
         {
         "value": 2,
         "name": "Philippa"
         },
         {
         "value": 3,
         "name": "Pamela"
         },
         {
         "value": 4,
         "name": "Darla"
         },
         {
         "value": 5,
         "name": "Raymund"
         }]
        }
    },
    methods:{
      onStudentSelect(item){
        this.selectedItem = item;
        this.inputSelectorConfig.inputError = false;
      }
    }   
  }
</script>

Built With

  • NodeJS - Used to intepret javascripts
  • Poi - A nice build tools for Vue component

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

License

This project is licensed under the MIT License

Current Tags

  • 1.0.9                                ...           latest (2 years ago)

10 Versions

  • 1.0.9                                ...           2 years ago
  • 1.0.8                                ...           2 years ago
  • 1.0.7                                ...           2 years ago
  • 1.0.6                                ...           2 years ago
  • 1.0.5                                ...           2 years ago
  • 1.0.4                                ...           2 years ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           2 years ago
  • 1.0.1                                ...           2 years ago
  • 1.0.0                                ...           2 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 11
Dependencies (0)
None
Dev Dependencies (2)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |