功能实现了么?我用vue.js写了一个,希望对你有帮助。
js代码:
new Vue({
el: "#test2",
data: {
testList: [{ name: '1111111111111' }]
},
methods: {
add: function (name, event) {
//新增一行
this.testList.push({ name: '' });
setTimeout(function () {
//处理光标定位问题
$(event.target.parentNode).next().find('input').focus();
}, 50);
},
shift: function (item, event) {
if (item.name.length == 0) {
//删除一行
this.testList.splice(this.testList.indexOf(item), 1);
//处理光标定位问题
$(event.target.parentNode).prev().find('input').focus()
}
}
}
});
html代码:
<div class="row" id="test2">
<ul class="list-group">
<li class="list-group-item" v-for="(item,index) in testList">
{{index+1}}<b>.</b> <input type="text" v-model="item.name" v-on:keyup.enter="add('',$event)" v-on:keyup.8="shift(item,$event)" v-bind:autofocus="index+1==testList.length" /> <span v-show="item.name.length>0">X</span>
</li>
</ul>
</div>
效果图: