vue实现多标签下拉输入框

H5推出的datalist元素可以和input很好的结合实现下拉输入框(非select),但是却没有原生支持多标签的添删功能,Vue.js很好的支持了:

Vue组件、使用方法都在代码里了。效果如下:

vue实现多标签下拉输入框

附上所有代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
    <link href="https://cdn.bootcss.com/bulma/0.6.1/css/bulma.min.css" rel="stylesheet">
    <style>
    .tags-input > ul {
        height: 16rem;
        overflow-y: scroll;
        border: 1px solid #ccc;
    }
    .tags-input li {
        padding: .25rem 1rem;
    }
    .tags-input li:hover {
        color: white;
        background: blue;
    }
    </style>
    <title>Document</title>
</head>
<body>
<div class="section" id="app">
    <tag-input :tags="tags" max="3"></tag-input>
</div>
<script>
Vue.component('tag-input', Vue.extend({
    props: ['tags', 'max'],
    template: '<div class="tags-input"><div class="input field is-grouped" v-on:click="popup=true" style="margin-bottom:0"><div class="control" v-for="(item,i) in selected" v-on:click.stop=""><div class="tags has-addons is-medium"><span class="tag is-link">{{ item }}</span><a v-on:click="move(item,false);" class="tag is-delete"></a></div></div></div><ul class="is-hoverable" v-show="popup"><li v-for="tag in tags" v-on:click="move(tag,true);popup=false;">{{ tag }}</li></ul></div>"tag in tags" v-on:click="move(tag,true);popup=false;">{{ tag }}</li></ul></div>',
    data: function () {
        return {
            popup: false,
            selected: [],
        };
    },
    methods: {
        move: function(item, flag) {
            var from = flag ? this.tags : this.selected;
            var to = flag ? this.selected : this.tags;
            if (!flag || to.length < this.max) {
                from.splice(from.indexOf(item), 1);
                to.push(item);
            }
        },
    }
}));
new Vue({
    el: '#app',
    data: {
        tags: [
            '标签1',
            '标签2',
            '标签3',
            '标签4',
            '标签5',
            '标签6',
            '标签7',
            '标签8',
            '标签9',
            '标签10',
            '标签11',
            '标签12',
        ]
    }
});
</script>
</body>
</html>
上一篇:花瓣


下一篇:关于360安全浏览器的分析以及奇虎360走向。。【个人原创】