美文网首页
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:封装组件

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

  • JStorm源码分析-6.Worker

    Worker由Supervisor根据分配的任务启动。主要负责启动由各个组件封装后的task。 1.程序分析 1....

  • 面向对象实战

    1、tab组件封装2、轮播组件封装3、曝光组件封装

  • 面向对象实战

    题目1: 封装一个轮播组件轮播组件题目2: 封装一个曝光加载组件曝光加载组件题目3: 封装一个 Tab 组件Tab 组件

  • 封装(面向对象)

    题目1: 封装一个轮播组件 轮播封装 题目2: 封装一个曝光加载组件 曝光加载 题目3: 封装一个 Tab 组件 ...

  • 面向对象实战

    题目1: 封装一个轮播组件封装轮播组件(效果)代码题目2: 封装一个曝光加载组件封装曝光加载(效果)代码题目3: ...

  • Web37.面向对象实战

    题目1:封装一个轮播组件 题目2:封装一个曝光加载组件 题目3:封装一个Tab组件 题目4:封装一个日历组件 题目...

  • 高级任务三

    题目1: 封装一个轮播组件 轮播 题目2: 封装一个曝光加载组件 曝光 题目3: 封装一个 Tab 组件 tab 组件

  • 基于el-select和el-tree封装的可搜索树形选择器-S

    1、组件封装SelectTree 2使用组件SelectTree

  • 高级3 面向对象实战

    1: 封装一个轮播组件 封装1预览地址封装2预览地址 2: 封装一个曝光加载组件 预览地址 3: 封装一个 Tab...

网友评论

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

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