Vue Instant
made with Vuejs

Vue Instant

这是一个具有搜索提示功能的自定义搜索组件。

相关问答
暂无相关问题
查看全部
简介及使用教程

Vue Instant是一个具有搜索提示功能的自定义搜索组件,可轻松为Vue应用程序创建带有自动建议的自定义搜索控件。

安装

Npm

npm i vue-instant

Yarn

yarn add vue-instant

浏览器

<link rel="stylesheet" href="vue-instant/dist/vue-instant.css"/>

<script src="vue.js"></script>
<script src="vue-clickaway.js"></script>
<script src="vue-instant/dist/vue-instant.browser.js"></script>

使用

引入组件

import Vue from 'vue'
import 'vue-instant/dist/vue-instant.css'
import VueInstant from 'vue-instant'
Vue.use(VueInstant)

使用

<div id="app">
<label>{{selectedEvent}}</label>
<vue-instant :suggestOnAllWords="true"
 :suggestion-attribute="suggestionAttribute" 
v-model="value" :disabled="false"  @input="changed" @click-input="clickInput" @click-button="clickButton" @selected="selected"  @enter="enter" @key-up="keyUp" @key-down="keyDown" @key-right="keyRight" @clear="clear"  @escape="escape" :show-autocomplete="true" :autofocus="false" :suggestions="suggestions" name="customName" placeholder="custom placeholder" type="google"></vue-instant>
</div>

js代码

console.log(VueInstant)

new Vue({
        el: '#app',
        data: {
            value: '',
            suggestionAttribute: 'original_title',
            suggestions: [],
            selectedEvent: ""
        },
        methods: {
            clickInput: function() {
                this.selectedEvent = 'click input'
            },
            clickButton: function() {
                this.selectedEvent = 'click button'
            },
            selected: function() {
                this.selectedEvent = 'selection changed'
            },
            enter: function() {
                this.selectedEvent = 'enter'
            },
            keyUp: function() {
                this.selectedEvent = 'keyup pressed'
            },
            keyDown: function() {
                this.selectedEvent = 'keyDown pressed'
            },
            keyRight: function() {
                this.selectedEvent = 'keyRight pressed'
            },
            clear: function() {
                this.selectedEvent = 'clear input'
            },
            escape: function() {
                this.selectedEvent = 'escape'
            },
            changed: function() {
                var that = this
                this.suggestions = []
                axios.get('https://api.themoviedb.org/3/search/movie?api_key=342d3061b70d2747a1e159ae9a7e9a36&query=' + this.value)
                    .then(function(response) {
                        response.data.results.forEach(function(a) {
                            that.suggestions.push(a)
                        })
                    })
            }
        },
        components: {
            'vue-instant': VueInstant.VueInstant
        }
    })

示例

作者

相关项目

这是一个漂亮的Vue聊天组件。
这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个基于Vue的图像墙组件。
这是一个灵活可扩展的内容容器组件。
这是ApexCharts的Vue.js组件。