H5推出的datalist元素可以和input很好的结合实现下拉输入框(非select),但是却没有原生支持多标签的添删功能,Vue.js很好的支持了:
Vue组件、使用方法都在代码里了。效果如下：
附上所有代码：
<!DOCTYPE html><html lang="en"><head> < charset="UTF-8"> < name="viewport" content="width=device-width, initial-scale=1.0"> < http-equiv="X-UA-Compatible" content="ie=edge"> < src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></ > < 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> < >Document</ ></head><body><div class="section" id="app"> <tag-input :tags="tags" max="3"></tag-input></div>< >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- ">{{ 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', ] }});</ ></body></html>继续阅读与本文标签相同的文章
上一篇 :
Centos禁用多次登陆失败IP
下一篇 :
欧工软装获银河系创投3000万元A+轮融资
-
快速上手物联网解决方案（2）—— 云平台
2026-05-26栏目： 教程
-
快速上手物联网解决方案（3）—— 设备端
2026-05-26栏目： 教程
-
快速上手物联网解决方案（4）—— 数据转储
2026-05-26栏目： 教程
-
快速上手物联网解决方案（5）—— DataV
2026-05-26栏目： 教程
-
Python网络编程（epoll内核监听，多任务多进程）
2026-05-26栏目： 教程