mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-19 09:50:33 +03:00
Code Activity

add ajax to docs

Browse Source
This commit is contained in:
Jeff Sagal
2016-06-15 20:34:38 -07:00
parent 480bfc1c5f
commit bfae6b3068
11 changed files with 430 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/snippets/Ajax.vue
+130
View File
@@ -0,0 +1,130 @@
<template>
<article class="example" id="ex-ajax">
<h3 id="ajax" class="page-header">AJAX Remote Option Loading</h3>
<div class="row">
<div class="col-md-6">
<p>
The <code>onSearch</code> prop allows you to load options via ajax in a parent component
when the search text is updated. It is invoked with two parameters, <code>search</code> &amp; <code>loading</code>.
</p>
<h4>onSearch Callback Parameters <small>search, loading</small></h4>
<p>
<code>search</code> is a string containing the current search text.
<code>loading</code> is a function that accepts a boolean value,
and is used to toggle the 'loading' class on the top-level vue-select wrapper.
</p>
<h4>Loading Spinner</h4>
<p>
Vue Select includes a default loading spinner that appears when the loading class is present.
The <code>spinner</code> slot allows you to implement your own spinner.
</p>
<div id="spinner-example" :class="{loading:spinner}">
<button class="btn btn-sm btn-default" @click="spinner = !spinner">Toggle Spinner</button>
<div class="spinner" v-show="spinner">Loading...</div>
</div>
<h4>Debounce Input</h4>
<p>
Vue Select also accepts a <code>debounce</code> prop that can be used to prevent
<code>onSearch</code> from being called until input has completed.
</p>
<h4>Library Agnostic</h4>
<p>
Since Vue.js does not ship with ajax functionality as part of the core library,
it's up to you to process the ajax requests in your parent component.
</p>
</div>
<div class="col-md-6">
<h4>Example <small>GitHub API</small></h4>
<p>In this example,
<a href="https://github.com/vuejs/vue-resource">Vue Resource</a> is used to access the
<a href="https://developer.github.com/v3/">GitHub API</a>.
</p>
<git-hub-search-basic></git-hub-search-basic>
<ajax-example></ajax-example>
</div>
</div>
<div class="row">
<div class="col-md-6">
</div>
</div>
</div>
</article>
</template>
<style>
#spinner-example {
max-width: 10em;
display: block;
}
#spinner-example .spinner {
display: none;
display: inline-block;
float: right;
opacity: 0;
font-size: 5px;
text-indent: -9999em;
border-top: .9em solid rgba(100,100,100,.1);
border-right: .9em solid rgba(100,100,100,.1);
border-bottom: .9em solid rgba(100,100,100,.1);
border-left: .9em solid rgba(60,60,60,.45);
transform: translateZ(0);
animation: vSelectSpinner 1.1s infinite linear;
transition: opacity .1s;
}
#spinner-example.loading .spinner {
opacity: 1;
display: block;
}
#spinner-example .spinner,
#spinner-example .spinner:after {
border-radius: 50%;
width: 5em;
height: 5em;
}
@-webkit-keyframes vSelectSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes vSelectSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<script type="text/babel">
import GitHubSearchBasic from 'components/GitHubSearchBasic.vue'
import GitHubSearch from 'components/GitHubSearch.vue'
import AjaxProps from './AjaxProps.vue'
import AjaxExample from './AjaxExample.vue'
export default {
components: {GitHubSearchBasic, GitHubSearch, AjaxProps, AjaxExample},
data() {
return {
basicSource: false,
spinner: false
}
}
}
</script>