解决 input disabled禁用后 点击事件无效

使用uniapp做小程序端和H5端时,有个功能是点击input弹出数字键盘

要给input设置disabled 不然 focus时会弹出系统自带的软键盘

使用 uni.hidekeyboard() 时 会出现闪现的的情况。

所以我选择的是给 disabled属性。结果发现有disabled属性 @click事件在h5上无效。

查阅相关资料后得知

在HTML中,当一个<input>元素的disabled属性设置为true时,该元素将不再可用,并且无法接收用户输入或触发事件,包括点击事件。这是为了防止用户与某些表单控件进行交互。


// 解决方式1:
// input 绑定class并 添加 css属性 pointer-events: none;

// 方式2: disabled 换成 readonly

### Vue3 中 `el-form` 被禁用时,嵌套的 `el-descriptions-item` 下表单元素单独不禁用问题的解决方案 在 Vue3 的 Element Plus 组件库中,当父级 `<el-form>` 设置了 `disabled=true` 时,默认情况下其内部所有的子组件都会继承这一状态而被禁用。对于嵌套结构中的 `<el-descriptions-item>`,如果尝试在其下设置个别表单元素为不禁用,则可能会遇到无效的情况。 以下是解决该问题的具体方法: --- #### 方法一:通过自定义渲染方式绕过默认禁用机制 Element Plus 的 `<el-descriptions-item>` 并不是一个标准的输入型组件,而是用于展示描述列表的内容容器。因此,在这种场景下,可以直接将需要交互的表单元素移出 `<el-descriptions-item>` 的默认范围,并通过插槽或其他方式进行定制化渲染。 以下是一个完整的示例代码片段: ```vue <template> <el-form :model="form" :rules="rules" ref="ruleFormRef" :disabled="true"> <!-- 父表单整体禁用 --> <el-descriptions title="用户信息" :column="2"> <el-descriptions-item label="用户名"> <el-input v-model="form.username" :disabled="false"></el-input> <!-- 显式设置不受父级影响 --> </el-descriptions-item> <el-descriptions-item label="性别"> <el-radio-group v-model="form.gender" :disabled="false"> <!-- 显式设置不受父级影响 --> <el-radio :label="1">男</el-radio> <el-radio :label="2">女</el-radio> </el-radio-group> </el-descriptions-item> <el-descriptions-item label="备注"> <el-input v-model="form.remark" type="textarea" :rows="2" :disabled="false"></el-input> <!-- 同样显式设置不受父级影响 --> </el-descriptions-item> </el-descriptions> </el-form> </template> <script> import { reactive, ref } from "vue"; export default { setup() { const ruleFormRef = ref(null); const form = reactive({ username: "", gender: null, remark: "", }); const rules = { username: [{ required: true, message: "请输入用户名", trigger: "blur" }], gender: [{ required: true, message: "请选择性别", trigger: "change" }], remark: [{ max: 50, message: "备注长度不得超过50字", trigger: "blur" }], }; return { form, rules, ruleFormRef, }; }, }; </script> ``` 在这个例子中,虽然 `<el-form>` 整体设置了 `:disabled="true"`,但在 `<el-descriptions-item>` 内部的各个表单元素都通过显式的 `:disabled="false"` 实现了解除禁用的效果[^1]。 --- #### 方法二:利用 Scoped Slots 自定义内容 如果希望进一步增强灵活性,可以借助 `<el-descriptions-item>` 提供的 `scoped-slot` 功能来自定义显示内容。这种方式允许完全掌控每一项内的 HTML 结构,从而避免受到父级禁用属性的影响。 示例如下: ```vue <template> <el-form :model="form" :rules="rules" ref="ruleFormRef" :disabled="true"> <el-descriptions title="用户信息" :column="2"> <el-descriptions-item label="用户名"> <template #default> <el-input v-model="form.username" :disabled="false"></el-input> <!-- 不受父级禁用影响 --> </template> </el-descriptions-item> <el-descriptions-item label="性别"> <template #default> <el-radio-group v-model="form.gender" :disabled="false"> <!-- 不受父级禁用影响 --> <el-radio :label="1">男</el-radio> <el-radio :label="2">女</el-radio> </el-radio-group> </template> </el-descriptions-item> <el-descriptions-item label="备注"> <template #default> <el-input v-model="form.remark" type="textarea" :rows="2" :disabled="false"></el-input> <!-- 不受父级禁用影响 --> </template> </el-descriptions-item> </el-descriptions> </el-form> </template> ``` 通过使用 `#default` 插槽,我们可以确保 `<el-descriptions-item>` 内部的任何内容都不会自动继承父级的禁用状态,从而达到精确控制的目的[^2]。 --- #### 注意事项 1. **优先级问题** 子组件的 `disabled` 属性具有更高的优先级,即使父级 `<el-form>` 已经设置了禁用状态,只要子组件明确指定了 `:disabled="false"`,它仍然会保持可用状态[^3]。 2. **样式冲突** 如果发现视觉效果不符合预期,可能是因为 CSS 样式层面上存在干扰。此时应检查是否有额外的类名或样式规则强制应用了禁用样式。 3. **校验规则的影响** 当某个子组件被单独启用时,仍需确保它的校验规则正常工作。可通过手动触发 `validateField` 方法测试单一字段的有效性[^3]。 4. **兼容性验证** 在实际项目中,建议对不同浏览器环境下的表现进行充分测试,以确认禁用逻辑的一致性和稳定性。 --- ### 总结 通过为需要解除禁用的子组件显式指定 `:disabled="false"`,或者利用 `Scoped Slots` 定制化渲染内容,即可实现在父级 `<el-form>` 被禁用的情况下保留部分嵌套表单元素的功能性。这两种方法均能有效解决问题,开发者可根据具体需求选择合适的实现方式。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值