思路:页面正常渲染文本,当点击文本的时候把当前点击的文本区域置为 input 组件, input失去blur焦点的时候 再改变为 text 文本
经测试这里做了2万个,无卡顿
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style type="text/css"> .input { width: 100px; } .input input { height: 54px; text-align: center; font-size: 16px; border: 0; } .input-c { border: 1px solid #eee; widows: 100px; float: left; margin-top: 20px; margin-right: 20px; width: 100px; text-align: center; } .input-text { width: 100px; height: 54px; line-height: 54px; margin: 0; } .activeInput input { color: #f00; } </style> </head> <body> <div id="app"> <div v-for="(item, i) in dataList" class="input-c"> <p v-if="item.type == 'text'" class="input-text" @click="text_fun($event,i)" data-value="item">{{item.value}}</p> <el-input v-if="item.type == 'input'" type="text" @blur="input_fun(i)" v-bind:class="['input',{ 'activeInput' : focusIndex === i}]" v-model="item.value" placeholder="内容"></el-input> </div> </div> </body> <!-- import Vue before Element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <script> new Vue({ el: '#app', data: function() { return { dataList:[], } }, mounted() { this.add(); }, methods:{ text_fun: function(e, index) { let p = e.target.parentElement this.focusIndex = index; this.dataList[index]['type'] = 'input'; this.$nextTick(v=>{ p.firstElementChild.firstElementChild.focus(); }); }, input_fun: function(index) { this.dataList[index]['type'] = 'text'; }, add:function(){ var i = 0; while(i <= 10000) { this.dataList.push({ value: i, type: 'text', }); i++; } } } }) </script> </html>