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

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

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

相关文章
|
7月前
|
前端开发
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
解决elementUI弹出框关闭后再打开el-select下拉框无法选中的问题
186 0
|
2月前
element组件库笔记一:element 框架中table表格复选框选中后,切换下一页之前选中复选框和数据消失的问题
这篇文章介绍了在Element UI框架中,如何解决表格组件复选框在分页时选中状态丢失的问题。
153 0
|
4月前
|
JavaScript 前端开发
Vue实现Element UI框架的自定义输入框或下拉框在输入时对列表选项进行过滤,以及右键列表选项弹出菜单进行删除
本文介绍了如何在Vue框架结合Element UI库实现自定义输入框或下拉框,在输入时对列表选项进行过滤,并支持右键点击列表选项弹出菜单进行删除的功能。
115 0
|
5月前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
66 1
|
5月前
|
数据安全/隐私保护
Element UI 密码输入框--可切换显示隐藏,自定义图标
Element UI 密码输入框--可切换显示隐藏,自定义图标
234 0
|
5月前
Element UI 带快捷编辑的多行输入框(含光标位置的获取和指定)
Element UI 带快捷编辑的多行输入框(含光标位置的获取和指定)
36 0
|
5月前
|
JavaScript
vue element MessageBox.prompt this.$prompt组件禁止显示右上角关闭按钮,取消按钮,及点击遮罩层关闭
vue element MessageBox.prompt this.$prompt组件禁止显示右上角关闭按钮,取消按钮,及点击遮罩层关闭
107 0
|
7月前
|
前端开发 JavaScript 程序员
avue中怎样隐藏新增和编辑的按钮
avue中怎样隐藏新增和编辑的按钮
点击按钮,新增输入框,再点击按钮,删除输入框
点击按钮,新增输入框,再点击按钮,删除输入框
58 0