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 函数来创建 inputValueisDisabled 变量,并在 setup 函数中返回它们。通过在模板中绑定 v-model 指令和 :disabled 属性,我们可以动态地控制输入框是否可编辑。

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

相关推荐
布兰妮甜6 分钟前
CSS Houdini 与 React 19 调度器:打造极致流畅的网页体验
前端·css·react.js·houdini
小小愿望18 分钟前
ECharts 实战技巧:揭秘 X 轴末项标签 “莫名加粗” 之谜及破解之道
前端·echarts
小小愿望26 分钟前
移动端浏览器中设置 100vh 却出现滚动条?
前端·javascript·css
fail_to_code27 分钟前
请不要再只会回答宏任务和微任务了
前端
摸着石头过河的石头27 分钟前
taro3.x-4.x路由拦截如何破?
前端·taro
lpfasd12336 分钟前
开发Chrome/Edge插件基本流程
前端·chrome·edge
练习前端两年半1 小时前
🚀 Vue3 源码深度解析:Diff算法的五步优化策略与最长递增子序列的巧妙应用
前端·vue.js
烛阴1 小时前
TypeScript 接口入门:定义代码的契约与形态
前端·javascript·typescript
掘金安东尼2 小时前
使用自定义高亮API增强用户‘/’体验
前端·javascript·github
参宿72 小时前
electron之win/mac通知免打扰
java·前端·electron