vue+element-ui实现文本点编辑时变成输入框

2019-08-01 本文已影响0人伴歌知行

使用edit为true或false来控制显示文本和input

data() {
  return {
      edit: false,
      description: "你好！"
  }
}

使用绑定class来切换icon

          <span v-show="!edit">({{ description }})</span>
          <el-input v-show="edit" v-model="description"></el-input>
          <i
            :class="{'el-icon-edit': !edit, 'el-icon-check': edit}"
            @click="edit = !edit"
          ></i>

效果如下图