ページ作成の過程で、ドロップダウンボックスコンポーネントがよく使用されますが、シャドウルートのためにネイティブのselectタグを使用すると不便な場合があります。
ShadowDOMのコンセプト
Shadow DOMはHTMLの標準であり、ブラウザー開発者が独自のHTMLタグ、CSSスタイル、および特定のjavascriptコードをカプセル化できるようにします。また、開発者がこのようなカスタムの第1レベルのタグを作成し、これらの新しいタグコンテンツを作成し、関連するAPIを作成できるようにします。 Webコンポーネントと呼ばれます。
shadow-root：ShadowDOMのルートノード;
shadow-tree：ShadowDOMに含まれる子ノードのツリー構造;
shadow-host：タグなどのShadowDOMのコンテナ要素;
shadow-DOMイベントはすべてホストにバインドされますオブジェクト。メインDOMを破壊するイベントは避けてください。
選択スタイルを変更する場合、影があるため、通常、内部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>
効果：
一緒に学び、一緒に進歩する-.-、間違えた場合はコメントを投稿できます