网站转wordpress,开发平台免费版,国家高新技术企业含金量,网站建设的技术难点紧接着 input 组件的源码#xff0c;分享带输入建议的 autocomplete 组件#xff0c;在 element-ui 官方文档上#xff0c;没有这个组件的 api 目录#xff0c;它的 api 是和 input 组件的 api 在一起的#xff0c;看完源码之后发现#xff0c;源码当中 autocomplete 组件…紧接着 input 组件的源码分享带输入建议的 autocomplete 组件在 element-ui 官方文档上没有这个组件的 api 目录它的 api 是和 input 组件的 api 在一起的看完源码之后发现源码当中 autocomplete 组件是一个单独的组件进而在此做单独的简单分享。主要从以下五个方面来分享。
1、autocomplete 组件的页面结构。
2、autocomplete 组件的属性。
3、autocomplete 组件的 slot。
4、autocomplete 组件的事件。
5、autocomplete 组件的方法。
一、autocomplete 组件的页面结构 二、autocomplete 组件的属性
2.1 placeholder 属性输入框占位文本类型 string无默认值。 2.2 disabled 属性禁用类型 boolean默认 false。 2.3 value-key 属性输入建议对象中用于显示的键名类型 string默认 value。 2.4 value 属性必填值输入绑定值类型 string无默认值。 2.5 debounce 属性获取输入建议的去抖延时类型 number默认 300。 2.6 placement 属性菜单弹出的位置类型 stringtop / top-start / top-end / bottom / bottom-start / bottom-end默认 bottom-start。 2.7 fetch-suggestions 属性返回输入建议的方法仅当你的输入建议数据 resolve 时通过调用 callback(data:[]) 来返回它类型 Function(queryString, callback)无默认值。 fetchSuggestions 函数的小结
1、子组件通过 props 接收父组件传递过来的 fetchSuggestions 函数。
2、子组件内部调用父组件传递过来的 fetchSuggestions 方法并给这个方法传递两个参数一个是当前查询的字符串一个是回调函数。
3、父组件中的 querySearch 方法被调用处理查询字符串并用过回调函数返回结构给子组件。
4、子组件在回调函数中接收福咱们返回的数据并据此更新状态或执行其他操作。
这种传值方式使得父组件和子组件之间以一种相对解耦的方式进行通信父组件提供数据检索逻辑子组件负责触发检索并处理检索结果。
2.8 popper-class 属性Autocomplete 下拉列表的类名类型 string无默认值。 2.9 trigger-on-focus 属性是否在输入框 focus 时显示建议列表类型 boolean,默认 true。 2.10 name 属性原生属性类型 string无默认值。 2.11 select-when-unmatched 属性在输入没有任何匹配建议的情况下按下回车是否触发 select 事件类型 boolean默认 false。 2.12 label 属性输入框关联的label文字类型 string无默认值。 2.13 prefix-icon 属性输入框头部图标类型 string无默认值。 2.14 suffix-icon 属性输入框尾部图标类型 string无默认值。 2.15 hide-loading 属性是否隐藏远程加载时的加载图标类型 boolean默认 false。 2.16 popper-append-to-body 属性是否将下拉列表插入至 body 元素。在下拉列表的定位出现问题时可将该属性设置为 false类型 boolean默认 true。 2.17 highlight-first-item 属性是否默认突出显示远程搜索建议中的第一项类型 boolean默认 false。 三、autocomplete 组件的 slot
3.1 prefix输入框头部内容。 3.2 suffix输入框尾部内容。 3.3 prepend输入框前置内容。 3.4 append输入框后置内容。 四、autocomplete 组件的事件
4.1 select点击选中建议项时触发选中建议项。 4.2 changeinput值改变时触发(value: string | number)。 五、autocomplete 组件的方法
5.1 focus使 input 获取焦点。
