总 Vue 菜鸟在这里。只是想要一个用于 Vue 的 typeahead 组件。Bootstrap 有一个,但我不知道如何整合这两者!
我能找到的唯一选项要么仅适用于 Vue 1.x,要么有大量文档(而且将 Bootstrap 组件移植到 Vue 2.x 的主要工作似乎不包括预先输入。)
总 Vue 菜鸟在这里。只是想要一个用于 Vue 的 typeahead 组件。Bootstrap 有一个,但我不知道如何整合这两者!
我能找到的唯一选项要么仅适用于 Vue 1.x,要么有大量文档(而且将 Bootstrap 组件移植到 Vue 2.x 的主要工作似乎不包括预先输入。)
我一直是vue-strap的用户,很久没有维护了……(vue 1版本和vue 2 fork)
看看这个(由我自己创建):https ://uiv.wxsm.space/typeahead/
(使用 Vue 2 和 Bootstrap 3 的简单而优雅的 typeahead 实现)
安装:
$ npm install uiv --save
示例用法:
<template>
<section>
<label for="input">States of America:</label>
<input id="input" class="form-control" type="text" placeholder="Type to search...">
<typeahead v-model="model" target="#input" :data="states" item-key="name"/>
</section>
</template>
<script>
import {Typeahead} from 'uiv'
import states from '../../assets/data/states.json'
export default {
components: {Typeahead},
data () {
return {
model: '',
states: states.data
}
}
}
</script>
<!-- typeahead-example.vue -->
试试wffranco 的 vue-strap 分支。它旨在支持 Vue.js 2.xx 我测试了 master 的最新版本(build 2.0.0-pre.11)并且它有效:https ://jsfiddle.net/LukaszWiktor/kzadgqv9/
<link rel="stylesheet" href="libs/bootstrap/css/bootstrap.css">
<div id="app">
<typeahead v-model="value" v-bind:data="options"></typeahead>
</div>
<script src="libs/vue/vue.js"></script>
<script src="libs/vue-strap/vue-strap.js"></script>
<script>
Vue.component("typeahead", VueStrap.typeahead);
var app = new Vue({
el: "#app",
data: {
value: null,
options: ["foo", "bar", "baz"]
}
})
</script>