在页面制作的过程中，经常需要使用到下拉框组件，有时候使用原生的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标签固然方便了我们使用，但是存在局限性，所以可以自己封装一个下拉框。
代码示例：
<!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>
效果：
一起学习，一起进步 -.- ，如有错误，可以发评论