vue 编辑

点击文字修改

<div class="baseInfo">
   <p class="title">基本信息</p>
   <p class="el-icon-folder-checked" @click="saveElement()" :plain="true">保存</p>
</div>
<div class="order_info" v-for="item in orderData" @click="ShowElement($event)">
   <p><span>用户名：</span><span class="el-icon-edit-outline" >{{item.name}}</span></p>
   <p><span>手机号：</span><span class="el-icon-edit-outline">{{item.phone}}</span></p>
   <p><span>类型：</span><span class="el-icon-edit-outline">{{item.status}}</span></p>
</div>

　　

 ShowElement(event) {
            var el=event.target
            var oldhtml = event.target.innerHTML;
            if (oldhtml.indexOf('type="text"') > 0) {
              return;
            }
            var newobj = document.createElement('input');
            newobj.type = 'text';
            newobj.value = oldhtml;
            newobj.onblur = function() {
              el = this.value == oldhtml ? oldhtml : this.value;
            }
            el.innerHTML = '';
            el.appendChild(newobj);
            newobj.setSelectionRange(0, oldhtml.length);
            newobj.focus();
          },

　用到的主要点是：　

var el = e.target; //当前元素，可修改（能够用此方法获取到他的子元素等）

var el = e.currentTarget;//当前元素，不可修改（不能用此方法获取到他的子元素等）