美文网首页
Task 1:封装组件

Task 1:封装组件

作者: kayleeWei | 来源:发表于2018-05-17 15:12 被阅读0次

    功能:

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

    实现思路:

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

    相关文章

      网友评论

          本文标题:Task 1:封装组件

          本文链接:https://www.haomeiwen.com/subject/ycvbdftx.html