Vue封装select下拉组件

Posted 2020-12-06 z-j-c

首先新建一个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-width: 80px;
 87     width: 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     width: 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     width: 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-width: 80px;
122     width: 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-width: 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>