【el-input输入框】之“readonly“与“disabled“的区别

el-input 输入框组件在 Element UI 中是一个常用的组件，它提供了 readonly 和 disabled 两个属性，这两个属性的主要区别在于它们的表现行为和交互方式。

1. readonly：当输入框设置为 readonly 时，用户可以查看输入框中的值，但不能编辑它。输入框通常用灰色显示，以表示它是只读的。readonly 状态下，表单提交时，该输入框的值会被发送。
2. disabled：当输入框设置为 disabled 时，用户不能进行任何操作，包括查看和编辑输入框中的值。输入框通常用灰色显示，并且在样式上有明显的禁用效果。disabled 状态下，表单提交时，该输入框的值不会被发送。

实例代码：

<template>
  <div>
    <!-- 只读输入框 -->
    <el-input v-model="value1" readonly placeholder="请输入内容"></el-input>
 
    <!-- 禁用输入框 -->
    <el-input v-model="value2" disabled placeholder="请输入内容"></el-input>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      value1: '只读内容',
      value2: '禁用内容'
    };
  }
};
</script>

在这个例子中，value1 绑定的输入框是只读的，用户可以查看它但不能更改它。value2 绑定的输入框是禁用的，用户不能查看或更改它。