(二)vue获取鼠标位置，在光标位置插入文本（三）v-for循环的元素获取鼠标位置，在光标处插入文本_vue 在dom点击位置添加文本 - wpsshop博客

<link rel="shortcut icon" type="image/x-icon" href="https://cdn.wpsshop.cn/public/blog/images/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><meta name="applicable-device" content="pc,mobile"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><meta name="referrer" content="no-referrer"><meta name="apple-mobile-web-app-capable" content="yes"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/js/jquery-1.9.1.js?v=1.232"></script><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/game/css/corecss.css?v=3890" type="text/css"><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/game/css/core.css?v=4890" type="text/css"><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/game/css/mobilecore.css?v=890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/game/js/common.js?v=890" ></script><style type="text/css">  body{
    padding-top:0px;
    margin:0px;
  }
  .cppui-container-1{
     position: relative;
     background-color: #fff;
     margin:0px auto;
     height:auto;
  }
  .cppui-row-1{
   position: relative;
    margin:0px auto;
    height:auto;
    width:1190px; /*960 1190*/
  }
  .cppui-row-1_100{   /*1 100%*/
   position: relative;
    margin:0px auto;
    height:auto;
    width:100%; /*960 1190*/
  }
  .cppui-column-1-1-0-1,.cppui-column-1-0-1,.cppui-column-1-1-1-0-1,.cppui-column-360-auto-0-1,.cppui-column-auto-0-1{
    background-color: #fff;
    position: relative;
    height:auto;
    display: inline-block;
  }
  .cppui-column-1-1-0-1/*1:1*/
    width: 49%;
  
    .cppui-column-1-0-1{  /*1*/
    width: 99%;
  }
  .cppui-column-1-1-1-0-1{  /*1:1:1*/
    width: 33%;
  }
  .cppui-column-360-auto-0-1{  /*360:auto*/
    width: 360px;
  }
  .cppui-column-auto-0-1{  /*360:auto*/
    width:auto;
  }
    
    
   
 </style></head><body><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/index_top.css?v=890" type="text/css"><link rel="shortcut icon" type="image/x-icon" href="https://cdn.wpsshop.cn/public/blog/images/favicon.ico"><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/index_top_last.css?v=3890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/blog/js/index_top_last.js?v=890"></script><style type="text/css"></style><script type="text/javascript"></script><div class="cl-header container-fluid grid-top"><div class="header-content container px-0"><nav class="navbar navbar-expand-lg navbar-light"><a class="navbar-brand" href="/blog/UNITY/list/1"><img height="46" src="https://cdn.wpsshop.cn/public/blog/images/logo1.png" referrerpolicy="no-referrer"></a><div class="i-imagediv i-imagediv1"><input type="search" name="keyboard" class="i-input" value="" placeholder="请输入关键词" autocomplete="off"><button class="search-button" onclick="openurl(this);"><i class="i-image"></i><span>搜索</span></button></div><button class="navbar-toggler collapsed" type="button" onclick="navbarshow('#navbarNav');" data-toggle="collapse"><span class="navbar-toggler-icon"><svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path stroke="rgba(0, 0, 0, 0.5)" stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" d="M4 7h22M4 15h22M4 23h22"/></svg></span></button><div id="right-navigation" style="display: none;"><div id="p-views" class="vectorTabs"><h5>查看</h5><ul><li id="ca-viewsource"><a href="javascript:editorc('#content_007');" rel="nofollow" title="修正、补充或整理" accesskey="e"><span>编辑修改</span></a></li></ul></div></div><div class="navbar-collapse justify-content-end collapse" id="navbarNav"><ul class="navbar-nav"><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/UNITY/list/1">首页</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/UNITY/list/1">UNITY</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/NODEJS/list/1">NODEJS</a></li></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/PYTHON/list/1">PYTHON</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/AI/list/1">AI</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/GIT/list/1">GIT</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/PHP/list/1">PHP</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/GO/list/1">GO</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/CEF3/list/1">CEF3</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/JAVA/list/1">JAVA</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/HTML/list/1">HTML</a></li><li class="nav-item  " style="color:;" ><a class="nav-link" href="/blog/CSS/list/1">CSS</a></li></ul><div class="i-imagediv i-imagediv2"><input type="search" name="keyboard" class="i-input" value="" placeholder="请输入关键词" autocomplete="off"><button class="search-button" onclick="openurl(this);"><i class="i-image"></i><span>搜索</span></button></div></div></nav></div></div><div class="cppui-row-1_100 cppui-row-view-1  row_1_100 ui-draggable" style="display: block;"><div class="cppui-column-1_100-0-1 column-view-com cppui-column-1_100-0-view-1 ui-sortable"><div class="drag-item-show-view-1 topheadermenu_view_pic ui-draggable" style="display: block;"><div class="index002-header   drag-item-hide-view-1"><div class="index002-container"><div class="grid-right main" id="content_007" ><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/right_detail.css?v=890" type="text/css"><style type="text/css"></style><div class="m_right"><div class="profile"><div class="author"><div class="author-avatar"><a href="javascript:void(0);"><img src="https://cdn.wpsshop.cn/public/images/rw.png" class="lazy-img" data-url="" alt="devbox"></a></div><div class="author-name">我家自动化</div><div class="author-intro">                这个屌丝很懒，什么也没留下！            </div><div class="author-bt"><a href="javascript:;" id="follow_bt" onclick="follow();" class="skins-btn" title="关注作者"><svg class="icon" style="width: 15px;height: 15px;margin-top:-3px;margin-right:5px;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1428"><path d="M1024 409.6H614.4V0H409.6v409.6H0v204.8h409.6v409.6h204.8V614.4h409.6z" fill="#ffffff" p-id="1429"></path></svg>                    关注作者</a></div></div></div><div class="tools"><div class="tools_top">热门标签</div><div class="tools_box"><ul><li><a title="jquery" href="/blog/jquery/list/1" target="_blank">jquery</a></li><li><a title="HTML" href="/blog/HTML/list/1" target="_blank">HTML</a></li><li><a title="CSS" href="/blog/CSS/list/1" target="_blank">CSS</a></li><li><a title="PHP" href="/blog/PHP/list/1" target="_blank">PHP</a></li><li><a title="ASP" href="/blog/ASP/list/1" target="_blank">ASP</a></li><li><a title="PYTHON" href="/blog/PYTHON/list/1" target="_blank">PYTHON</a></li><li><a title="GO" href="/blog/GO/list/1" target="_blank">GO</a></li><li><a title="AI" href="/blog/AI/list/1" target="_blank">AI</a></li><li><a title="C" href="/blog/C/list/1" target="_blank">C</a></li><li><a title="C++" href="/blog/CPP/list/1" target="_blank">C++</a></li><li><a title="C#" href="/blog/csharp/list/1" target="_blank">C#</a></li><li><a title="PHOTOSHOP" href="/blog/PHOTOSHOP/list/1" target="_blank">PHOTOSHOP</a></li><li><a title="UNITY" href="/blog/UNITY/list/1" target="_blank">UNITY</a></li><li><a title="iOS" href="/blog/iOS/list/1" target="_blank">iOS</a></li><li><a title="android" href="/blog/android/list/1" target="_blank">android</a></li><li><a title="vue" href="/blog/vue/list/1" target="_blank">vue</a></li><li><a title="xml" href="/blog/xml/list/1" target="_blank">xml</a></li><li><a title="爬虫" href="/blog/爬虫/list/1" target="_blank">爬虫</a></li><li><a title="SEO" href="/blog/SEO/list/1" target="_blank">SEO</a></li><li><a title="LINUX" href="/blog/LINUX/list/1" target="_blank">LINUX</a></li><li><a title="WINDOWS" href="/blog/WINDOWS/list/1" target="_blank">WINDOWS</a></li><li><a title="JAVA" href="/blog/JAVA/list/1" target="_blank">JAVA</a></li><li><a title="MFC" href="/blog/MFC/list/1" target="_blank">MFC</a></li><li><a title="CEF3" href="/blog/CEF3/list/1" target="_blank">CEF3</a></li><li><a title="CAD" href="/blog/CAD/list/1" target="_blank">CAD</a></li><li><a title="NODEJS" href="/blog/NODEJS/list/1" target="_blank">NODEJS</a></li><li><a title="GIT" href="/blog/GIT/list/1" target="_blank">GIT</a></li><li><a title="Pyppeteer" href="/blog/Pyppeteer/list/1" target="_blank">Pyppeteer</a></li><li><a title="article" href="/article/list/1" target="_blank">article</a></li><div style="clear: both;"></div></ul></div></div><div class="rank"><div class="rank_top">热门文章</div><div class="rank_box"><ul><li><b class="">1</b><a title="【华为OD机试考生抽中题 C&D卷】孙悟空吃蟠桃，用 Python 编码，速通_华为机考爱吃蟠桃的孙悟空" href="/w/weixin_40725706/article/detail/462985" target="_blank">【华为OD机试考生抽中题 C&D卷】孙悟空吃蟠桃，用 Python 编码，速通_华为机考爱吃蟠桃的孙悟空</a></li><li><b class="">2</b><a title="Docker部署PostgreSQL数据库_docker下如何部署postgresql" href="/w/盐析白兔/article/detail/464725" target="_blank">Docker部署PostgreSQL数据库_docker下如何部署postgresql</a></li><li><b class="">3</b><a title="【全网首发】Linux系统最全笔记（建议收藏）_linux笔记" href="/w/小小林熬夜学编程/article/detail/469468" target="_blank">【全网首发】Linux系统最全笔记（建议收藏）_linux笔记</a></li><li><b class="">4</b><a title="牛客周赛 Round 39题解" href="/w/很楠不爱3/article/detail/460025" target="_blank">牛客周赛 Round 39题解</a></li><li><b class="black">5</b><a title="UE5 利用Project Launcher快速打包_ue5打包项目" href="/w/知新_RL/article/detail/472733" target="_blank">UE5 利用Project Launcher快速打包_ue5打包项目</a></li><li><b class="black">6</b><a title="Linux进程控制实验_使用fork函数创建两个子进程,其中一个子进程运行“ls-l”指令,另一个子进程在暂停" href="/w/你好赵伟/article/detail/458668" target="_blank">Linux进程控制实验_使用fork函数创建两个子进程,其中一个子进程运行“ls-l”指令,另一个子进程在暂停</a></li><li><b class="black">7</b><a title="3分钟部署完成Docker Registry及可视化管理工具Docker-UI_docker-registry-ui" href="/w/凡人多烦事01/article/detail/471059" target="_blank">3分钟部署完成Docker Registry及可视化管理工具Docker-UI_docker-registry-ui</a></li><li><b class="black">8</b><a title="数据结构学习--第2章_数据结构第二章" href="/w/我家小花儿/article/detail/474705" target="_blank">数据结构学习--第2章_数据结构第二章</a></li><li><b class="black">9</b><a title="基于FPGA的FFT算法实现_用xilinx的fpga实现fft变换" href="/w/凡人多烦事01/article/detail/470081" target="_blank">基于FPGA的FFT算法实现_用xilinx的fpga实现fft变换</a></li><li><b class="black">10</b><a title="图文并茂解释TCP/IP原理_tcpip原理" href="/w/知新_RL/article/detail/466288" target="_blank">图文并茂解释TCP/IP原理_tcpip原理</a></li></ul></div></div></div><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/mid_detail.css?v=890" type="text/css"><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/mid_clk.css?v=890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/blog/js/mid_.js?v=890"></script><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/study/js/j/vs.css?v=890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/study/js/j/highlight.pack.js?v=890" ></script><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/index_contenthljs.css?v=890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/wpsshopindex/js/detail01tj.js?v=531890" ></script><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/wpsshopindex/css/mid_detail_last.css?v=3890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/wpsshopindex/js/mid_detail_last.js?v=33890"></script><style type="text/css"></style><script type="text/javascript"></script><div class="interactive_info" id="body-data-0098" attrv="92603"></div><div class="article_box" style="overflow: hidden;"><div class="article_channel"><div class="channel_top_line"><div class="cn_t_l"></div><div class="cn_t_r"></div></div><div class="article_channel_info">当前位置:   <a href="/article/list/1">article</a>  >  正文 </div></div><div class="article_title"><h1>(二)vue获取鼠标位置，在光标位置插入文本（三）v-for循环的元素获取鼠标位置，在光标处插入文本_vue 在dom点击位置添加文本</h1></div><div class="article_info"><div class="article_c_info">          作者：我家自动化 | 2024-04-26 18:57:48</div><div class="article_click" style="width: 140px;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">          赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div class="article_intro">vue 在dom点击位置添加文本</div><div class="article_content article_contentheight">
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/kdoc_html_views-1a98987dfd.css">
        <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-044f2cf1dc.css">
                <div id="content_views" class="htmledit_views">
                    <p>另一种获取光标的方法见文章<a href="https://blog.csdn.net/Sunny_lxm/article/details/89445518">https://blog.csdn.net/Sunny_lxm/article/details/89445518</a></p> 
