vue双击可编辑输入框

  • 2024-10-17

Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框

实现这三个功能的踩坑记录. 1. 需求 在Vue中,有一个input, 双击时编辑文本,点击该input节点外的其他地方,则取消编辑. 那么这里有三个要实现的地方 第一是双击显示编辑框. 第二是自动聚焦点击的显示框. 第三是点击编辑框外的地方,隐藏编辑框. 一二点都是在startPipeLineNameEdit这个method中去实现. 2. 实现双击显示编辑框 思路: 使用两个span包含双击前和双击后的代码,用isEditingPipeLineName这个变量去控制显示与否.(PipeLin

Vue Elementui 如何让输入框每次自动聚焦

在项目优化中碰到一个小问题,在每次提示框显示的时候让提示框中的输入框聚焦.如下图.一般情况下提示框是隐藏的.点击了编辑才会弹出. 那么原生属性autofocus 只在模板加载完成时起作用,也就是说只有第一次有用. 然后尝试了ref,再this.$refs.el 也不能成功拿到该元素,因为饿了么组件封装的<el-input>对应的是外面一个div,里面包了个input,在获取元素的时候有问题的. 第二种尝试,利用class 或者id 获取元素,然后再手动聚焦 el.focus(),好像也不起作用

vue 解决ios编辑器输入框不能拉起

一.问题描述:Android .pc.下可以正常使用,在ios下可以拉起输入框但是无法输入 <div contenteditable="true" ></div> 二.解决方法:给div新增以下全局样式 div{ -webkit-user-select:text; height:auto; } div *{ -webkit-user-select:text } 三.语法: user-select (1) 语法 user-select:none | text |

MathType for mac 能够实现在Word里面双击公式编辑的方法

最近我遇到了一个问题,在使用Word编辑公式时遇到了阻碍. 问题: 我为了顺应潮流呢,用的是office for mac2016版本,在发现MathType安装好后,不能连接到Word里面,从MathType中编辑好的公式再粘贴到word中呢,就变成了图片格式,无法编辑修改.因此呢,为了实现在mac的Word中也能像windows的Word中一样使用MathType编辑修改公式呢~我做了一些工作,网上也都有方法,但是下面呢我把它们汇总出来. 提前说明,本文中的软件都是从http://www.52

鼠标右键Table的td弹出多级菜单,双击td编辑

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <style type="text/css"> html, body { TEXT

vue指令应用--实现输入框常见过滤功能

前端开发最常碰到的就是输入框,经常要做各种验证,本公司惯用的需求是直接屏蔽特定字符的输入,如禁止非数字输入,特殊符号输入,空格输入等,这些功能反复使用,做成指令的形式,直接调用,非常方便,上代码: 目录结构很简单: 1.项目文件夹里新建directives文件夹,所有指令都放在这个文件夹里 2.input-filter文件夹放具体指令,在其下建两个文件: a.inputFilter.js实现主体功能 b.index.js负责封装,职责分明 inputFilter.js代码: /** * 实现功能

vue点击编辑按钮，内容变成input可以修改，也可以删除

一.效果 图1 图2,点击报错之后,又变成图1的效果 二.使用到了element UI中的以下组件: <el-button> <el-input> 三.使用的关键点是vue中的v-if指令 四.关键代码如下 HTML部分 <div class="content-wrapper"> <div> <el-button type="primary" icon="el-icon-plus" @clic

浅入深出Vue：文章编辑

登录与注册功能都已经实现,现在是时候来开发文章编辑功能了. 这里咱们就使用 markdown 作为编辑语言吧,简洁通用.那么我们就需要找一下 markdown 的编辑器组件了,而且还要支持 vue噢. 若羽这里找到的一个是 mavonEditor,在 github 上有2k+ 的 star.文档也都是中文的,比较友好. mavonEditor地址 添加组件 && 新建编辑组件 首先来安装一下编辑器: npm install mavon-editor --save 然后在 main.js 中

vue 如何实现 Input 输入框模糊查询方法

原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item,则返回 item 的第一次出现的位置.开始位置的索引为 0. 如果在数组中没找到指定元素则返回 -1. 下面先看示例: 搜索前: 搜索后: 实现方法: methods:{ // 点击搜索工程 search(){ // 支持模糊查询 // this.xmgcqkJsonsData:用于搜索的总数据 /

vue 通过css实现输入框居中输入

今天开发时突然想写blog了,水一下(oﾟvﾟ)ノ css代码 .inputStyle { text-align: center;/*主要就是这个,下面的都是样式*/ width: 6rem; height: 2.5rem; border: 1px solid #5a5e66; font-size: 14px; line-height: 48px; border-radius: 25px; outline: none /*outline设置为空,可以达到输入框激活状态时不出现方框*/ } inp

Vue iview可编辑表格的实现

创建table实例页 views/table.vue <template> <h1>table page</h1> </template> <script> import { getTableData } from '@/api/data' export default { data () { return { tableData: [], columns: [ { key: 'name', title: '姓名' }, { key: 'age'

vue引入fastclick设置输入框type="number"报错Failed to execute 'setSelectionRange' on 'HTMLInputElement': The input element's type ('number') does not support selection.的解决办法

将输入框type设为text,通过正则验证输入的值

Vue修改、编辑时，撤销修改内容，表格内容不变

在编辑该行的过程中,突然不想编辑了,想点击撤销按钮,将该行数据恢复到旧值,目前的做法是,在点击编辑按钮的时候转换成json字符,点击撤销按钮的时候再解析成对象,赋值给该行的数据. // 编辑editHandle (item) { this.dialogEdit = true this.editRow = JSON.stringify(item) this.editData = JSON.parse(this.editRow); },

jquery和vue分别对input输入框手机号码格式化（344）

jQuery function fomatterTel(val, old) {//val: 当前input的值,old: input上次的值 var str = ""; var telLen = val.length; if (old.length <= telLen) { if (telLen === 4 || telLen === 9) { var pre = val.substring(0, telLen-1); //substring() 方法用于提取字符串中介于两个指定

vue+Element 表格编辑

先上效果 <template> <div> <el-table :data="tableData" style="width: 100%"> <div v-for="(item,index) in tableTitle" :key="index" > <el-table-column :prop="item.prop" :label="item

handsonetable+vue 表格在线编辑

<template> <div> <div id="example-container" class="wrapper"> <HotTable ref="testHot" :root="root" :settings="hotSettings"/> <el-button type="primary" size="small&

vue仿移动端输入框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> [v-cloak] { display: none; } #a { width: 500px; height: 50px; border: 1px solid #00000

JS双击div编辑文本内容

HTML代码: <div class="album"> <div class="image"><a href="javascript:;" onclick="view({$vo.id})"><img src="{$vo.img}" /></a></div> <div class="name" id="

bootstrap table 双击可编辑，添加、删除行

html: <table class="table table-bordered" id="para_table"> <tr> <th style="text-align:center" width="200">名称</th> <th style="text-align:center" width="200">值</th&

JQuery 双击动态编辑

         $(this).append(input);            $("input#temp").focus();            $("input").blur(                              $(this).remove();                }                 $(this).closest("td").text($(this).val());       

热门专题

网站ipv6改造步骤 java
gitlab-cicd 更新代码
electron-vue移动改变边框大小
SSMS18456错误
vue 跨域 ajax请求session cookie不同
httpServletRequest获取用户id
macbook插拔显示器
rgb颜色空间中黑白色转换到hsv颜色空间中是什么
js find()的父亲
qtablewidget清空表格
EF调用存储过程后返回DataSet数据
tasklist中如何区分多个cmd.ext
lgg8@开机动画修改
connect 超时时间
android studio 设置apk名称
docker 安装的centos 没有wget
2019版photoshop cc 软件激活码
subs在maple
W5100 SPI ADDR悬空
在小程序里面打开另一个小程序