点击出现可编辑el-input

Ybittersweet

已于 2023-05-18 17:36:32 修改

阅读量367

点赞数

文章标签： javascript 前端 vue.js

于 2023-04-12 14:24:58 首次发布

本文链接：https://blog.csdn.net/Ybittersweet/article/details/130106244

版权

本文介绍了如何在 Vue.js 应用中创建一个自定义指令，使得点击元素后el-input变为可编辑状态，同时通过增加唯一标识确保多组件间的互不影响。

摘要由CSDN通过智能技术生成

我们需要考虑同页面多组件互相之间不会影响el-input

一.自定义指令

<template>
  <div>
    <A></A> <div v-if="!isEditing" @click="toggleEditMode">{
   {
    form.remark50 }}</div>
    <el-input v-model="form.remark50" ref="input" v-if="isEditing" @blur="toggleEditMode" v-focus></el-input>
  </div>
</template>

<script>