自定义一个适应vue的下拉框组件

在页面制作的过程中，经常需要使用到下拉框组件，有时候使用原生的select标签十分不便，因为存在shadow root。

Shadow DOM概念

Shadow DOM是HTML的一个规范 ，它允许浏览器开发者封装自己的HTML标签、CSS样式和特定的javascript代码，同时也可以让开发人员创建类似这样的自定义一级标签，创建这些新标签内容和相关的的API被称为Web Component。

shadow-root：Shadow DOM的根节点；
shadow-tree：Shadow DOM包含的子节点树结构；
shadow-host：Shadow DOM的容器元素，如：标签；

shadow-DOM的事件全部绑定到了宿主对象上面。避免破坏主DOM的事件。

在修改select样式时，因为shadow的存在，我们通常访问不到内部的div样式。

使用div自定义下拉框

select标签固然方便了我们使用，但是存在局限性，所以可以自己封装一个下拉框。

代码示例：

	
		
		

		

		
	
	

		

			

				

					
					
 {
    { annexTitle }} 
					
					

				
				

				
					

						

							{
    { item.FileName }}
						
					
				
			
		

		

	

效果：

一起学习，一起进步 -.- ，如有错误，可以发评论