<!--下拉框父組件--><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ā)過后，動(dòng)態(tài)改變了需要值   } }, components: {  oSelect,  //注冊(cè)組件 }}</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的動(dòng)態(tài)綁定--> {{ selectData.selectOptions[selectData.defaultIndex].context }}  <!--這里主要綁定選擇的數(shù)據(jù)--></h3><transition name="slide-down"><!--transition 實(shí)現(xiàn)下拉列表顯示隱藏時(shí)的動(dòng)畫--><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：動(dòng)態(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ù)為對(duì)象，否則就會(huì)報(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ù)，動(dòng)態(tài)傳給父組件需要的數(shù)據(jù)，這里為索引值  },  changeStatus(){   // 通過changeStatus事件動(dòng)態(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;}<!--下拉框顯示隱藏動(dòng)畫-->.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);}