}
},
}</script>
<style>
.selectWrap{ /*select的宽度*/
width: 100px;
}
.select{
position: relative;
overflow: hidden;
padding-right: 10px;
min-width: 80px;
width: 100%;
height: 20px;
line-height: 20px;
border: 1px solid #000;
cursor: default;
font-size: 13px;
}
.select-content{
text-align: left;
}
.triangle-wrapper{
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 20px;
background-color: #fff;
cursor: default;
}
#triangle-down{
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
border-top: 6px solid #000;
}
.option-wrapper{
position: relative;
overflow: hidden;
min-width: 80px;
width: 100%;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
.option-item{
min-width: 80px;
height: 20px;
line-height: 20px;
padding-right: 10px;
text-align: left;
cursor: default;
}
.hover{
background-color: rgb(30,144,255);
color:#fff !important;
}</style>
事实上，当你完成这段代码时，就已经完成了这一个组件。放到平时，我可能就直接把这段代码放到业务代码里直接用了。但既然是封装组件，我们肯定要把它抽出来了。首先我们先要思考一下，如果我们需要把这个组件抽出来，有哪些值需要父组件提供给我们呢？
相信大家一眼就能看出来，subject和selectContent这两个data是需要父组件通过props传进来的。但还有别的吗？作为一个select，父组件如果只能控制内容是不是管的有点太少了？可不可以让父组件来管理select的宽度？高度？字体大小样式等等？答案是肯定的。父组件传的值越多，子组件的耦合就越低。下面，我们对代码进行微调
<template>
......</template>
<script>
export default{ props:["subject","selectContet"，"selectWidth”],
mounted(){ document.querySelector(".selectWrap").style.width =
this.selectWidth+"px";
},
computed:{
optionWrapper(){ return document.querySelector(".option-wrapper");
},
selectCon(){ return document.querySelector(".select-content");
},
subjectList(){ return document.getElementsByClassName("option-item");
},
},
methods:{
......
choose(item){ this.selectContent.text = item.text; this.optionWrapper.style.display = "none";
}
},
}</script>
