Element Plus组件库中的input组件如何点击查看按钮时不可编辑，点击编辑时可编辑使用setup

冰海恋雨.2023-10-08 22:35

如果你正在使用 Vue 3 和 Composition API，你可以使用 setup 函数来实现 Element Plus 的 Input 组件在点击查看按钮时不可编辑，点击编辑按钮时可编辑的功能。

以下是一个使用 setup 的示例代码：

复制代码

<template>
  <div>
    <el-input v-model="inputValue" :disabled="isDisabled"></el-input>
    <el-button @click="toggleEdit">{{ isDisabled ? '编辑' : '查看' }}</el-button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputValue = ref('');
    const isDisabled = ref(true);

    function toggleEdit() {
      isDisabled.value = !isDisabled.value;
    }

    return {
      inputValue,
      isDisabled,
      toggleEdit
    };
  }
};
</script>

在上述示例中，我们使用了 ref 函数来创建 inputValue 和 isDisabled 变量，并在 setup 函数中返回它们。通过在模板中绑定 v-model 指令和 :disabled 属性，我们可以动态地控制输入框是否可编辑。

在按钮的点击事件处理函数 toggleEdit 中，我们只需要修改 isDisabled 变量的值，输入框的可编辑