Customize a drop-down box component that adapts to vue

In the process of page production, drop-down box components are often used. Sometimes it is very inconvenient to use the native select tag because of the shadow root.

Shadow DOM concept

Shadow DOM is a standard of HTML. It allows browser developers to encapsulate their own HTML tags, CSS styles and specific javascript code. It also allows developers to create custom first-level tags like this, create these new tag content and The related API is called Web Component.

Insert picture description here

shadow-root: the root node of Shadow DOM;
shadow-tree: the tree structure of child nodes contained in Shadow DOM;
shadow-host: container elements of Shadow DOM, such as tags;
Insert picture description here
shadow-DOM events are all bound to the host object. Avoid events that destroy the main DOM.

When modifying the select style, because of the shadow, we usually cannot access the internal div style.

Use div to customize the drop-down box

The select tag is convenient for us to use, but there are limitations, so you can encapsulate a drop-down box yourself.

Code example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			/* 三角形图标 */
			.imgthree {
				margin-top: 17px;
				width: 6px;
				height: 6px;
				background: url(../img/shape.png) 0px 0px;
				background-repeat: no-repeat;
				float: left;

			}

			.imgthree2 {
				animation: imgthreeanimation2 0.5s forwards;
			}

			@keyframes imgthreeanimation2 {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(180deg);
				}
			}
			/*  重新写一个下拉框组件  */
			.divSelect{
			    /*width:100%;*/
			    height:100%;
			
			    font-family: MicrosoftYaHei-Bold;
				font-size: 14px;
				font-weight: normal;
				font-stretch: normal;
				letter-spacing: 0px;
				color: #333333;
			
			    
			}
			.divSelectinput {
			    margin-top:2px;
			    width:130px;
			    height:40px;
				border:1px solid #131D88;
			    cursor:pointer;
			}
			.divSelectinput .selectinfos{
			    width:120px;
			    height:40px;
			    text-align:center;
			    line-height:40px;
			    white-space:nowrap;
			    text-overflow:ellipsis;
				overflow:hidden ;
			    list-style:none;
			    float:left;
			}
			
			/* 出现的下拉列表 */
			.Selectlist{
			    position:absolute;
				margin-top: 10px;
			    background-color:#ffffff;
			    z-index:800;
			    border-radius:5px;
			    border:1px solid #E4E7ED;
			}
			.Selectlist>ul{
				margin: 0;
				padding: 0;
			}
			.divSelect li{
			    width:238px;
			    padding:0 10px;
			    height:34px;
			    line-height:34px;
			    white-space:nowrap;
			    /*background-color:#ffffff;*/
			    white-space:nowrap;
				text-overflow:ellipsis;
				overflow:hidden ;
			    list-style:none;
			    cursor:pointer;
			}
			.divSelect li:hover{
			    color: #409EFF;
			    font-weight: 700;
			    background-color:#F5F7FA;
			}
		</style>

		<title></title>
	</head>
	<body>

		<div id="select_module">
			<div class="divSelect">
				<div class="divSelectinput">
					<!-- 选中后的内容 -->
					<div class="selectinfos" :title="annexTitle"> {
   
   { annexTitle }} </div>
					<!-- 三角形图标 -->
					<div class="imgthree"></div>
				</div>
				<div class="Selectlist" v-show="false">
				<!-- 下拉框列表 -->
					<ul>
						<li v-for="(item,index) in Files" :key="item.value" @click="changeSelect(item.FileName)">
							{
   
   { item.FileName }}
						</li>
					</ul>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			var vm = new Vue({
				el:"#select_module",
				data:{
					annexTitle: '请选择',
					Files: [
						{
							FileName: '第一个：法律',
							value: 1,
						},
						{
							FileName: '第二个：经济',
							value: 2,
						},
						{
							FileName: '第三个：政治',
							value: 3,
						},
						{
							FileName: '第四个：安全',
							value: 4,
						},
					],
				},
				methods:{
				//点击选择下拉框中的某一选项
					changeSelect:function(FileName){
						this.annexTitle = FileName;
					}
				}

			})

			window.onload = function() {
				var aSelect = true;
				//点击页面其他地方收起下拉列表
				document.onclick = function(e) {
					if (aSelect) {
						if (document.getElementsByClassName('Selectlist')[0] != undefined) {
							document.getElementsByClassName('Selectlist')[0].style.display = 'none'
							document.getElementsByClassName('imgthree')[0].classList.remove('imgthree2');
						}

					}
					aSelect = true;
				}
				if (document.getElementsByClassName('divSelectinput')[0] != undefined) {
					document.getElementsByClassName('divSelectinput')[0].onclick = function() {
						document.getElementsByClassName('Selectlist')[0].style.display = 'block';
						document.getElementsByClassName('imgthree')[0].classList.add('imgthree2');
						aSelect = false;
					}
				}

			}
		</script>

	</body>
</html>

effect:
Insert picture description here

Learn together, make progress together -.-, if you make a mistake, you can post a comment