首先新建一个Input.vue组件
1 <template>
2 <div class="selectWrap">
3 <div class="select-wrapper">
4 <div class="select" @click = "triggerOption">
5 <div class="select-content">{{selectContent.text}}</div>
6 <div class="triangle-wrapper">
7 <div id="triangle-down"></div>
8 </div>
9 </div>
10 <div class="option-wrapper" style="display: none;">
11 <!-- 渲染父组件传来的值 -->
12 <div class="option-item" v-for = "(item,index) in subject" :key="index" @mouseout="out($event)" @mouseover="move($event)" @click = "choose(item)">{{item.text}}</div>
13 </div>
14 </div>
15 </div>
16 </template>
17 <script>
18 export default{
19 props:{
20 selectWidth:{
21 type:Number,
22 default:100,
23 },
24 // 接受父组件传过来的值
25 subject:{
26 type:Array
27 },
28 selectContent:{
29 type:Object,
30 default:function(){
31 return {value:0,text:"请选择"}
32 }
33 },
34 },
35 mounted(){
36 document.querySelector(".selectWrap").style.width = this.selectWidth+"px";
37 },
38 computed:{
39 optionWrapper(){
40 return document.querySelector(".option-wrapper");
41 },
42 selectCon(){
43 return document.querySelector(".select-content");
44 },
45 subjectList(){
46 return document.getElementsByClassName("option-item");
47 },
48 },
49 methods:{
50 move(event){
51 for(var item of this.subjectList){
52 item.classList.remove("hover");
53 }
54 event.currentTarget.classList.add("hover");
55 },
56 out(event){
57 event.currentTarget.classList.remove("hover");
58 },
59 triggerOption(){
60 if (this.optionWrapper.style.display == "none") {
61 this.optionWrapper.style.display = "block";
62 }else{
63 this.optionWrapper.style.display = "none";
64 }
65 for(var item of this.subjectList){
66 if (item.innerHTML == this.selectContent.text) {
67 item.classList.add("hover");
68 }else{
69 item.classList.remove("hover");
70 }
71 }
72 },
73 choose(item,value){
74 this.selectContent.text = item.text;
75 this.optionWrapper.style.display = "none";
76 this.$emit("changeSelect",this.selectContent.text,this.selectContent.value);
77 }
78 },
79 }
80 </script>
81 <style>
82 .select{
83 position: relative;
84 overflow: hidden;
85 padding-right: 10px;
86 min- 80px;
87 100%;
88 height: 20px;
89 line-height: 20px;
90 border: 1px solid #000;
91 cursor: default;
92 font-size: 13px;
93 }
94 .select-content{
95 text-align: left;
96 }
97 .triangle-wrapper{
98 position: absolute;
99 right: 0;
100 top: 50%;
101 transform: translateY(-50%);
102 18px;
103 height: 20px;
104 background-color: #fff;
105 cursor: default;
106 }
107 #triangle-down{
108 position: absolute;
109 right: 5px;
110 top: 50%;
111 transform: translateY(-50%);
112 0;
113 height: 0;
114 border-left: 3px solid transparent;
115 border-right: 3px solid transparent;
116 border-top: 6px solid #000;
117 }
118 .option-wrapper{
119 position: relative;
120 overflow: hidden;
121 min- 80px;
122 100%;
123 border-right: 1px solid #000;
124 border-bottom: 1px solid #000;
125 border-left: 1px solid #000;
126 }
127 .option-item{
128 min- 80px;
129 height: 20px;
130 line-height: 20px;
131 padding-right: 10px;
132 text-align: left;
133 cursor: default;
134 }
135 .hover{
136 background-color: rgb(30,144,255);
137 color:#fff !important;
138 }
139 </style>
在父组件中调用Input组件，并且进行传值
<template>
<div>
// 向Input进行传值
<Input v-bind:subject="subject" />
</div>
</template>
<script>
import Input from "../src/components/Input";
export default {
name: "App",
components: {
Input
},
data() {
return {
subject: [
{
value: "1",
text: "111"
},
{
value: "2",
text: "222"
},
{
value: "3",
text: "333"
},
{
value: "4",
text: "444"
}
]
};
}
};
</script>
<style lang="less">
</style>