<p> </p> 
<p>（一）、单元素</p> 
<p>效果：<img alt="" class="has" height="143" src="https://img-blog.csdnimg.cn/20190828160514454.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1N1bm55X2x4bQ==,size_16,color_FFFFFF,t_70" width="281"></p> 
<pre class="has set-code-hide" data-index="0" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:774px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-textarea"</span>></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">     <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"content"</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"textarea"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"2"</span> </span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"off"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"singleText"</span>></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-tag"></<span class="hljs-name">textarea</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">     <span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"insert('<name>')"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>插入会员名<span class="hljs-tag"></<span class="hljs-name">button</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">methods:{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    async insert(myValue) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">          // const myField = document.querySelector('#textarea');</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            const myField = this.$refs.singleText;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            if (myField.selectionStart || myField.selectionStart === 0) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                var startPos = myField.selectionStart</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                var endPos = myField.selectionEnd</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                this.content = myField.value.substring(0, startPos) + myValue </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                            + myField.value.substring(endPos, myField.value.length)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                await this.$nextTick() // 这句是重点, 圈起来</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                myField.focus()</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                myField.setSelectionRange(endPos + myValue.length, endPos + myValue.length)</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            } else {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                this.content += myValue</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> 
<p>（二）、v-for循环的元素，通过this.refs找到对应的文本框，并插入字段</p> 
<pre class="has set-code-hide" data-index="1" name="code"><code class="language-javascript hljs"><ol class="hljs-ln" style="width:942px"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">//v-for循环的元素，在光标处插入字段，并对兄弟元素没有影响</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="language-xml"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">style</span>=<span class="hljs-string">"display:flex;flex-direction:column;"</span>></span></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">     <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-textarea"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(item,index) in shoppeList"</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"index"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">//绑定不同的model值，不然会影响到所有的textarea，这里绑定的model值是item.content，但是这个key值在item中目前是没有的</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">          <span class="hljs-tag"><<span class="hljs-name">textarea</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"item.content"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"textarea"</span> <span class="hljs-attr">rows</span>=<span class="hljs-string">"10"</span> </span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-attr">autocomplete</span>=<span class="hljs-string">"off"</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"ttl"</span>><span class="hljs-tag"></<span class="hljs-name">textarea</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-tag"><<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"insertAtCursor(item,index)"</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span>></span>插入字段<span class="hljs-tag"></<span class="hljs-name">button</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">      <span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"></<span class="hljs-name">div</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-title function_">data</span>(<span class="hljs-params"></span>){</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-keyword">return</span>{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">         <span class="hljs-attr">shoppeList</span>: [</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-attr">id</span>: <span class="hljs-number">3</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-attr">value</span>: <span class="hljs-string">"name"</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="19"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="20"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="21"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-attr">id</span>: <span class="hljs-number">4</span>,</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="22"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                    <span class="hljs-attr">value</span>: <span class="hljs-string">"sex"</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="23"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="24"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            ],</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="25"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="26"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="27"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">},</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="28"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-attr">methods</span>:{</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="29"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">    <span class="hljs-comment">// 获取光标位置</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="30"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">   <span class="hljs-keyword">async</span> <span class="hljs-title function_">insertAtCursor</span>(<span class="hljs-params">item, index</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="31"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-comment">//在这个地方要给item  set一个content，如果不手动set的话。textarea在没有输入文本之前是不能插入字段的</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="32"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">         <span class="hljs-variable language_">this</span>.$set(item , <span class="hljs-string">'content'</span>, <span class="hljs-string">''</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="33"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">         <span class="hljs-keyword">const</span> myField = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$refs</span>.<span class="hljs-property">ttl</span>[index];<span class="hljs-comment">//虽然ref在v-for中不能绑定动态的，但是可以根据唯一标志找到对应的dom元素</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="34"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">         <span class="hljs-comment">//console.log(item)</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="35"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">         <span class="hljs-comment">// console.log(this.$refs.ttl[index]);</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="36"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">         <span class="hljs-keyword">const</span> myValue = item.<span class="hljs-property">value</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="37"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="38"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        <span class="hljs-keyword">if</span> (myField.<span class="hljs-property">selectionStart</span> || myField.<span class="hljs-property">selectionStart</span> === <span class="hljs-number">0</span>) {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="39"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> startPos = myField.<span class="hljs-property">selectionStart</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="40"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">var</span> endPos = myField.<span class="hljs-property">selectionEnd</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="41"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                item.<span class="hljs-property">content</span> = myField.<span class="hljs-property">value</span>.<span class="hljs-title function_">substring</span>(<span class="hljs-number">0</span>, startPos) + </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="42"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-string">"{"</span> + item.<span class="hljs-property">value</span> + <span class="hljs-string">"}"</span> + </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="43"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                myField.<span class="hljs-property">value</span>.<span class="hljs-title function_">substring</span>(endPos, myField.<span class="hljs-property">value</span>.<span class="hljs-property">length</span>+<span class="hljs-number">2</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="44"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                <span class="hljs-keyword">await</span> <span class="hljs-variable language_">this</span>.$nextTick(); <span class="hljs-comment">// 这句是重点, 圈起来</span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="45"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                myField.<span class="hljs-title function_">focus</span>();</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="46"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                myField.<span class="hljs-title function_">setSelectionRange</span>( endPos + item.<span class="hljs-property">value</span>.<span class="hljs-property">length</span>+<span class="hljs-number">2</span>, </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="47"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                                            endPos + item.<span class="hljs-property">value</span>.<span class="hljs-property">length</span>+<span class="hljs-number">2</span>);</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="48"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            } <span class="hljs-keyword">else</span> {</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="49"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">                item.<span class="hljs-property">content</span> += <span class="hljs-string">"{"</span> + myValue+<span class="hljs-number">2</span> + <span class="hljs-string">"}"</span>;</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="50"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">            }</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="51"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">        },</div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="52"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="53"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="54"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="55"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="56"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="57"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line">}</div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://csdnimg.cn/release/blogv2/dist/pc/img/newCodeMoreWhite.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> 
<p> </p>
                </div><div data-report-view="{"mod":"1585297308_001","spm":"1001.2101.3001.6548","dest":"https://blog.csdn.net/Sunny_lxm/article/details/100121223","extend1":"pc","ab":"new"}"><div></div></div>
               本文内容由网友自发贡献，转载请注明出处：<a href="https://www.wpsshop.cn/w/我家自动化/article/detail/492603">https://www.wpsshop.cn/w/我家自动化/article/detail/492603</a></div><div class="article_recommend"><div class="list_top">推荐阅读</div><div class="ListItems"><ul class="NewsList"><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Kubernetes 有状态服务跨云迁移到 Amazon EKS" href="/w/羊村懒王/article/detail/492651" target="_blank"><em>Kubernetes</em> 有状态<em>服务</em>跨云<em>迁移</em>到 <em>Amazon</em> EKS...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Kubernetes 有状态服务跨云迁移到 Amazon EKS" href="/w/羊村懒王/article/detail/492651" target="_blank">01背景<em>Kubernetes</em> 和云原生技术在过去几年中经历了惊人的增长，企业采用 <em>Kubernetes</em> 的主要原因是它可...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Leetcode每日一题：134.gas-station（加油站）" href="/w/很楠不爱3/article/detail/493475" target="_blank"><em>Leetcode</em><em>每日</em><em>一</em>题：134.<em>gas</em>-<em>station</em>（<em>加油站</em>）...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Leetcode每日一题：134.gas-station（加油站）" href="/w/很楠不爱3/article/detail/493475" target="_blank">思路：就按题目所给的要求来，到<em>一</em>个站点，就减去消耗的油，如果没油了，返回false，否则，加上该站点加的油，重复直到开到...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="vue 鼠标坐标_vue 鼠标移动到div 相对位置" href="/w/盐析白兔/article/detail/492570" target="_blank"><em>vue</em> <em>鼠标</em>坐标_<em>vue</em> <em>鼠标</em>移动到<em>div</em> <em>相对</em>位置...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="vue 鼠标坐标_vue 鼠标移动到div 相对位置" href="/w/盐析白兔/article/detail/492570" target="_blank">方法介绍关于js<em>鼠标</em>事件获取到坐标的属性总共以下五种： event.clientX/Y event.pageX/Y ev...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="linux库之静态库与动态库_linux静态库以及动态库的介绍" href="/w/盐析白兔/article/detail/492428" target="_blank"><em>linux</em><em>库</em>之<em>静态</em><em>库</em>与<em>动态</em><em>库</em>_<em>linux</em><em>静态</em><em>库</em>以及<em>动态</em><em>库</em><em>的</em>介绍...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="linux库之静态库与动态库_linux静态库以及动态库的介绍" href="/w/盐析白兔/article/detail/492428" target="_blank">详细介绍<em>静态</em><em>库</em>与<em>动态</em><em>库</em><em>的</em>制作与使用_<em>linux</em><em>静态</em><em>库</em>以及<em>动态</em><em>库</em><em>的</em>介绍<em>linux</em><em>静态</em><em>库</em>以及<em>动态</em><em>库</em><em>的</em>介绍          ...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Android studio显示你的主机中的软件中止了一个已建立的连接" href="/w/从前慢现在也慢/article/detail/492499" target="_blank"><em>Android</em> <em>studio</em><em>显示</em>你<em>的</em><em>主机</em><em>中</em><em>的</em>软件<em>中</em>止<em>了</em>一个已建立<em>的</em>连接...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Android studio显示你的主机中的软件中止了一个已建立的连接" href="/w/从前慢现在也慢/article/detail/492499" target="_blank"><em>Android</em> <em>studio</em>在run<em>的</em>时候<em>显示</em>你<em>的</em><em>主机</em><em>中</em><em>的</em>软件<em>中</em>止<em>了</em>一个已建立<em>的</em>连接。出现<em>的</em>场景:是在run项目<em>的</em>时候出...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="分布式服务架构读书笔记-第六章 Java服务的线上应急和技术攻关_java服务器应急措施" href="/w/菜鸟追梦旅行/article/detail/492636" target="_blank">分布式<em>服务</em>架构读书笔记-第六章 <em>Java</em><em>服务</em>的线上<em>应急</em>和技术攻关_<em>java</em><em><em>服务</em>器</em><em>应急</em>措施...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="分布式服务架构读书笔记-第六章 Java服务的线上应急和技术攻关_java服务器应急措施" href="/w/菜鸟追梦旅行/article/detail/492636" target="_blank">6.1海恩法则和墨菲定律海恩法则：每一起严重事故背后，必然有29次轻微事故和300起未遂先兆及1000起事故隐患事故的发...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="机器人导航(仿真)(一)——SLAM建图" href="/w/AllinToyou/article/detail/492282" target="_blank"><em>机器人</em><em>导航</em>(仿真)(一)——<em>SLAM</em><em>建图</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="机器人导航(仿真)(一)——SLAM建图" href="/w/AllinToyou/article/detail/492282" target="_blank"><em>导航</em>实现01_<em>SLAM</em><em>建图</em>参考视频：【奥特学园】ROS<em>机器人</em>入门课程《ROS理论与实践》零基础教程_哔哩哔哩_bilib...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="LRU缓存——哈希表+双向链表_请你设计并实现一个满足 lru (最近最少使用) 缓存 约束的数据结" href="/w/凡人多烦事01/article/detail/491688" target="_blank"><em>LRU</em><em>缓存</em>——<em>哈希</em>表+<em>双向</em>链表_请你设计并实现<em>一个</em>满足 lru (<em>最近</em>最少<em>使用</em>) <em>缓存</em> 约束的数据结...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="LRU缓存——哈希表+双向链表_请你设计并实现一个满足 lru (最近最少使用) 缓存 约束的数据结" href="/w/凡人多烦事01/article/detail/491688" target="_blank"><em>LRU</em><em>缓存</em>——<em>哈希</em>表+<em>双向</em>链表_请你设计并实现<em>一个</em>满足 lru (<em>最近</em>最少<em>使用</em>) <em>缓存</em> 约束的<em>数据结构</em>请你设计并实现<em>一个</em>...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="【PHP】sign加签方法示例" href="/w/羊村懒王/article/detail/491897" target="_blank">【<em>PHP</em>】<em>sign</em><em>加签</em>方法<em>示例</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="【PHP】sign加签方法示例" href="/w/羊村懒王/article/detail/491897" target="_blank">【代码】【<em>PHP</em>】<em>sign</em><em>加签</em>方法<em>示例</em>。【<em>PHP</em>】<em>sign</em><em>加签</em>方法<em>示例</em>             1.需求如下 设所有发送...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Redis 缓存穿透解决_redis缓存穿透解决办法" href="/w/小小林熬夜学编程/article/detail/491661" target="_blank"><em>Redis</em> <em>缓存</em>穿透解决_<em>redis</em><em>缓存</em>穿透<em>解决办法</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Redis 缓存穿透解决_redis缓存穿透解决办法" href="/w/小小林熬夜学编程/article/detail/491661" target="_blank">当使用 <em>Redis</em> 作为数据库的前置<em>缓存</em>时，可能会出现查询的参数并不在数据库中此字段的值中，这时候 <em>Redis</em> 中肯定查...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="抽丝剥茧看ApkTool的反编译流程" href="/w/IT小白/article/detail/493380" target="_blank"><em>抽丝剥茧</em>看<em>ApkTool</em>的<em>反编译</em>流程...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="抽丝剥茧看ApkTool的反编译流程" href="/w/IT小白/article/detail/493380" target="_blank">作者简介：Serpit，Android开发工程师，2023年加入37手游技术部，目前负责国内游戏发行 Android S...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="mysql limit 扫描行数 & order by 与索引关系_select a, d wher" href="/w/Monodyee/article/detail/492395" target="_blank"><em>mysql</em> <em>limit</em> 扫描行数 & <em>or<em>d</em>er</em> by 与索引关系_<em>select</em> <em>a</em>, <em>d</em> wher...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="mysql limit 扫描行数 & order by 与索引关系_select a, d wher" href="/w/Monodyee/article/detail/492395" target="_blank">转：http://hi.b<em>a</em>i<em>d</em>u.com/<em>d</em>b<em>a</em>eyes/blog/item/e<em>a</em>f04<em>a</em>878bc6f326c65c...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="【ZYNQ】QSPI Flash 固化程序全攻略_zynq qspi选项配置" href="/w/Monodyee/article/detail/492487" target="_blank">【<em>ZYNQ</em>】<em>QSPI</em> <em>Flash</em> 固化<em>程序</em>全攻略_<em>zynq</em> <em>qspi</em>选项配置...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="【ZYNQ】QSPI Flash 固化程序全攻略_zynq qspi选项配置" href="/w/Monodyee/article/detail/492487" target="_blank"><em>ZYNQ</em> <em>QSPI</em> <em>Flash</em> 固化<em>程序</em>_<em>zynq</em> <em>qspi</em>选项配置<em>zynq</em> <em>qspi</em>选项配置             ...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="数学一年级应用题_2020小学一年级数学应用题练习100题" href="/w/羊村懒王/article/detail/492921" target="_blank"><em>数学</em><em>一年级</em><em>应用题</em><em>_</em>2020小学<em>一年级</em><em>数学</em><em>应用题</em>练习100题...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="数学一年级应用题_2020小学一年级数学应用题练习100题" href="/w/羊村懒王/article/detail/492921" target="_blank">6、动物园里黄狗和花狗有12只，9只是黄的，有几只是花的?7、小红拿30元钱去买一本书15元和一枝笔8元，售货员应找回多...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="eclipse项目目录展示结构设置_eclipse目录结构如何修改的更简洁" href="/w/繁依Fanyi0/article/detail/493335" target="_blank"><em>eclipse</em>项目<em>目录</em>展示<em>结构</em>设置<em>_</em><em>eclipse</em><em>目录</em><em>结构</em><em>如何</em><em>修改</em>的更简洁...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="eclipse项目目录展示结构设置_eclipse目录结构如何修改的更简洁" href="/w/繁依Fanyi0/article/detail/493335" target="_blank">常用的<em>目录</em>展示<em>结构</em>而<em>修改</em>的方式很简单，步骤如下1.鼠标移动到下图圈起来的位置2.移动到选项Projects Presen...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="【随笔】Git 高级篇 -- 远程与本地不一致导致提交冲突 git push --rebase（三十" href="/w/从前慢现在也慢/article/detail/491738" target="_blank">【随笔】<em>Git</em> 高级篇 -- <em>远程</em>与<em>本地</em>不一致导致<em>提交</em><em>冲突</em> <em>git</em> <em>push</em> --<em>rebase</em>（三十...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="【随笔】Git 高级篇 -- 远程与本地不一致导致提交冲突 git push --rebase（三十" href="/w/从前慢现在也慢/article/detail/491738" target="_blank">大家好，又见面了，我是夜阑的狗<em>git</em> <em>远程</em>和<em>本地</em><em>冲突</em>                               ...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Git长文，谁还不懂 Git ！" href="/w/不正经/article/detail/491693" target="_blank"><em>Git</em>长文<em>，</em>谁<em>还</em>不懂 <em>Git</em> <em>！</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Git长文，谁还不懂 Git ！" href="/w/不正经/article/detail/491693" target="_blank">01、认识一下<em>Git</em><em>！</em>—简介<em>Git</em>是当前最先进、最主流的分布式版本控制系统<em>，</em>免费、开源<em>！</em>核心能力就是版本控制。再具体一点...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="最佳AI实践｜如何在 Dify 用 Workflow 构建一个 Blog SEO AI 应用？_di" href="/w/羊村懒王/article/detail/493521" target="_blank">最佳<em>AI</em>实践｜如何在 <em>Dify</em> 用 <em>Workflow</em> 构建一个 <em>Blog</em> <em>SEO</em> <em>AI</em> 应用？_di...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="最佳AI实践｜如何在 Dify 用 Workflow 构建一个 Blog SEO AI 应用？_di" href="/w/羊村懒王/article/detail/493521" target="_blank">通过在 <em>Dify</em> 平台上运用 <em>Workflow</em> 来构建一个针对性强、结构清晰的 <em>Blog</em> <em>SEO</em> <em>AI</em> 应用，我们不仅能...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="Qt/C++音视频开发68-检查是否含有B帧/转码推流/拉流显示/监控拉流推流/海康大华宇视监控" href="/w/笔触狂放9/article/detail/491821" target="_blank">Qt/<em>C++</em><em>音视频</em>开发68-检查是否含有<em>B</em><em>帧</em>/转码<em>推流</em>/拉流显示/<em>监控</em>拉流<em>推流</em>/海康大华宇视<em>监控</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="Qt/C++音视频开发68-检查是否含有B帧/转码推流/拉流显示/监控拉流推流/海康大华宇视监控" href="/w/笔触狂放9/article/detail/491821" target="_blank">为什么需要判断视频文件是否含有<em>B</em><em>帧</em>，这个在<em>推流</em>的时候很容易遇到这个问题，一般来说，没有<em>B</em><em>帧</em>的视频文件，解码后的数据<em>帧</em>pt...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li><li><div class="NewTitle"><a title="article" class="cat" href="/article/list/1" target="_blank">article<i></i></a><a title="git教程：工作区、暂存区和版本库_git 暂存区 工作区 版本区" href="/w/我家自动化/article/detail/491708" target="_blank"><em>git</em>教程：<em>工作</em><em>区</em>、<em>暂存<em>区</em></em><em>和</em><em>版本</em>库_<em>git</em> <em>暂存<em>区</em></em> <em>工作</em><em>区</em> <em>版本</em><em>区</em>...</a></div><div class="NewsInfo"><div class="NewsDesc" style=""><a title="git教程：工作区、暂存区和版本库_git 暂存区 工作区 版本区" href="/w/我家自动化/article/detail/491708" target="_blank"><em>暂存<em>区</em></em>的存在使得您可以选择性地添加<em>和</em>提交文件，而不是将<em>工作</em><em>区</em>中的所有更改一次性提交到<em>版本</em>库。总结起来，<em>工作</em><em>区</em>是您当前编辑...
                </a><div class="article_click rice1" style="width: 240px;float: left;"><p class="operation-b-img operation-b-img-active"><i class="img-up  txclick" attc="upclick" attn="0"></i><span class="num">                    赞</span></p><p class="operation-b-img operation-b-img-active"><i class="img-down  txclick" attc="downclick" attn="0"></i><span class="num">踩</span></p></div></div><div style="clear: both;"></div></div></li></ul><div class="list_tools_top">相关标签</div><div class="list_tools_box"><ul><li><a title="kubernetes" rel="nofollow" href="/s?w=kubernetes" target="_self">kubernetes</a></li><li><a title="云原生" rel="nofollow" href="/s?w=云原生" target="_self">云原生</a></li><li><a title="容器" rel="nofollow" href="/s?w=容器" target="_self">容器</a></li><li><a title="运维" rel="nofollow" href="/s?w=运维" target="_self">运维</a></li><li><a title="docker" rel="nofollow" href="/s?w=docker" target="_self">docker</a></li><li><a title="leetcode" rel="nofollow" href="/s?w=leetcode" target="_self">leetcode</a></li><li><a title="dfs" rel="nofollow" href="/s?w=dfs" target="_self">dfs</a></li><li><a title="windows" rel="nofollow" href="/s?w=windows" target="_self">windows</a></li><li><a title="android studio" rel="nofollow" href="/s?w=android studio" target="_self">android studio</a></li><li><a title="java" rel="nofollow" href="/s?w=java" target="_self">java</a></li><li><a title="架构" rel="nofollow" href="/s?w=架构" target="_self">架构</a></li><li><a title="开发语言" rel="nofollow" href="/s?w=开发语言" target="_self">开发语言</a></li><li><a title="python" rel="nofollow" href="/s?w=python" target="_self">python</a></li><li><a title="大数据" rel="nofollow" href="/s?w=大数据" target="_self">大数据</a></li><li><a title="深度学习" rel="nofollow" href="/s?w=深度学习" target="_self">深度学习</a></li><li><a title="linux" rel="nofollow" href="/s?w=linux" target="_self">linux</a></li><li><a title="数据结构" rel="nofollow" href="/s?w=数据结构" target="_self">数据结构</a></li><li><a title="php" rel="nofollow" href="/s?w=php" target="_self">php</a></li><li><a title="redis" rel="nofollow" href="/s?w=redis" target="_self">redis</a></li><li><a title="缓存" rel="nofollow" href="/s?w=缓存" target="_self">缓存</a></li><li><a title="数据库" rel="nofollow" href="/s?w=数据库" target="_self">数据库</a></li><li><a title="布隆过滤器" rel="nofollow" href="/s?w=布隆过滤器" target="_self">布隆过滤器</a></li><li><a title="Bloom" rel="nofollow" href="/s?w=Bloom" target="_self">Bloom</a></li><li><a title="mysql" rel="nofollow" href="/s?w=mysql" target="_self">mysql</a></li><div style="clear: both;"></div></ul></div><div class="list_tools_top"></div></div></div></div><style type="text/css"></style><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/blog/css/phone.css?v=17352890" type="text/css"><script type="text/javascript"></script></div></div></div></div></div></div><style type="text/css">  /* footer css */
  .index006-cover-page-foot {
 
  background-color: #F7F7F7;
 
}
</style><link rel="stylesheet" href="https://cdn.wpsshop.cn/public/ads/css/ads.css?v=12890" type="text/css"><script type="text/javascript" src="https://cdn.wpsshop.cn/public/ads/js/ads.js?v=1890" ></script><div class="cppui-row-1_100 cppui-row-view-1  row_1_100 ui-draggable" style="display: block;"><div class="cppui-column-1_100-0-1 column-view-com cppui-column-1_100-0-view-1 ui-sortable"><div class="drag-item-show-view-1 footermsg_view_pic ui-draggable" style="display: block;"><div class="index006-cover-page-foot drag-item-hide-view-1"><p class="copyright">Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。
</p><div style="background-color:#F7F7F7; text-align:center; height:20px;padding-top:5px;"><a target="_blank" href="https://beian.mps.gov.cn/#/query/webSearch" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdnimages.wpsshop.cn/57public/skin/index/default/ui/images/beian_ghs.png" style="float:left;">  <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">闽ICP备14008679号</p></a>  <a href="https://www.wpsshop.cn/xml/w/%E6%88%91%E5%AE%B6%E8%87%AA%E5%8A%A8%E5%8C%96/article/detail/492603.xml"  target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a>    <a href="/xml/w/g007/article/detail/new.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a>    <a href="/site.xml" target="_blank" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="https://cdn.wpsshop.cn/public/blog/images/site.png" style="float:left;"></a></div></div></div></div></div><script type="text/javascript">var domain = document.domain;var hr=encodeURIComponent(window.location.href+'=='+document.referrer); document.write('<script src="https://ad.wpsshop.cn/admin.appflux?s=ad_flu_ind&fluxuserauto=yes&hr='+hr+'&p57weburl='+domain+'&p57usercode1='+domain+'&u=Vy1RJQhqAXUEMQNnAm0HaVVu&i='+p57ref("id")+'&r='+escape(document.referrer)+'"  language="JavaScript"><\/script>');function p57ref(id){var reg=new RegExp("(^|&)"+id+"=([^&]*)(&|$)");var ref=window.location.search.substr(1).match(reg);if(ref!=null)return unescape(ref[2]);return null;} </script></body></html>