Dans le processus de création de page, des composants de liste déroulante sont souvent utilisés. Parfois, il n'est pas pratique d'utiliser la balise de sélection native en raison de la racine fantôme.
Concept Shadow DOM
Shadow DOM est une norme HTML. Il permet aux développeurs de navigateurs d'encapsuler leurs propres balises HTML, styles CSS et code javascript spécifique. Il permet également aux développeurs de créer des balises personnalisées de premier niveau comme celle-ci, de créer ces nouveaux contenus de balises et l'API associée est appelé Web Component.
shadow-root: le nœud racine de Shadow DOM;
shadow-tree: l'arborescence des nœuds enfants contenus dans Shadow DOM;
shadow-host: éléments conteneurs de Shadow DOM, tels que les balises;
les événements shadow-DOM sont tous liés à l'hôte objet. Évitez les événements qui détruisent le DOM principal.
Lors de la modification du style de sélection, à cause de l'ombre, nous ne pouvons généralement pas accéder au style div interne.
Utilisez div pour personnaliser la liste déroulante
La balise de sélection est pratique à utiliser pour nous, mais il y a des limitations, vous pouvez donc encapsuler une liste déroulante vous-même.
Exemple de code:
<!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>
effet:
Apprenez ensemble, progressez ensemble -.-, si vous faites une erreur, vous pouvez poster un commentaire