Vue自定义可编辑文本组件空值时隐藏无法点击输入问题咨询

你的组件空值时无法点击、占位符不生效有3个核心问题：

• 非编辑态下，valueAfterEdit为空时渲染的div没有内容，高度塌陷为0，自然无法触发点击事件，看起来像被隐藏
• 你传入的placeholder属性没有在v-input-text-editable组件里声明接收，也没有用到
• 提交修改的commitChanges方法逻辑写反，会导致空值无法正常提交

1. 修改可编辑组件的props声明，新增placeholder接收 #

修改v-input-text-editable的props部分：

props: {
    value: {
        type: String,
        default: '' // 建议把默认值从null改成空字符串，避免空值判断异常
    },
    allowEmpty: {
        type: Boolean,
        default: false
    },
    // 新增placeholder属性
    placeholder: {
        type: String,
        default: '请输入内容'
    }
},

2. 修复非编辑态的空值渲染逻辑 #

修改组件template里非编辑态的div，空值时显示占位符，同时加最小高度避免塌陷：

<div v-if="!editable" class="cursor-pointer min-h-[24px] text-gray-500" @click="enableEditMode()">
    {{ valueAfterEdit || placeholder }}
</div>

如果你的项目不支持tailwind的min-h语法，也可以手动加行内样式：style="min-height: 24px;"

3. 给编辑态的input绑定placeholder #

修改input标签，加上placeholder属性：

<input 
    @keyup.enter="commitChanges()" 
    class="form-input block w-full rounded-none rounded-l-md transition ease-in-out duration-150 sm:text-sm sm:leading-5" 
    v-model="valueAfterEdit" 
    ref="input"
    :placeholder="placeholder"
/>

4. 修复commitChanges的逻辑错误 #

你原来的逻辑完全写反了，修改为：

commitChanges() {
    // 不允许空的情况，要先判断值不为空再提交
    if (!this.allowEmpty && !this.valueAfterEdit?.trim()) {
        // 可以加个操作提示，也可以直接回退原值
        this.discardChanges()
        return
    }
    this.$emit('input', this.valueAfterEdit);
    this.disableEditMode();
}

5. 父组件调用调整（可选） #

如果允许这个字段为空，调用的时候加上allow-empty属性：

<v-input-text-editable
    v-model="task.description"
    @input="updateTask()"
    placeholder="请输入描述"
    :allow-empty="true"
/>

另外建议父组件里description的默认值也从null改成空字符串，避免类型不一致：

description: {
    type: String,
    default: ''
}

内容的提问来源于stack exchange，提问作者luigichi