18

总 Vue 菜鸟在这里。只是想要一个用于 Vue 的 typeahead 组件。Bootstrap 有一个,但我不知道如何整合这两者!

我能找到的唯一选项要么仅适用于 Vue 1.x,要么有大量文档(而且将 Bootstrap 组件移植到 Vue 2.x 的主要工作似乎不包括预先输入。)

4

3 回答 3

4

我一直是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 -->
于 2017-11-25T08:59:48.340 回答
1

看看这个组件:

https://github.com/pespantelis/vue-typeahead

此外,已经有大量的 vue 组件:

https://vuecomponents.com

于 2016-10-27T15:36:50.843 回答
0

试试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>
于 2017-02-13T23:41:19.737 回答