Vue组件-AutoInput(自动完成输入)

2019-06-26

AutoInput

这次做了一个轻量级的小项目, 目的是辅助地址输入的, 不太像引入庞大 Element-UI组件, 所以只能自己查一下资料, 自己去写一个组件咯, 自然,自己定义的组件当然还要按照自己需求进行一下定义, 不能照抄嘛.

也不需要复用多少, 就直接在 src/components/auto-input/ 下面创建index.vue组件了

创建组件

一个输入框, 再一个提示框

<tetemplate>
  <div class="auto-container">
    <input type="text" ref="input">
    <div class="flex-auto" v-if="activated"></div>
  </div>
</tetemplate>

先来实现一下功能, 瞅瞅Vue官方的文档, 组件里面的input需要跟视图双向绑定, 需要绑定一些东东. 我们还需要将focus, blur这些常用的方法挂载到组件之上

<input type="text" ref="input"
  v-bind="[$props, $attrs]"
  v-bind:value="value"
  v-on:input="$emit('input', $event.target.value)">
...
<script>
...
methods:{
  // 将input上的 focus,blur,input直接挂载到组件上
  // 在使用组件的时候就可以直接$refs.comp.focus()直接调用到input上
  getInput(){
    return this.$refs.input
  },
  focus(){
    this.getInput().focus();
  },
  blur() {
    this.getInput().blur();
  },
  input() {
    this.getInput().input();
  }
}
...
</script>

现在再来处理一下 onfocus 这些监听方法

...
<input type="text" ref="input"
  v-bind="[$props, $attrs]"
  v-bind:value="value"
  v-on:input="$emit('input', $event.target.value)"
  @input="handleChange"
  @focus="handleFocus"
  @blur="handleBlur">
...
<script>
...
methods:{
  // 将input上的 focus,blur,input 监听事件直接发送到父级处理
  handleBlur(event) {
    this.$emit('blur', event)
  },
  handleFocus(event){
    this.$emit('focus', event)
  },
  handleChange(event) {
    this.$emit('input', event)
  },
}
...
</script>

到了这一步, 我们就可以开始进行数据的处理了, 让我们先来理一下思路, 首先是input输入框获得焦点(handleFocus), 进行输入(handleChange), 然后根据数据从Internet上获取数据, 列表渲染, 选择数据(handleSelect), 然后输入完成(handleBlur)

...
<ul>
  <li v-for="(item, index) in listData" :key="index" @click="handleSelect(item)">
    {{item}}
  </li>
</ul>
...
<script>
data () {
  return {
    listData: []
  },
  methods: {
    ...
    // 输入数据改变了
    handleChange(e) {
      let val = {...e.srcElement.value}
      // 先前的列表清空
      if(!val){
        this.listData = []
        return false
      }
      // 再这里我们调用父级定义的querySearch方法, 让父级给出输入
      this.querySearch((arr)=>{
        this.listData = arr
      })
      this.listData = []
    },
    // 选中某元素, 将数据发送到父级, 然后输入框失去焦点
    handleSelect(item){
      this.$emit('select', item);
      this.handleBlur()
    }
  },
  props: {
    querySearch: Function
  },
},
</script>

到了这一步也大致是完成了整个组件功能编写, 只需要再应用组件的地方注册好组件, 定义好方法就可以直接使用了

// 全局注册
import autoInput from '@/components/auto-input/'
...
Vue.component('auto-input', autoInput)
// 局部注册
components: {
  'auto-input': autoInput,
}
...
// 直接使用
<tetemplate>
  <auto-input v-model="address" @focus="handleFocus"
    :querySearch="querySearch" placeholder="请填写门店详细地址"
    ref="address"  @select="handleSelect">
  </auto-input>
</tetemplate>
...
methods: {
  querySearch(cb) {
    let value = this.address
    // 从后台获取数据
    axios.get("/inputtips?keywords="+value).then(res => {
      let data = res.data
      if (data.length > 0) callback(data);
      else callback(['No Data!']]);
    })
  },
  handleSelect(item){
    alert('你选择了:'+item)
  }
}
...

基本也就这个样子了, 当然css我就不一步一步解释了, 我下面直接贴出来; 还有加动画啊, slot插槽等等

<template>
  <div class="auto-container">
    <input type="text" ref="input"
      v-bind="[$props, $attrs]"
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
      @input="handleChange"
      @focus="handleFocus"
      @blur="handleBlur"
      @keydown.native.tab="handleBlur">
    <transition name="fade">
    <div class="flex-auto" v-if="activated" :style="'top:'+coor.top+'px;width:'+coor.width+'px'">
      <ul v-if="listData.length > 0">
        <li v-for="(item, index) in listData" :key="index" @click="handleSelect(item)">
          <slot :item="item"></slot>
        </li>
      </ul>
      <mt-spinner v-else type="snake"></mt-spinner>
    </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'AutoInput',
  data () {
    return {
      listData: [],
      coor: {},
      activated: false
    }
  },
  methods: {
    focus() {
      this.getInput().focus();
    },
    blur() {
      this.getInput().blur();
    },
    getInput(){
      return this.$refs.input
    },
    handleBlur(event) {
      this.activated = false
      setTimeout(()=>{
        this.$emit('blur', event)
      },500)
    },
    handleFocus(event){
      this.init()
      this.activated = true
      this.$emit('focus', event)
    },
    handleClear() {
      this.activated = false;
      this.$emit('clear');
    },
    handleChange(event) {
      this.$emit('input', event)
      let val = {...e.srcElement.value}
      if(!val){
        this.listData = []
        return false
      }
      this.listData = []
    },
    handleSelect(item){
      this.$emit('select', item);
      this.handleBlur()
    },
    init(){
      let t = this.$refs['input'], top = 0
      let {offsetHeight,offsetWidth} = t
      while(t != document){
        top += t.offsetTop + t.clientTop
        t = t.parentNode;
      }
      this.coor = {width:offsetWidth,top:(top/3+24)}
    }
  },
  props: {
    querySearch: Function
  },
  mounted(){
    this.querySearch((arr)=>{
      this.listData = arr
    })
  }
}
</script>

<style scoped lang='scss'>
#app{
  position: relative;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.auto-container{
  flex: 1;
  input{
    width: 100%;
  }
  .flex-auto{
    position: absolute;
    z-index: 99;
    left:2.5rem;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border: 1px solid #e4e7ed;
    overflow: hidden;
    min-height: 2rem;
    border-radius: .06rem;
    display: flex;
    align-items: center;
    justify-content: center;
    ul{
      padding: .24rem 0;
      overflow: scroll;
      height: 100%;
      li{
        padding-left: .16rem
      }
    }
  }
}
</style>