mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-07 07:12:23 +03:00
documentation overhaul
This commit is contained in:
Jeff Sagal
Vendored
+191
-88
File diff suppressed because one or more lines are too long
@@ -156,7 +156,6 @@
|
||||
<a class="btn btn-primary btn-outline" href="https://github.com/sagalbot/vue-select"><span class="octicon octicon-mark-github"></span> View on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="#install" class="down-arrow">
|
||||
Install & Documentation
|
||||
<i role="presentation" class="glyphicon glyphicon-chevron-down"></i>
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<template>
|
||||
<code :class="class"><slot></slot></code>
|
||||
</template>
|
||||
|
||||
<script type="text/babel">
|
||||
export default {
|
||||
props: ['lang'],
|
||||
computed: {
|
||||
class () {
|
||||
return `language-${this.lang}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
+168
-23
@@ -1,31 +1,176 @@
|
||||
<template>
|
||||
<h2 class="page-header" id="install">Install & and Usage</h2>
|
||||
<p>Install from GitHub via NPM</p>
|
||||
<pre><code class="language-bash">npm install sagalbot/vue-select</code></pre>
|
||||
<section>
|
||||
<h2 class="page-header" id="install">Install & and Usage</h2>
|
||||
<div class="row row-col-vh">
|
||||
<div class="col-md-7">
|
||||
<install-snippet></install-snippet>
|
||||
</div>
|
||||
|
||||
<pre v-pre>
|
||||
<code class="language-markup"><template>
|
||||
<div id="myApp">
|
||||
<v-select :value.sync="selected" :options="options"></v-select>
|
||||
</div>
|
||||
</template></code>
|
||||
<div class="col-md-5">
|
||||
<p>The resulting vue-select, and it's value: <v-code lang="json">{{ install | json }}</v-code></p>
|
||||
<v-select :value.sync="install" :options="['foo','bar','baz']"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<code class="language-markup"><script></code>
|
||||
<code class="language-javascript">import vSelect from 'vue-select'
|
||||
export default {
|
||||
components: {vSelect},
|
||||
<h2 class="page-header" id="examples">Examples</h2>
|
||||
|
||||
data() {
|
||||
return {
|
||||
selected: null,
|
||||
options: ['foo','bar','baz']
|
||||
}
|
||||
}
|
||||
}</code><code class="language-markup">
|
||||
</script></code>
|
||||
</pre>
|
||||
<h3 class="page-header">Single/Multiple Selection</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h4>Single Option Select</h4>
|
||||
<pre><v-code lang="markup"><v-select :options="countries"></v-select></v-code></pre>
|
||||
<v-select :options="countries"></v-select>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<h4>Multiple Option Select</h4>
|
||||
<pre><v-code lang="markup"><v-select multiple :options="countries"></v-select></v-code></pre>
|
||||
<v-select multiple :options="countries"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="page-header">Reactive Options</h3>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p>When the list of options provided by the parent changes, vue-select will react as you'd expect.</p>
|
||||
<div style="margin-top:0;" class="radio">
|
||||
<label>
|
||||
<input type="radio" name="reactive-options" v-model="reactive" :value="countries">
|
||||
<v-code lang="markup"><v-select :options="countries"></v-select></v-code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" name="reactive-options" v-model="reactive" :value="['foo','bar','baz']">
|
||||
<v-code lang="markup"><v-select options="['foo','bar','baz']"></v-select></v-code>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<v-select :options="reactive"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="page-header">Two-Way Value Syncing</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p>The most common use case for vue-select is being able to sync the components value with a parent component. The <code>value</code> property supports two-way data binding to accomplish this.</p>
|
||||
<p>The <code>.sync</code> data-binding modifier is completely optional. You may use <code>value</code> without a two-way binding to preselect options.</p>
|
||||
<p>Here we have preselected 'Canada' by setting <code>syncedVal: 'Canada'</code> on the parent component. The buttons below demonstrate how you can set the <code>value</code> from the parent.</p>
|
||||
|
||||
<p>Current value: <v-code>{{ syncedVal | json }}</v-code></p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="form-group">
|
||||
<pre><v-code lang="markup"><v-select :value.sync="syncedVal" :options="countries"></v-select></v-code></pre>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<v-select :options="simple" :value.sync="syncedVal"></v-select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<button @click="syncedVal = 'United States'" class="btn btn-default">Set to United States</button>
|
||||
<button @click="syncedVal = 'Canada'" class="btn btn-default">Set to Canada</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="page-header">Custom Labels</h3>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p>By default when the <code>options</code> array contains objects, <code>vue-select</code> looks for the <code>label</code> key for display. If your data source doesn't contain that key, you can set your own using the <code>label</code> prop.</p>
|
||||
<p>On this page, the list of countries used in the examples contains <code>value</code> and <code>label</code> properties: <v-code lang="json">{value: "CA", label: "Canada"}</v-code>. In this example, we'll display the country code instead of the label.</p>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<pre><v-code lang="markup"><v-select label="value" :options="countries"></v-select></v-code></pre>
|
||||
<v-select :options="countries" label="value"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="page-header">On-Change Callback <small>Vuex Compatibility</small></h3>
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<p>vue-select provides an <code>onChange</code> property that accepts a callback function. This function is passed the currently selected value(s) as it's only parameter.</p>
|
||||
<p>This is very useful when integrating with Vuex, as it will allow your to trigger an action to update your vuex state object. Choose a callback and see it in action.</p>
|
||||
|
||||
<div class="form-inline">
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" v-model="callback" value="console"> <code>console.log(val)</code>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radio">
|
||||
<label>
|
||||
<input type="radio" v-model="callback" value="alert"> <code>alert(val)</code>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<pre><v-code lang="markup"><v-select on-change="consoleCallback" :options="countries"></v-select></v-code></pre>
|
||||
<pre><v-code lang="javascript">methods: {
|
||||
consoleCallback(val) {
|
||||
console.dir(JSON.stringify(val))
|
||||
},
|
||||
|
||||
alertCallback(val) {
|
||||
alert(JSON.stringify(val))
|
||||
}
|
||||
}</v-code></pre>
|
||||
<v-select :options="countries" :on-change="getCallback"></v-select>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style type="scss">
|
||||
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {}
|
||||
import countries from '../countries/advanced'
|
||||
import simple from '../countries/simple'
|
||||
import vSelect from './Select.vue'
|
||||
import vCode from './Code.vue'
|
||||
import InstallSnippet from './snippets/InstallSnippet.vue'
|
||||
export default {
|
||||
components: {vSelect,vCode,InstallSnippet},
|
||||
data () {
|
||||
return {
|
||||
countries,
|
||||
simple,
|
||||
callback: 'console',
|
||||
reactive: null,
|
||||
install: null,
|
||||
syncedVal: 'Canada'
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
consoleCallback(val) {
|
||||
console.dir(JSON.stringify(val))
|
||||
},
|
||||
|
||||
alertCallback(val) {
|
||||
alert(JSON.stringify(val))
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
getCallback() {
|
||||
if( this.callback === 'alert' ) {
|
||||
return this.alertCallback
|
||||
}
|
||||
|
||||
return this.consoleCallback
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<p>Install from GitHub via NPM</p>
|
||||
<pre><v-code lang="bash">npm install sagalbot/vue-select</v-code></pre>
|
||||
|
||||
<p>To use the vue-select component in your templates, simply import it, and register it with your component.</p>
|
||||
<pre><v-code lang="markup"><template>
|
||||
<div id="myApp">
|
||||
<v-select :value.sync="selected" :options="options"></v-select>
|
||||
</div>
|
||||
</template>
|
||||
<script></v-code>
|
||||
<v-code lang="javascript">import vSelect from "vue-select"
|
||||
export default {
|
||||
components: {vSelect},
|
||||
|
||||
data() {
|
||||
return {
|
||||
selected: null,
|
||||
options: ['foo','bar','baz']
|
||||
}
|
||||
}
|
||||
}
|
||||
</script></v-code>
|
||||
</pre>
|
||||
</template>
|
||||
<script type="text/babel">
|
||||
import vCode from '../Code.vue'
|
||||
export default {
|
||||
components: {vCode}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user