mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-05-20 03:09:36 +03:00
Code Activity
Files
0c0fa25e2ba5b42972c7e1fecbb37bbd9fbf2fe8
vue-select/docs/Api/Props.html
T
Jeff 0c0fa25e2b Updates
2018-01-15 15:29:21 -08:00

737 lines
21 KiB
HTML
Raw Blame History

<!DOCTYPE HTML>
<html lang="" >
<head>
<meta charset="UTF-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Props · vue-select</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="">
<meta name="generator" content="GitBook 3.2.3">
<link rel="stylesheet" href="../gitbook/style.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-highlight/website.css">
<link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css">
<link rel="stylesheet" href="../styles/website.css">
<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png">
<link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon">
</head>
<body>
<div class="book">
<div class="book-summary">
<div id="book-search-input" role="search">
<input type="text" placeholder="Type to search" />
</div>
<nav role="navigation">
<ul class="summary">
<li class="chapter " data-level="1.1" data-path="../">
<a href="../">
Introduction
</a>
</li>
<li class="chapter " data-level="1.2" >
<span>
Getting Started
</span>
</li>
<li class="chapter " data-level="1.3" data-path="../Install.html">
<a href="../Install.html">
Installation
</a>
</li>
<li class="chapter " data-level="1.4" data-path="../Basics/Options.html">
<a href="../Basics/Options.html">
Dropdown Options
</a>
<ul class="articles">
<li class="chapter " data-level="1.4.1" data-path="../Basics/Options.html">
<a href="../Basics/Options.html#labels">
Option Labels
</a>
</li>
<li class="chapter " data-level="1.4.2" data-path="../Basics/Options.html">
<a href="../Basics/Options.html#null">
Null Options
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.5" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#values">
Selecting Values
</a>
<ul class="articles">
<li class="chapter " data-level="1.5.1" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#single">
Single
</a>
</li>
<li class="chapter " data-level="1.5.2" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#multiple">
Multiple
</a>
</li>
<li class="chapter " data-level="1.5.3" data-path="../Basics/Values.html">
<a href="../Basics/Values.html#tagging">
Tagging
</a>
</li>
</ul>
</li>
<li class="chapter " data-level="1.6" data-path="../Basics/Localization.html">
<a href="../Basics/Localization.html">
Localization
</a>
</li>
<li class="chapter " data-level="1.7" >
<span>
Digging Deeper
</span>
</li>
<li class="chapter " data-level="1.8" data-path="../Advanced/Templating.html">
<a href="../Advanced/Templating.html">
Templating
</a>
</li>
<li class="chapter " data-level="1.9" data-path="../Advanced/Vuex.html">
<a href="../Advanced/Vuex.html">
Vuex
</a>
</li>
<li class="chapter " data-level="1.10" data-path="../Advanced/Ajax.html">
<a href="../Advanced/Ajax.html">
AJAX
</a>
</li>
<li class="chapter " data-level="1.11" data-path="../Examples.html">
<a href="../Examples.html">
Examples
</a>
</li>
<li class="chapter " data-level="1.12" >
<span>
API
</span>
</li>
<li class="chapter active" data-level="1.13" data-path="Props.html">
<a href="Props.html">
Props
</a>
</li>
<li class="divider"></li>
<li>
<a href="https://www.gitbook.com" target="blank" class="gitbook-link">
Published with GitBook
</a>
</li>
</ul>
</nav>
</div>
<div class="book-body">
<div class="body-inner">
<div class="book-header" role="navigation">
<!-- Title -->
<h1>
<i class="fa fa-circle-o-notch fa-spin"></i>
<a href=".." >Props</a>
</h1>
</div>
<div class="page-wrapper" tabindex="-1" role="main">
<div class="page-inner">
<div id="book-search-results">
<div class="search-noresults">
<section class="normal markdown-section">
<h2 id="select">Select</h2>
<pre><code class="lang-js"><span class="hljs-comment">/**
* Contains the currently selected value. Very similar to a
* `value` attribute on an &lt;input&gt;. You can listen for changes
* using &apos;change&apos; event using v-on
* @type {Object||String||null}
*/</span>
value: {
<span class="hljs-keyword">default</span>: <span class="hljs-literal">null</span>
},
<span class="hljs-comment">/**
* An array of strings or objects to be used as dropdown choices.
* If you are using an array of objects, vue-select will look for
* a `label` key (ex. [{label: &apos;This is Foo&apos;, value: &apos;foo&apos;}]). A
* custom label key can be set with the `label` prop.
* @type {Array}
*/</span>
options: {
type: <span class="hljs-built_in">Array</span>,
<span class="hljs-keyword">default</span>() {
<span class="hljs-keyword">return</span> []
},
},
<span class="hljs-comment">/**
* Disable the entire component.
* @type {Boolean}
*/</span>
disabled: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">false</span>
},
<span class="hljs-comment">/**
* Sets the max-height property on the dropdown list.
* @deprecated
* @type {String}
*/</span>
maxHeight: {
type: <span class="hljs-built_in">String</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-string">&apos;400px&apos;</span>
},
<span class="hljs-comment">/**
* Enable/disable filtering the options.
* @type {Boolean}
*/</span>
searchable: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">true</span>
},
<span class="hljs-comment">/**
* Equivalent to the `multiple` attribute on a `&lt;select&gt;` input.
* @type {Boolean}
*/</span>
multiple: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">false</span>
},
<span class="hljs-comment">/**
* Equivalent to the `placeholder` attribute on an `&lt;input&gt;`.
* @type {String}
*/</span>
placeholder: {
type: <span class="hljs-built_in">String</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-string">&apos;&apos;</span>
},
<span class="hljs-comment">/**
* Sets a Vue transition property on the `.dropdown-menu`. vue-select
* does not include CSS for transitions, you&apos;ll need to add them yourself.
* @type {String}
*/</span>
transition: {
type: <span class="hljs-built_in">String</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-string">&apos;fade&apos;</span>
},
<span class="hljs-comment">/**
* Enables/disables clearing the search text when an option is selected.
* @type {Boolean}
*/</span>
clearSearchOnSelect: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">true</span>
},
<span class="hljs-comment">/**
* Close a dropdown when an option is chosen. Set to false to keep the dropdown
* open (useful when combined with multi-select, for example)
* @type {Boolean}
*/</span>
closeOnSelect: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">true</span>
},
<span class="hljs-comment">/**
* Tells vue-select what key to use when generating option
* labels when each `option` is an object.
* @type {String}
*/</span>
label: {
type: <span class="hljs-built_in">String</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-string">&apos;label&apos;</span>
},
<span class="hljs-comment">/**
* Callback to generate the label text. If {option}
* is an object, returns option[this.label] by default.
* @type {Function}
* @param {Object || String} option
* @return {String}
*/</span>
getOptionLabel: {
type: <span class="hljs-built_in">Function</span>,
<span class="hljs-keyword">default</span>(option) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> option === <span class="hljs-string">&apos;object&apos;</span>) {
<span class="hljs-keyword">if</span> (!option.hasOwnProperty(<span class="hljs-keyword">this</span>.label)) {
<span class="hljs-keyword">return</span> <span class="hljs-built_in">console</span>.warn(
<span class="hljs-string">`[vue-select warn]: Label key &quot;option.<span class="hljs-subst">${this.label}</span>&quot; does not`</span> +
<span class="hljs-string">` exist in options object <span class="hljs-subst">${JSON.stringify(option)}</span>.\n`</span> +
<span class="hljs-string">&apos;http://sagalbot.github.io/vue-select/#ex-labels&apos;</span>
)
}
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.label &amp;&amp; option[<span class="hljs-keyword">this</span>.label]) {
<span class="hljs-keyword">return</span> option[<span class="hljs-keyword">this</span>.label]
}
}
<span class="hljs-keyword">return</span> option;
}
},
<span class="hljs-comment">/**
* Callback to filter the search result the label text.
* @type {Function}
* @param {Object || String} option
* @param {String} label
* @param {String} search
* @return {Boolean}
*/</span>
filterFunction: {
type: <span class="hljs-built_in">Function</span>,
<span class="hljs-keyword">default</span>(option, label, search) {
<span class="hljs-keyword">return</span> (label || <span class="hljs-string">&apos;&apos;</span>).toLowerCase().indexOf(search.toLowerCase()) &gt; <span class="hljs-number">-1</span>
}
},
<span class="hljs-comment">/**
* An optional callback function that is called each time the selected
* value(s) change. When integrating with Vuex, use this callback to trigger
* an action, rather than using :value.sync to retreive the selected value.
* @type {Function}
* @param {Object || String} val
*/</span>
onChange: {
type: <span class="hljs-built_in">Function</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">val</span>) </span>{
<span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">&apos;input&apos;</span>, val)
}
},
<span class="hljs-comment">/**
* Enable/disable creating options from searchInput.
* @type {Boolean}
*/</span>
taggable: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">false</span>
},
<span class="hljs-comment">/**
* Set the tabindex for the input field.
* @type {Number}
*/</span>
tabindex: {
type: <span class="hljs-built_in">Number</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">null</span>
},
<span class="hljs-comment">/**
* When true, newly created tags will be added to
* the options list.
* @type {Boolean}
*/</span>
pushTags: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">false</span>
},
<span class="hljs-comment">/**
* When true, existing options will be filtered
* by the search text. Should not be used in conjunction
* with taggable.
* @type {Boolean}
*/</span>
filterable: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">true</span>
},
<span class="hljs-comment">/**
* User defined function for adding Options
* @type {Function}
*/</span>
createOption: {
type: <span class="hljs-built_in">Function</span>,
<span class="hljs-keyword">default</span>(newOption) {
<span class="hljs-keyword">if</span> (<span class="hljs-keyword">typeof</span> <span class="hljs-keyword">this</span>.mutableOptions[<span class="hljs-number">0</span>] === <span class="hljs-string">&apos;object&apos;</span>) {
newOption = {[<span class="hljs-keyword">this</span>.label]: newOption}
}
<span class="hljs-keyword">this</span>.$emit(<span class="hljs-string">&apos;option:created&apos;</span>, newOption)
<span class="hljs-keyword">return</span> newOption
}
},
<span class="hljs-comment">/**
* When false, updating the options will not reset the select value
* @type {Boolean}
*/</span>
resetOnOptionsChange: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">false</span>
},
<span class="hljs-comment">/**
* Disable the dropdown entirely.
* @type {Boolean}
*/</span>
noDrop: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">false</span>
},
<span class="hljs-comment">/**
* Sets the id of the input element.
* @type {String}
* @default {null}
*/</span>
inputId: {
type: <span class="hljs-built_in">String</span>
},
<span class="hljs-comment">/**
* Sets RTL support. Accepts &apos;ltr&apos;, &apos;rtl&apos;, &apos;auto&apos;.
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir
* @type {String}
* @default &apos;auto&apos;
*/</span>
dir: {
type: <span class="hljs-built_in">String</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-string">&apos;auto&apos;</span>
},
</code></pre>
<h2 id="ajax">AJAX</h2>
<pre><code class="lang-js"><span class="hljs-comment">/**
* Toggles the adding of a &apos;loading&apos; class to the main
* .v-select wrapper. Useful to control UI state when
* results are being processed through AJAX.
*/</span>
loading: {
type: <span class="hljs-built_in">Boolean</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-literal">false</span>
},
<span class="hljs-comment">/**
* Accept a callback function that will be
* run when the search text changes.
*
* loading() accepts a boolean value, and can
* be used to toggle a loading class from
* the onSearch callback.
*
* @param {search} String Current search text
* @param {loading} Function(bool) Toggle loading class
*/</span>
onSearch: {
type: <span class="hljs-built_in">Function</span>,
<span class="hljs-keyword">default</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">search, loading</span>)</span>{}
}
</code></pre>
</section>
</div>
<div class="search-results">
<div class="has-results">
<h1 class="search-results-title"><span class='search-results-count'></span> results matching "<span class='search-query'></span>"</h1>
<ul class="search-results-list"></ul>
</div>
<div class="no-results">
<h1 class="search-results-title">No results matching "<span class='search-query'></span>"</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var gitbook = gitbook || [];
gitbook.push(function() {
gitbook.page.hasChanged({"page":{"title":"Props","level":"1.13","depth":1,"previous":{"title":"API","level":"1.12","depth":1,"ref":"","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","-fontsettings","codepen","include-csv"],"root":"./docs/gitbook","styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"include-csv":{},"github":{"url":"https://github.com/sagalbot/vue-select/"},"search":{},"codepen":{"theme":32252},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"highlight":{},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Edit This Page","base":"https://github.com/sagalbot/vue-select/edit/gitbook/docs/gitbook"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"vue-select","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":">3.0.0"},"file":{"path":"Api/Props.md","mtime":"2018-01-15T07:27:25.897Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-01-15T23:01:42.518Z"},"basePath":"..","book":{"language":""}});
});
</script>
</div>
<script src="../gitbook/gitbook.js"></script>
<script src="../gitbook/theme.js"></script>
<script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script>
<script src="../gitbook/gitbook-plugin-codepen/embed-codepen.js"></script>
<script src="../gitbook/gitbook-plugin-search/search-engine.js"></script>
<script src="../gitbook/gitbook-plugin-search/search.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script>
<script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script>
<script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script>
</body>
</html>
View Git Blame Copy Permalink