element源码解析（2）--autocomplete autocomplete源码解析
autocomplete中包含三个组件,input和suggestion/el-scrollbar
cpu怎么安装
⼀个class:
el-autocomplete：相对定位和⾏内块;
⼀个⾃定义指令:v-clickoutside：点击此dom元素外触发事件
el-input
四个emit触发事件:input,focus,blur,clear调节显⽰隐藏⾼亮清除
四个键盘事件up,down,enter,tab
四个插槽:prepend,append,prefix,suffix
v-bind="[$props, $attrs]",v-bind可⽤数组/对象，说明接收所有跟input相关的属性
el-autocomplete-suggestions
visible-arrow：没见到这个属性发挥作⽤
物资采购合同模板
四个属性:
:popper-options=“popperOptions”
默认⽆
:append-to-body=“popperAppendToBody”
默认插⼊到body
popperAppendToBody: {
type: Boolean,
default: true
},
:placement=“placement”:
步履蹒跚的拼音默认正下⽅
placement: {
type: String,
default: 'bottom-start'
},
:id=“id”
⽣成id随机数
export const generateId=function(){
return Math.floor(Math.random()*10000)
}
popperClass:
属于⾃定义autocomplete-suggestions的class 2.script
引⼊防抖函数，外部点击指令,如何清炖排骨
混⼊⼴播派发事件，获取焦点⽅法Focus(‘input’) Migrating ⽣产中没有⽤处，开发中可以给提⽰警告
import debounce from'throttle-debounce/debounce'; import Clickoutside from'element-ui/src/utils/clickoutside'; import Emitter from'element-ui/src/mixins/emitter'; import Migrating from'element-ui/src/mixins/migrating'; import{ generateId }from'element-ui/src/utils/util'; import Focus from'element-ui/src/mixins/focus';
2.1props
24个属性
1. valueKey: 默认为value，取list中的key，输⼊建议对象中⽤于显⽰的键名
2. popperClass:Autocomplete 下拉列表的类名
3. popperOptions：暂时没⽤上，应该与vue-popper选项有关
4. placeholoder: 输⼊框占位⽂本
5. clearable：是否清除，默认不显⽰
6. disabled：是否禁⽤，默认不禁⽤
7. name：原⽣属性,input的name，在v-bind中实现
8. size：没见着怎么⽤
9. value：给默认值
10. maxlength：最⼤数量
11. minlength：最⼩数量
12. autofocus：是否⾃动获取焦点
13. fetchSuggestions：可以没有queryString，必须回调，回调必须带参数，参数就是suggestions的结果,⽤意⾃然是可以去根据
queryString去做过滤，但其实直接传过滤后的数据不⾹吗，绕得不太好.
14. triggerOnFocus：是否在输⼊框focus的时候给出建议列表，默认为true，获取焦点的时候去判断
15. customItem：没发现⽤到
16. lectWhenUnmatched：默认为fal,enter的时候触发，不匹配，清空
17. prefixIcon:el-input的属性
18. suffixIcon:el-input的属性
19. label:el-input属性
20. debounce：防抖时间
21. placement：建议列表位置
22. hideLoading：是否隐藏loading
23. popperAppendToBody：弹框是否依附于body，默认依附，否则插⼊
24. highlightFirstItem：是否默认突出显⽰远程搜索建议中的第⼀项
handleFocus(event){
this.activated =true;
this.$emit('focus', event);
iggerOnFocus){
this.debouncedGetData(this.value);
}
灵魂摆渡杨紫},
default:'value'
},
popperClass: String,
popperOptions: Object,
placeholder: String,
clearable:{
type: Boolean,
default:fal
},
disabled: Boolean,
name: String,
size: String,
value: String,
maxlength: Number,
minlength: Number,
autofocus: Boolean,
fetchSuggestions: Function,
triggerOnFocus:{
type: Boolean,
default:true
},
customItem: String,
lectWhenUnmatched:{
type: Boolean,
default:fal
},
prefixIcon: String,
suffixIcon: String,
label: String,
debounce:{
type: Number,
default:300
},
placement:{
type: String,
default:'bottom-start'
},
hideLoading: Boolean,
popperAppendToBody:{
type: Boolean,
default:true
},
highlightFirstItem:{
type: Boolean,
default:fal
}
},
2.2.data
五个⾃定义变量
actived表⽰获取焦点时为true，激活搜索建议suggestions建议列表的数据
loading默认没有加载
highlightedIndex：表⽰⾼亮的选项suggestionDisabled：表⽰禁⽤
suggestions:[],
loading:fal,
highlightedIndex:-1,
suggestionDisabled:fal
};
},
puted
计算属性:
如果数据发⽣变化，则根据当前判断是否激活状态，根据是否有数据来显⽰隐藏:
suggestionVisible(){
const suggestions =this.suggestions;
let isValidData = Array.isArray(suggestions)&& suggestions.length >0;
return(isValidData ||this.loading)&&this.activated;
},
id(){
return`el-autocomplete-${generateId()}`;
}
2.4.watch
监听，如果可见性发⽣变化，直接给⼦组件派发事件，告诉⼦组件值和宽度
watch:{
suggestionVisible(val){
let $input =Input();
if($input){
this.broadcast('ElAutocompleteSuggestions','visible',[val, $input.offtWidth]);
}
}
},
unted
this.debouncedGetData =debounce(this.Data);
this.$on('item-click', item =>{
this.lect(item);
});
let $input =Input();
$input.tAttribute('role','textbox');
$input.tAttribute('aria-autocomplete','list');
吉良吉影台词
$input.tAttribute('aria-controls','id');
$input.tAttribute('aria-activedescendant',`${this.id}-item-${this.highlightedIndex}`);
hods
2.6.1:getMigratingConfig开发中的警告
警告
getMigratingConfig(){
return{
props:{
'custom-item':'custom-item is removed, u scoped slot instead.',
'props':'props is removed, u value-key instead.'
}
};
教学论},
