使用Vue框架,发现输入框<input>或者<el-input>的内容无法修改,也无法输入。

使用Vue框架,发现输入框<input>或者<el-input>的内容无法修改,也无法输入。

解决方案

首先,检查绑定方式,应该使用v-model,有时候会误用:value,导致无法修改。

其次,如果是绑定数组元素等复杂对象,可以在输入框添加@input="onInput()",然后在methods中添加方法:

    onInput() {this.$forceUpdate();},

forceUpdate用来强制渲染,避免data中对象层次太深,Vue框架不自动渲染的情况。

Vue 3 中结合 TypeScript 使用 Element UI 的 `<el-input>` 组件,并想要隐藏输入框中的电话号码中间四位,你可以创建一个自定义的输入组件并利用 `v-model` 和模板字符串来实现。首先,确保你已经在项目中安装了 Element Plus(Element UI 的 TypeScript 版本)。然后,按照以下步骤操作: 1. 创建一个名为 `InputWithMask.vue` 的文件,内容如下: ```html <template> <el-input v-model="phoneNumber" :placeholder="placeholder" :disabled="disabled"> <span>{{ getMaskedPhoneNumber }}</span> </el-input> </template> <script lang="ts"> import { Component, Prop } from 'vue'; @Component({ name: 'InputWithMask', components: {}, props: { phoneNumber: { type: String, required: true, }, placeholder: { type: String, default: '请输入电话号码', }, disabled: { type: Boolean, default: false, }, }, computed: { getMaskedPhoneNumber() { const mask = '* ** *** ***'; // 用于替换中间四位的星号 return this.phoneNumber.replace(/\d/g, (digit) => mask[digit.charCodeAt(0) - '0'.charCodeAt(0)]); }, }, }) export default class InputWithMask extends Vue {} </script> ``` 2. 在需要使用这个组件的地方,像这样引用它: ```html <template> <div> <InputWithMask :phoneNumber="phoneNumber" :placeholder="phonePlaceholder" :disabled="isDisabled"></InputWithMask> </div> </template> <script setup> import InputWithMask from './components/InputWithMask.vue'; const phoneNumber = "1234567890"; const phonePlaceholder = "请输入电话号码"; let isDisabled = false; // 根据需要调整是否禁用输入 const inputComponent = ref(new InputWithMask({ phoneNumber, placeholder: phonePlaceholder, disabled: isDisabled })); </script> ``` 在这个例子中,`getMaskedPhoneNumber` 计算属性会动态地将电话号码的每一位替换成星号,实现了隐藏中间四位的效果。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值