如果你正在使用 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
变量的值,输入框的可编辑