功能实现了么？我用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" />&nbsp;&nbsp;&nbsp;<span v-show="item.name.length>0">X</span>
        </li>
    </ul>
</div>

效果图：
图片说明

dayna123

急！前端如何做物流查询框，有相关的插件吗？效果如下图所示（请附上参考示例）谢谢！

1条回答

为你推荐