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
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
2、Arrays类排序数组
需求说明:正确使用Arrays的sort()方法为数组进行排序,效果如下图所示。降序排列的写法可以参考for(int i=scores.length-1;i>=0;i–){} package homework;import java.lang.reflect.Array; import java.util.Arrays; import java.util.Scanner;public class
JavaScript实现一个简单的网页换肤
.skin{     width:60px; height:60px; float:right; margin:2px; cursor:pointer;   }        function changeColor(c){      document.body.style.backgroundColor = c ;    }
7、查询商品价格
需求说明:正确使用while循环,根据“是否继续”和“商品编号”两个条件,反复查询所选商品的价格,显示效果如下图所示。 package 作业;import java.util.Scanner;public class 作业7查询商品价格 { public static void main(String[] args) { // TODO Auto-generated meth
使用jquery过滤器实现隔行变色效果
无标题文档 $(function(){ //选中第一个tr元素,设置背景颜色为黑色,字体颜色为白色(过滤器先用类选择器选中后在设定条件。一般是数组形式的,针对特定的一组元素进行设置) $("tr:eq(0)").css({ backgroundColor:"black", color:"white" }); //选中除了第一行以外(下标大于0)的tr元素中下标为奇数的tr,
ecshop物流查询插件
ecshop物流查询插件,效果如淘宝网。
jQuery_review之表单中的隔行变色以及关键字高亮显示
在很多项目中,当然可以避免使用table,而使用div来替代,但是为了能够快速的交付项目,而且对网络优化以及搜索引擎没有太高的妥协的话,我们当然可以使用喜闻乐见的表格来进行布局。使用表格布局非常适合项目团队中有很多都是新成员,技术尚未成熟到可以从容判断div的布局会带来什么问题的情况。下面是使用table进行布局实现表格中隔行变色以及关键字高亮显示的jQuery实现。     这
五、Java图形化界面设计——布局管理器之GridLayout(网格布局)
转自liujun13579的专栏 的博客,尊重并感谢原作者的付出!   网格布局特点: l  使容器中的各组件呈M行×N列的网格状分布。 l  网格每列宽度相同,等于容器的宽度除以网格的列数。 l  网格每行高度相同,等于容器的高度除以网格的行数。 l  各组件的排列方式为:从上到下,从左到右。 l  组件放入容器的次序决定了它在容器中的位置。 l  容器大小改变时,组件的相对位置不
JSP页面,脚本标签
///////////////////////////////////////////////////////////////////////////////////////////////////////////////// pageEncoding="GB18030"%> 使用文件包含include指令       &nbsp;
3、Arrays类排列字符
需求说明:正确使用Arrays类的sort()方法排列一组字符,并使用Arrays类的binarySearch(array, val)方法查找某个特殊字符在升序后数组中的位置,输出效果如下图所示。 package homework;import java.util.Arrays;public class 作业3Arrays类排列数符 { public static void main(Str
网格布局(计算器界面设计)
最终