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 变量的值,输入框的可编辑

相关推荐
拾光拾趣录1 分钟前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权2 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598243 分钟前
vue3源码解析:调度器
前端·vue.js
一一一87113 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚26 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件28 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript