Task 1:封装组件

功能:

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

实现思路:

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

你可能感兴趣的:(Task 1:封装组件)