使用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>
效果如下图
点击编辑icon切换输入框
使用edit为true或false来控制显示文本和input 使用绑定class来切换icon 效果如下图 点击编...
近日在做网站时需要实现每个input便签都可以用富文本进行编辑。当点击输入框时就需要“唤起”富文本编辑器。 ...
属性 contentEditable 比如富文本的输入框就可以用可编辑的div（自定义一个富文本时可用） 或者另一...
文本输入框、密码输入框当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。语...
Pre : 通知 textFieldDidEndEditing, 通知名称，当 文本输入框 结束编辑， 才会调用 ...
文章概述 上一次我们讨论过聊天输入框的实现，实现文本，语音，标签的编辑发送，而本次我们的关注点将回归到整个聊天界面...
语法: 1、type：当type="text"时，输入框为文本输入框;当type="password"时,输入框为...
需求 Flutter 实现一个文本输入框，能够计算word的数量，当超过最大数量时，文本框不再输入。 分析 Flu...
需求描述：在固定宽度的输入框中输入文本，要求输入的文本全部显示出来。【注意：输入框宽度不变】 实现方案：因为谷歌浏...
html 超文本标记语言 文本输入框 input 输入框tepe 类型text 文本 Notep...
本文标题：vue+element-ui实现文本点编辑时变成输入框
本文链接：https://www.haomeiwen.com/subject/mzscdctx.html
网友评论