自定义autocomplete组件

使用场景，当输入框输入内容，下拉框自动筛选

注意点

组件是为了一次封装，多次使用

所需数据 —— 来自属性

1. data，存放着下拉框数据，然后根据输入框内容进行筛选
2. inputObj, 存放着下拉框本身所需要的文本，placeholder 信息
3. defaultSelection, 存放着默认信息

组件本身的数据

1. current 存放选中项索引
2. selection 存放选中项内容
3. suggestion 存放所有的匹配项
4. open 控制下拉框是否显示的条件之一

input 元素的事件

有的事件，记得阻止默认操作

1. input
2. keydown.up
3. keydown.down
4. keydown.enter

每个li的事件

1. click

父组件获取input的输入值

1. 通过属性向autocomplete组件传入各种数据
2. 在input，enter，click等事件中，改变input的值，记得发送

this.$emit("selection",this.selection)

下拉框展示

1. 展开的条件

• 输入框有值
• 匹配项长度大于0
• open 为 ture

2. 父组件通过上边的判断，决定是否要添加一个类样式名open
3. dropdown-menu默认是display:none,.open .dropdown-menu改为display:block

技巧

1. data一般是对象数组，存的数据千变万化。比如，选择“昵称”时，数据存放在对象的nickname中，选择“地区”时，数据存放在对象location中。
2. 在inputObj中添加type属性，控制使用data中每一项的哪个属性

// data 可能的情况
data: [{nickname:'yy',age:19},{nickname:'ff',age:7}]
data: [{location:'hn'},{locaiton:bj}]

{{item.nickname}}
{{item.location}}

3. 但是通过上述方法，在计算属性中，将数据处理一下

matches: function () {
  let temp= []
  for (let item of this.data) {
   temp.push(item[this.inputObj.type])
 }
return temp
}

css回顾

关于文本

p {
  text-overflow: ellipsis;
  white-space: nowrap;
}

1. text-overflowc3属性，有

• clip
• ellipsis
• str

2. white-spacec1

• nowrap,文本不换行，一行显示
• normal
• wrap
• pre,空格和换行都保留
• pre-line
• pre-wrap

关于placeholder

/*兼容ie9以上等现代浏览器*/
::-webkit-input-placeholder {color:#1a2c3b;}   /* WebKit browsers */
::-moz-placeholder {color: #1a2b3c;}   /* Mozilla Firefox 4 to 18 */
:-moz-placeholder {color: #1a2b3c;}   /* Mozilla Firefox 19+ */
:-ms-input-placeholder {color:#1a2b3c;}  /* Internet Explorer 10+ */

1. 还可以通过js实现

• focus,blur事件
• 在提交表单内容时，记得判断。如果input内容和placeholder一样，那么将该input内容清空

总结

这也是个含有input表单控件的组件，但是组件上没有使用v-model

1. 通过属性传递input的默认值
2. 赋值给data,在input上使用v-model
3. 在input值改变的时候，就要使用$emit通知父组件