vue自定义下拉框组件

Posted 2020-11-22 pending

  1 创建下拉框组件//Selects.vue

  1 //Selects.vue
  2 <template>
  3   <div class="selects">
  4     <div
  5       :class="{selects0show: !isshow,selects0hade: isshow}"
  6       class="selects0"
  7       @click="isshow=!isshow"
  8     >
  9       <p ref="mybox">请选择</p>
 10       <span>
 11         <img src="@/assets/home/z_x_jt.png" alt srcset />  //右边箭头图片 素材在底部
 12       </span>
 13     </div>
 14     <div ref="myselect" :class="{show: !isshow,hade: isshow}" class="sel">
 15       <div
 16         @click="cutValue1"
 17         ref="mybox1"
 18         :class="{borders:num ==1}"
 19         :style="{display: num >=1?‘block‘:‘none‘}"
 20       >{{selects1}}</div>
 21       <div
 22         @click="cutValue2"
 23         ref="mybox2"
 24         :class="{borders:num ==2}"
 25         :style="{display: num >=2?‘block‘:‘none‘}"
 26       >{{selects2}}</div>
 27       <div
 28         @click="cutValue3"
 29         ref="mybox3"
 30         :class="{borders:num ==3}"
 31         :style="{display: num >=3?‘block‘:‘none‘}"
 32       >{{selects3}}</div>
 33       <div
 34         @click="cutValue4"
 35         ref="mybox4"
 36         :class="{borders:num ==4}"
 37         :style="{display: num >=4?‘block‘:‘none‘}"
 38       >{{selects4}}</div>
 39       <div
 40         @click="cutValue5"
 41         ref="mybox5"
 42         :class="{borders:num ==5}"
 43         :style="{display: num >=5?‘block‘:‘none‘}"
 44       >{{selects5}}</div>
 45     </div>
 46   </div>
 47 </template>
 48 
 49 <script>
 50 export default {
 51   props: {
 52     num: String, //显示多少个下拉框
 53     selects1: String, //列表里的文字
 54     selects2: String,
 55     selects3: String,
 56     selects4: String,
 57     selects5: String
 58   },
 59   data() {
 60     return {
 61       isshow: true //控制下拉框显示及隐藏
 62     };
 63   },
 64   methods: {
 65     //点击换文字的方法
 66     cutValue1() {
 67       this.$refs.mybox.innerText = this.$refs.mybox1.innerText;
 68       this.isshow = true;
 69       let num = 1;
 70       this.$emit("va", num, this.$refs.mybox.innerText);
 71     },
 72     cutValue2() {
 73       this.$refs.mybox.innerText = this.$refs.mybox2.innerText;
 74       this.isshow = true;
 75       let num = 2;
 76       this.$emit("va", num, this.$refs.mybox.innerText);
 77     },
 78     cutValue3() {
 79       this.$refs.mybox.innerText = this.$refs.mybox3.innerText;
 80       this.isshow = true;
 81       let num = 3;
 82       this.$emit("va", num, this.$refs.mybox.innerText);
 83     },
 84     cutValue4() {
 85       this.$refs.mybox.innerText = this.$refs.mybox4.innerText;
 86       this.isshow = true;
 87       let num = 4;
 88       this.$emit("va", num, this.$refs.mybox.innerText);
 89     },
 90     cutValue5() {
 91       this.$refs.mybox.innerText = this.$refs.mybox5.innerText;
 92       this.isshow = true;
 93       let num = 5;
 94       this.$emit("va", num, this.$refs.mybox.innerText);
 95     }
 96   }
 97 };
 98 </script>
 99 
100 <style lang="less" scoped>
101 //显示下拉框
102 .show {
103   display: block;
104 }
105 //隐藏下拉框
106 .hade {
107   display: none;
108 }
109 //点击时改变选择框的边框颜色
110 .selects0show {
111   border: 1px solid #01be6e;
112 }
113 //恢复边框颜色
114 .selects0hade {
115   border: 1px solid #e4e4e4;
116 }
117 //最后一个下拉框底部加边框
118 .borders {
119   border-bottom: 1px solid #01be6e !important;
120 }
121 .selects {
122   width: 100%;
123   height: 100%;
124   .selects0 {
125     width: 100%;
126     height: 100%;
127     display: flex;
128     justify-content: space-between;
129     align-items: center;
130     p {
131       line-height: 100%;
132       display: inline;
133       color: #666666;    //字体颜色
134       font-size: 15px;  //字体大小
135       padding-left: 10px;
136     }
137     img {
138       margin-right: 10px;
139       transform: translateY(-2px);
140     }
141   }
142   .sel {
143     width: 100%;
144     height: 100%;
145     div {
146       width: 100%;
147       height: 100%;
148       display: flex;
149       justify-content: space-between;
150       align-items: center;
151       line-height: 35px;
152       border: 1px solid #01be6e;  //下拉框边框颜色
153       border-top: none;
154       padding-left: 10px;
155       border-bottom: none;   //如果下拉框需要下边框 注释这行
156       background: white;
157     }
158     div:hover {
159       background: #01be6e;  //鼠标移到下拉框时的背景色
160       color: white; //鼠标移到下拉框时的字体颜色
161     }
162     .selects0:hover {
163       background: white;
164     }
165   }
166 }
167 
168 
169 注：需要改背景色，边框色，字体颜色 上面有注释
170 </style>

  图片素材

 

//使用下拉框组件

 1  //注：下拉框组件的宽高依赖于组件的父盒子 
 2  <template>
 3  <div class="t_selects">
 4          <!-- 使用下拉框组件 -->
 5          <Myselects
 6          //@va是子组件传给父组件的事件 有两个参数（当前点击下拉框的索引，当前点击下拉框里面的文字）
 7          @va="sunValue"   
 8          //num是指定下拉框的个数 最多为5个
 9          num="3"
10          //selects1-selects5 是自定义下拉框1-5里面的内容
11          :selects1="selects1"
12          :selects2="selects2"
13           :selects3="selects3"
14          ></Myselects>
15  </div>
16  </template>
17  
18   <script>
19   import Selects from "@/components/Selects";
20   export default {
21  data() {
22     return {
23       selects1: "列表1",
24       selects2: "列表2",
25       selects3: "列表3",
26       }
27       }
28   components: {
29     Myselects: Selects
30   },
31   methods: {
32     //拿到子组件下拉框里面的索引及内容  参数(当前点击下拉框的索引，当前点击下拉框里面的文字)
33     sunValue(index,val) {
34       console.log(index,val);
35     }
36     }
37     }
38  </script>
39  //定义父盒子的宽高
40  <style>
41  .t_selects {
42     width: 300;
43     height: 35px;
44     z-index: 1000;
45    }
46  </style>

效果图：

 

 

 

 

 

不喜勿喷