element-plus中通过按钮来控制el-input输入框的禁用可用状态

element-plus中通过按钮来控制el-input输入框的禁用可用状态

在 Vue.js 中，您可以使用 el-input 组件的 disabled 属性来设置输入框的可编辑状态。这个属性接受一个布尔值，当设置为 true 时，输入框将不可编辑；当设置为 false 或省略时，输入框将是可编辑的。

一、父子通讯中切换

例如，想在组件的 props 中接收一个名为 disabled 的布尔值，并将其传递给 el-input 组件，您可以这样做：

<template>
  <el-input :disabled="disabled" placeholder="请输入内容"></el-input>
</template>
<script>
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  }
};
</script>

在这个例子中，disabled 是一个从父组件传递给子组件的 prop。子组件中的 el-input 组件将使用这个 prop 来设置其可编辑状态。如果父组件设置了 disabled 为 true，那么子组件中的输入框将不可编辑；如果父组件没有设置或设置了 false，那么输入框将是可编辑的。

二、同一个文件中切换

要在同一个组件中通过一个按钮来切换 el-input 的 disabled 状态，您可以使用 Vue.js 的 methods 来处理这个切换逻辑。以下是一个简单的例子，展示了如何实现这个功能：

<template>
  <div>
    <el-input :disabled="isDisabled" placeholder="请输入内容"></el-input>
    <el-button @click="toggleDisabled">切换禁用状态</el-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isDisabled: false
    };
  },
  methods: {
    toggleDisabled() {
      this.isDisabled = !this.isDisabled;
    }
  }
};
</script>

在这个例子中，我们定义了一个名为 isDisabled 的数据属性，用来控制 el-input 的 disabled 状态。我们还有一个名为 toggleDisabled 的方法，当按钮被点击时，它会切换 isDisabled 的值，从而改变 el-input 的 disabled 状态。
这样，当用户点击按钮时，el-input 的 disabled 状态会在 true 和 false 之间切换，从而允许或禁止用户输入内容。