2
0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-07 07:12:23 +03:00
This commit is contained in:
Jeff
2018-01-15 15:29:21 -08:00
parent cca0f755da
commit 0c0fa25e2b
68 changed files with 7213 additions and 36 deletions
View File
+736
View File
@@ -0,0 +1,736 @@
<!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 File
+25
View File
@@ -0,0 +1,25 @@
name,type
value,Object||String||null
options,Array
disabled,Boolean
maxHeight,String
searchable,Boolean
multiple,Boolean
placeholder,String
transition,String
clearSearchOnSelect,Boolean
closeOnSelect,Boolean
label,String
getOptionLabel,Function
filterFunction,Function
filter,Function
onChange,Function
taggable,Boolean
tabindex,Number
pushTags,Boolean
filterable,Boolean
createOption,Function
resetOnOptionsChange,Boolean
noDrop,Boolean
inputId,String
dir,String
1 name type
2 value Object||String||null
3 options Array
4 disabled Boolean
5 maxHeight String
6 searchable Boolean
7 multiple Boolean
8 placeholder String
9 transition String
10 clearSearchOnSelect Boolean
11 closeOnSelect Boolean
12 label String
13 getOptionLabel Function
14 filterFunction Function
15 filter Function
16 onChange Function
17 taggable Boolean
18 tabindex Number
19 pushTags Boolean
20 filterable Boolean
21 createOption Function
22 resetOnOptionsChange Boolean
23 noDrop Boolean
24 inputId String
25 dir String