取消Vue双击显示编辑状态时的文字选中

最新推荐文章于 2023-06-07 11:27:19 发布
最新推荐文章于 2023-06-07 11:27:19 发布
阅读量4.3k 收藏 4
点赞数 15
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDNzhaojiale/article/details/117563696
版权

背景描述

在很多情况下我们都会遇到这种情况，input一开始是只读状态，当用户双击的时候我们就可以让用户来修改我们的属性，然后在失去焦点的时候保存数据，并将状态继续保持到只读状态

问题分析

一般我用的状态切换是input中的disabled属性来实现只读的，但是当我们在从只读切换到编辑状态时，我们触发双击事件，但是双击事件他有默认行为(如我你的input中用value的话，他就会默认选中value，并让input失去焦点)，然后你要手动点一下才会获取焦点
在这里插入图片描述

解决思路

  • 当切换状态的时候，我先吧我input中的value的值设置为空
  • 然后在$nextTick中通过DOM操作让元素获取焦点
  • 然后再把值，赋值回去

最终效果

在这里插入图片描述

虽然问题解决了，但是效果仍不是太好，有好的解决思路，欢迎来评论。

GGCoder
关注
  • 15
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 24
    评论
专栏目录
vue中改变选中当前项的显示隐藏或者状态的实现方法
08-28
下面小编就为大家分享一篇vue中改变选中当前项的显示隐藏或者状态的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue · @click点击事件：阻止事件冒泡、取消默认事件
weixin_42091247的博客
11-29 3662
一般情况下绑定事件方法的： <div class="parent-wrapper" @click="clickWrapper">点这里</div> 阻止事件冒泡方法： <div class="parent-wrapper" @click.stop="clickWrapper">点这里</div> 取消默认事件方法： <div class="parent-wrapper" @click.prevent="clickWrapper">点这里<
Vue中div contenteditable 的光标定位方法
10-18
今天小编就为大家分享一篇Vue中div contenteditable 的光标定位方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框...
anchenhe9360的博客
03-05 2157
实现这三个功能的踩坑记录。 1. 需求 在Vue中，有一个input， 双击时编辑文本，点击该input节点外的其他地方，则取消编辑。 那么这里有三个要实现的地方 第一是双击显示编辑框。 第二是自动聚焦点击的显示框。 第三是点击编辑框外的地方，隐藏编辑框。 一二点都是在startPipeLineNameEdit这个method中去实现。 2. 实现双击显示编辑框 思路： 使用两个sp...
Vue3项目中实现相同属性的互斥点击,与自我点击选中与消除选中状态
weixin_48837605的博客
09-27 1037
效果1:相同属性的互斥点击 效果2:自我点击选中与取消选中的状态 代码实现: 自我点中与取消的逻辑分析: 1.选中的状态时是有一个类名:selected 2.但是后台的数据中并没有标志符号来区分是否选中,这个时候需要自己添加一个类名 3.添加点击事件实现标识符的切换false与true,由此来确定是否选中 互斥的效果逻辑分析: 1.点击事件中,将渲染的数据list全部传递过来 2.过滤出点中的自己...
vue 框架element UI table表格数据双击编辑，失去节点确定
weixin_48305373的博客
07-28 1822
双击表格显示input输入框鼠标离开更改输入值。
element-plus table组件，实现双击可编辑单元格，失去焦点，提交数据，支持下拉选择框选择。
技术前端，忠于热爱 @回忆哆啦没有A梦
05-22 4574
vue3+element-plus在使用table组件时，实现双击可编辑单元格，单元格使用input，失去焦点或者回车后，提交table数据。同时支持下拉选择框选择。
vue禁止双击选中文字
jhfvuyhgui的博客
04-10 545
【代码】vue禁止双击选中文字。
Element UI表格内容双击可编辑，失去焦点提交内容
最新发布
weixin_43484014的博客
06-07 1454
需求就是双击列表中的某一cell，获取焦点时单元格变成input编辑框，失去焦点时如果内容有更改就触发修改的接口，如果内容无更改的话，就不触发。
vue中设置div里面的内容无法选中（双击div不会被选中）
a1783118的博客
10-27 2181
双击div不会被选中
vue+element+input+提取选中文字
05-12
textarea中有大量数据，获得鼠标选中的部分数据
vue循环中点击选中再点击取消(单选)的实现
10-14
主要介绍了vue循环中点击选中再点击取消(单选)的实现，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
IntelliJ IDEA编辑器配置vue高亮显示
12-13
本文实例为大家分享了IntelliJ IDEA编辑器配置vue高亮显示的具体实现方法，供大家参考，具体内容如下 1.查找IntelliJ IDEA是否已经安装vue.js  注:之前有写过关于使用cmd命令搭建vue项目的全部过程，详情在此 打开...
利用vue.js实现被选中状态的改变方法
10-18
下面小编就为大家分享一篇利用vue.js实现被选中状态的改变方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue基础
热门推荐
CSDNzhaojiale的博客
11-04 1万+
Vue入门 一、什么是vue？ JavaScript的框架 框架是不同于向jQuery这样的js库，框架需要遵守它的规则，才能使用 二、vue的特点 JavaScript框架 简化Dom操作 响应式数据驱动 三、实现第一个vue程序 导入vue.js 创建vue对象，并设置el属性和data属性 使用简洁的模板语法把数据渲染到页面上 <head> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdel
2小时入门-Vue
CSDNzhaojiale的博客
09-10 1万+
Vue入门 一、什么是vue？ JavaScript的框架 框架是不同于向jQuery这样的js库，框架需要遵守它的规则，才能使用 二、vue的特点 JavaScript框架 简化Dom操作 响应式数据驱动 三、实现第一个vue程序 导入vue.js 创建vue对象，并设置el属性和data属性 使用简洁的模板语法把数据渲染到页面上 <head> <!-- 1.引入vue文件 --> <script src="https://cdn.jsdel
CSS让子元素div的高度填满父容器的剩余空间
CSDNzhaojiale的博客
05-08 1万+
在写项目中很多时候都会遇到这种情况，在父级中分为上下两个部分，其中头部的header是固定的，那main就要把剩下的区域自适应填充(即减去头部header的高度自适应) 对很多人都想到了直接给main设置height为100%不就行了，但是这种方式会让浏览器的滚动条出现，也就是你的高度没有减去顶部header的高度，这种写法是很不友好的 试了很多次最终用的是：让头部的header浮动并且让他的width为100%，main的高度还设为100%这样。 不说了直接上代码： <template>
vue 按钮权限管理
CSDNzhaojiale的博客
05-31 3831
在很多情况下，程序会根据用户的权限，对按钮的显示和隐藏有一定的限制 例如：页面上现在有三个按钮（添加，删除，修改），那现在后端返回的是（当前用户只对增加按钮有权限控制）即其余的按钮选项都不显示 情节交代清楚了，接下来我说一下我的思路 用户登陆之后就把对按钮的权限控制信息存到vuex中 写一个vue的自定义指令，根据指令中传入的信息(操作Dom的显示和隐藏) 在组件中注册这个自定义指令，并应用 vuex中的代码 import Vue from 'vue'; import Vuex from 'vu.
vue3中取消el-menu的选中状态
05-23
在 Vue 3 中，可以通过 `v-model` 和 `default-active` 属性来控制 `el-menu` 的选中状态。 如果要取消 `el-menu` 的选中状态，可以将 `v-model` 绑定的值设置为 `null` 或者空字符串，或者将 `default-active` 属性设置为 `null` 或者空字符串。 示例代码如下： ```html <template> <el-menu v-model="activeIndex" :default-active="activeIndex"> <el-menu-item index="1">菜单项1</el-menu-item> <el-menu-item index="2">菜单项2</el-menu-item> <el-menu-item index="3">菜单项3</el-menu-item> </el-menu> <button @click="cancelSelection">取消选中</button> </template> <script> import { ref } from 'vue'; export default { setup() { const activeIndex = ref('1'); const cancelSelection = () => { activeIndex.value = null; // 或者 '' }; return { activeIndex, cancelSelection, }; }, }; </script> ``` 在上面的代码中，我们使用 `ref` 定义了一个响应式变量 `activeIndex`，并将其绑定到 `el-menu` 的 `v-model` 和 `default-active` 属性上。`cancelSelection` 方法可以将 `activeIndex` 的值设置为 `null` 或者空字符串，从而取消 `el-menu` 的选中状态。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值