2 dayna123 dayna123 于 2017.09.13 18:32 提问

急!前端如何做物流查询框,有相关的插件吗?效果如下图所示(请附上参考示例)谢谢!

图片说明

1个回答

song_jiang_long
song_jiang_long   2017.09.15 09:38

功能实现了么?我用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>

效果图:
图片说明

Csdn user default icon
上传中...
上传图片
插入图片