Task 1:封装组件

功能:

将传入的数据,以标签形式展示。
当点击编辑区域,文本可编辑;当点击编辑区以外的区域,形成标签;
用户输入时,有autocomplete功能

实现思路:

设置一个flag变量(true/false)表示当前处于编辑状态,还是展示标签的状态;
用v-if和v-else,根据flag的值,渲染不同的效果(编辑或者标签);
编辑效果用el-autocomplete组件实现(包括现有输入值的覆盖和下拉框的生成)
展示标签用div+el-tag实现;
当blur事或focus事件发生时,切换flag的值(flag=!flag),达到切换状态的效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容