首頁 > web前端 > js教程 > 主體

vue 簡單自動補全的輸入框的範例

亚连
發布: 2018-05-30 17:43:19
原創
3043 人瀏覽過

這篇文章主要介紹了vue 簡單自動補全的輸入框的範例,現在分享給大家,也給大家做個參考。

實作一個輸入框,輸入資訊後顯示由後台傳回的數據,供使用者選擇,之前用的elm的元件,不過那個有點大。 。 。簡單的情況下自己實作一個也能滿足要求。 。 。應該吧。 。 。

主題包含一個input用來輸入,一個p用來展示數據,p裡面是資料項目item

當在input按下回車時,會根據資訊去後台獲取數據,如果用戶點擊了別的地方,input失去焦點,則提示的p也應該收起來

bug:

在blur事件中,如果直接將isShow設定為false會出問題,先失去焦點,顯示面板消失,所以你的點擊不會被監聽到。 。 。設定計時器,點擊後10ms後將面板收起來,問題解決。 。 。

顯示p將內容撐開,改變其他元件佈局,設定p的屬性,即可,高度設為0,z-index很大,就不會改變其他元件位置

height: 0;
z-index: 999;
登入後複製
<template>
 <p class="container">
  <input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/>
  <p class="select-panel">
   <p v-show="isShow" v-for="w in words" class="select-item" @click="click_item(w)">{{w[&#39;content&#39;]}}</p>
  </p>
 </p>
</template>
登入後複製

簡單實作程式碼

<template>
 <p class="container">
  <input v-model="msg" @keyup.enter="search" class="msg" @blur="blur"/>
  <p class="select-panel">
   <p v-show="isShow" v-for="w in words" class="select-item" @click="click_item(w)">{{w[&#39;content&#39;]}}</p>
  </p>
 </p>
</template>

<script>
 import {search_word} from "../api/word-api";

 export default {
  name: "auto-complete",
  data() {
   return {
    msg: &#39;&#39;,
    words: [],
    isShow: false
   }
  },
  computed: {},

  methods: {
   blur() {
    setTimeout(() => {
      this.isShow = false
     },
     200)
   },
   async search() {
    console.log(&#39;search msg&#39;, this.msg)
    this.words = await search_word(this.msg)
    console.log(this.words)
    this.isShow = true
   },
   click_item(w) {
    console.log(&#39;click word&#39;, w)
    this.$emit(&#39;add_word&#39;, w)
   }
  },

 }
</script>

登入後複製

上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

jQuery實作的上傳圖片本地預覽效果簡單範例

詳解Javascript中new()到底做了些什麼

Koa2 之檔案上傳下載的範例程式碼

#

以上是vue 簡單自動補全的輸入框的範例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板