可编辑文本

示例

基础用法

使用v-model建立需要编辑的文本的双向数据绑定;使用disabled可以禁用文本编辑

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
100

100

100
验证输入

使用validate属性,指定输入验证规则,改值可以是函数/正则/正则字符串。验证失败,输入框会添加className: k-invalid,用以改变样式。我们还可以绑定error事件弹出更多错误提示。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

如果你不是通过v-model指令进行数据双向绑定,而是通过绑定change事件去修改的引用数据,则你需要在修改数据后,手动触发更新this.update(),这样才能传递新的children子元素给组件去渲染。

vue因为所有数据修改都会触发更新,所以无需手动触发更新

属性

属性 说明 类型 默认值
editing 是否为编辑状态 Boolean false
value 编辑的内容,使用v-model进行双向绑定 String undefined
required 是否规定不能为空 Boolean true
validate 验证规则,可以为函数/正则/正则字符串,若为字符串将转为正则表达式;函数则会传入当前编辑框的值来调用函数验证,返回true则验证通过,否则验证失败 Function | RegExp | String undefined
disabled 是否禁用编辑 Boolean false
tip 编辑按钮提示文案 String "编辑"
trim 是否去掉前后空白字符 Boolean true
invalid 是否为验证失败状态 Boolean false

事件

事件名 说明 参数
error 验证失败时触发 1. 当前组件实例
2. 当前输入的值
change 当值改变时触发,与$change:value不同的是,该事件只会在用户输入导致变更时触发 Editable, newValue, oldValue