<!--下拉框父組件-->
<template>
 <div id="app">
  <oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect>
  <!--
  selectData: 傳入父組件需要傳入的數(shù)據(jù)；格式:childDataName="parentDataName";
  onChangeOption： 子組件觸發(fā)的事件名，通過觸發(fā)一個(gè)事件從而來接收子組件的傳過來的數(shù)據(jù)
  格式：@childEventName="parentEventName"
  注：可寫多個(gè)
  -->
 </div>
</template>
<script>
import oSelect from "@/components/select.vue"; //引入組件
export default{
 name: 'App',
 data(){
  return {
   selectData: {
    defaultIndex: 0, //默認(rèn)選中的是第幾個(gè)
    selectStatus: false, // 通過selectStatus來控制下拉框的顯示/隱藏
    selectOptions: [ // 下拉框中的數(shù)據(jù) name這樣的參數(shù)，看項(xiàng)目是否有需求，可自行修改
     {
      name: 'time',
      context: '按時(shí)間排序'
     },
     {
      name: 'view',
      context: '按瀏覽量排序'
     },
     {
      name: 'like',
      context: '按點(diǎn)贊數(shù)排序'
     },
     {
      name: 'reply',
      context: '按回復(fù)數(shù)排序'
     },
     {
      name: 'reward',
      context: '按打賞數(shù)排序'
     }
    ]
   }
  }
 },
 methods:{
  onChangeOption(index){
  //子組件通過一個(gè)事件來觸發(fā)onChangeOption方法，從而傳遞一系列參數(shù)，這里的index就是傳過來的
   this.selectData.defaultIndex = index;
  //觸發(fā)過后，動態(tài)改變了需要值 
  }
 },
 components: {
  oSelect,
  //注冊組件
 }
}
</script>

<template>
<!-- 下拉框組件html結(jié)構(gòu)（子組件） -->
<div class="select-box" @click="changeStatus">
<!-- changeStatus事件: 點(diǎn)擊實(shí)現(xiàn)下拉框的顯示和隱藏 -->
<h3 class="select-title"
 :name="selectData.selectOptions[selectData.defaultIndex].name"
 :class="{'select-title-active': selectData.selectStatus}"> 
 <!--屬性name class的動態(tài)綁定-->
 {{ selectData.selectOptions[selectData.defaultIndex].context }} 
 <!--這里主要綁定選擇的數(shù)據(jù)-->
</h3>
<transition name="slide-down">
<!--transition 實(shí)現(xiàn)下拉列表顯示隱藏時(shí)的動畫-->
<ul class="select-options" v-show="selectData.selectStatus">
 <li class="select-option-item" 
  v-for="(item,index) in selectData.selectOptions"
  @click="EmitchangeOption(index)"
  :class="{'select-option-active':selectData.defaultIndex===index}">
  <!--
   v-for：循環(huán)數(shù)據(jù)渲染下拉列表
   EmitchangeOption：點(diǎn)擊下拉列表事件
   class：動態(tài)綁定被選中的數(shù)據(jù)
  -->
  {{ selectData.selectOptions[index].context }}
  
 </li>
 <div class="arrow-top"></div>
</ul> 
</transition> 
</div> 
</template>
<script>
export default{
 name: 'oSelect', //建議大家都寫上這個(gè)，有利于我們知道這個(gè)組件叫什么名字
 //通過props來接收父組件傳過來的數(shù)據(jù)
 props:{
  selectData: {
  type: Object //規(guī)定傳過來的數(shù)據(jù)為對象，否則就會報(bào)錯(cuò)（其實(shí)這樣寫就是規(guī)避錯(cuò)誤和良好的習(xí)慣）
  }
 },
 methods:{
  EmitchangeOption(index){
  this.$emit('changeOption',index);
   // 通過點(diǎn)擊事件觸發(fā)EmitchangeOption函數(shù)，傳入當(dāng)前點(diǎn)擊下拉列表中的索引值index
   // 下拉框通過emit方法觸發(fā)父組件中changeOption函數(shù)，動態(tài)傳給父組件需要的數(shù)據(jù)，這里為索引值
  },
  changeStatus(){
   // 通過changeStatus事件動態(tài)改變selectStatus的值，從而控制下拉框的顯示隱藏
  this.selectData.selectStatus = !this.selectData.selectStatus
  }
 }
}
</script>

.select-box{
 position: relative;
 max-width: 250px;
 line-height: 35px;
 margin: 50px auto;
}
.select-title{
 position: relative;
 padding: 0 30px 0 10px;
 border: 1px solid #d8dce5;
 border-radius: 5px;
 transition-duration: 300ms;
 cursor: pointer;
}
.select-title:after{
 content: '';
 position: absolute;
 height: 0;
 width: 0;
 border-top: 6px solid #d8dce5;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 right: 9px;
 top: 0;
 bottom: 0;
 margin: auto;
 transition-duration: 300ms;
 transition-timing-function: ease-in-out;
}
.select-title-active{
 border-color: #409eff;
}
.select-title-active:after{
 transform: rotate(-180deg);
 border-top-color: #409eff;
}
.select-options{
 position: absolute;
 padding:10px 0;
 top: 45px;
 border:1px solid #d8dce5;
 width: 100%;
 border-radius: 5px;
}
.select-option-item{
 padding:0 10px;
 cursor: pointer;
 transition-duration: 300ms;
}
.select-option-item:hover,.select-option-active{
 background: #f1f1f1;
 color: #409eff;
}
<!--箭頭css-->
.arrow-top{
 position: absolute;
 height: 0;
 width: 0;
 top: -7px;
 border-bottom: 7px solid #d8dce5;
 border-left: 7px solid transparent;
 border-right: 7px solid transparent;
 left: 0;
 right: 0;
 margin: auto;
 z-index: 99;
}
.arrow-top:after{
 content: '';
 position: absolute;
 display: block;
 height: 0;
 width: 0;
 border-bottom: 6px solid #fff;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 left: -6px;
 top: 1px;
 z-index: 99;
}
<!--下拉框顯示隱藏動畫-->
.slide-down-enter-active,.slide-down-leave{
 transition: all .3s ease-in-out;
 transform-origin:0 top;
 transform: scaleY(1);
}
.slide-down-enter{
 transform: scaleY(0);
}
.slide-down-leave-active{
 transition: all .3s ease-in-out;
 transform-origin:0 top;
 transform: scaleY(0);
}