1.0.0 • Published 2 years ago

@szotyi/vue2-selectize v1.0.0

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

vue2-selectize by Szotyi41

A Selectize wrapper for VueJS 2.

New Features

Functions

  • slideToggle - If its true the options will slide
  • disableTriggerOnChange - If its called the onChange event will not called anymore
  • enableTriggerOnChange - If its called the onChange event will callend again
  • onItemRemove <function(items, removedItem)> - This function called when an item removed
  • setFocus
  • setBlur
  • setValue <function (value)>
  • setOptions <function (array or object of option)>
  • addOptions <function (array or object of option)>
  • addOption <function (object of option)>
  • setItems <function (object of items, if its true its added when option is not exists)> - Remove all items and add
  • addItems <function (object of items, if its true its added when option is not exists)> - Just add items, not remove
  • addItem <function (item, if its true its added when option is not exists)>
  • addOptionsIfNotExists <function (options)>
  • addOptionIfNotExists <function (option)>
  • addItemAsOption <function (option)> - Add item (param will option not item) Option has value and text field
  • createOnEnter - Create will run when you press enter and text is not empty
  • createOnBlur - Create will run when you click outside and text is not empty
  • debug - Enable debug mode
  • disableItemRemove - Disable user can remove item with backspace, its help you make required fields

Variables

  • inputText - Text in input
  • element - Element of select
  • options - Options array
  • focus - If focused

Prerequisites

  • jQuery >= 1.7.0

Installation

npm install --save jquery vue2-selectize

Usage

<selectize v-model="selected" :settings="settings"> <!-- settings is optional -->
  <option :value="1">One</option>
  <option :value="2">Two</option>
</selectize>
import Selectize from 'vue2-selectize'

export default {
  components: {
    Selectize
  },
  data() {
    return {
      settings: {}, // https://github.com/selectize/selectize.js/blob/master/docs/usage.md
      selected: 1
    }
  }
}
// Include your preferred theme in your main SASS file (or your component's <style lang="scss"/> section).

@import "~selectize/dist/css/selectize.bootstrap3.css";