中文h5编程工具_做国外订单的网站_免费下载app并安装_宁波网站推广排名

el-input-number作为数字显示和编辑框

效果展示

默认状态

编辑状态

1. 基本用法

<el-input-number v-model="item.params.timeout" :min="0" />

说明：

• v-model="item.params.timeout" 绑定数值变量，使其可以动态更新。
• :min="0" 限制最小值为 0，防止输入负数。

---

2. 不可编辑

<el-input-number v-model="item.params.timeout" :readonly="item.isReadonly" />

说明：

• :readonly="item.isReadonly" 让输入框变成 只读状态，不可修改。
• item.isReadonly 是一个 动态变量，可以在 el-button 中切换：

<el-button @click="item.isReadonly = !item.isReadonly">切换编辑</el-button>

动态控制输入框是否可编辑。

---

3. 隐藏默认的加减按钮

<el-input-number v-model="item.params.timeout" :controls="false" />

说明：

• :controls="false" 隐藏 默认的加减按钮，使输入框更简洁。

---

4. 自定义前缀

<el-input-number v-model="item.params.timeout"><template #prefix><span>连接超时时间：</span></template>
</el-input-number>

说明：

• #prefix 插槽用于 在输入框前面添加描述文本。
• 此时的文本和输入的value会显示在同一个框里。

---

5. 动态显示边框（鼠标悬浮时显示）

<el-input-number v-model="item.params.timeout" :class="{'hover-border': !item.isReadonly}" />

/* 默认隐藏边框 */
:deep(.el-input__wrapper) {border: none !important;box-shadow: none !important;background: transparent !important;
}/* 悬浮时显示边框 */
:deep(.hover-border:hover .el-input__wrapper) {border: 1px solid #ccc !important;border-radius: 4px;background: white !important;
}

说明：

• 默认隐藏输入框的边框，使其更简洁。
• 通过 :class="{'hover-border': !item.isReadonly}" 控制 只读模式时不显示悬浮边框。
• 非只读模式时，只有当鼠标悬浮时，才显示边框。

---

6. 统一设置 style 让输入框占满容器

<el-input-number v-model="item.params.timeout" style="width: 100%;" />

说明：

• style="width: 100%;" 让输入框占满 el-form-item 的宽度。
• 保证界面调整时，会自动拉长。

---