网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个简单但可配置的Vue.js和Bootstrap4自动完成和预输入组件。易于与任何基于JSON的API集成。
1. 安装并导入vue-typeahead-bootstrap组件。
import VueTypeaheadBootstrap from 'vue-typeahead-bootstrap';
2. 注册组件。
// Global
Vue.component('vue-typeahead-bootstrap', VueTypeaheadBootstrap)
// or Local
export default {
components: {
VueTypeaheadBootstrap
}
}
3. 创建一个简单的国家/地区选择。
<template>
<div>
Options: `Canada, United States, Mexico`,
<vue-typehead-bootstrap
:data="['Canada', 'United States', 'Mexico']"
v-model="query"
placeholder="Choose a country"
/>
Selected Country: {{query}}
</div>
</template>
export default {
data(){
return {
query: ''
}
}
}
4. 默认配置项。
size: {
type: String,
default: null,
validator: size => ['lg', 'sm'].indexOf(size) > -1
},
value: {
type: String
},
disabled: {
type: Boolean,
default: false
},
data: {
type: Array,
required: true,
validator: d => d instanceof Array
},
serializer: {
type: Function,
default: (d) => d,
validator: d => d instanceof Function
},
backgroundVariant: String,
textVariant: String,
inputClass: {
type: String,
default: ''
},
maxMatches: {
type: Number,
default: 10
},
minMatchingChars: {
type: Number,
default: 2
},
disableSort: {
type: Boolean,
default: false
},
showOnFocus: {
type: Boolean,
default: false
},
showAllResults: {
type: Boolean,
default: false
},
autoClose: {
type: Boolean,
default: true
},
placeholder: String,
prepend: String,
append: String,
highlightClass: String
转载请注明来源:Bootstrap4和Vue.js自动完成/预输入组件(vue-typeahead-bootstrap)
本文永久链接地址:https://www.moyouyouw.cn/code/1075.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论