点击文字修改
<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;//当前元素,不可修改(不能用此方法获取到他的子元素等)