下拉框 组件 select-assembly

1.组件存在位置

2.组件

<template>
  <div class="a">
    <div class="first"  @click="handleDrop">
      <div class="left"><span>{{active>-1?list[active].label:"请选择"}}</span></div>
      <div class="right"><div :class="visible?'b1':'b'"></div></div>
    </div>
    <div class="z">
      <ul v-show="visible" >
        <li v-for="(item,index) in list" :class="index===active?'active':''" @click="choose(item,index)" :key="index">
          {{item.label}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    name: "mySelect",
    props:['list'],
    data() {
      return {
        visible: false,
        active:0
      }
    },
    methods: {
      choose(item,index){
        this.visible=false;
        if(this.active!==index){
          this.active=index;

          this.$emit("selected",{
            index:index,
            label:item.label,
            value:item.value
          })
        }

      },
      handleDrop(){
        this.visible=!this.visible
      },
      outClick(e){
        let dropRef= this.$el
        if(!dropRef.contains(e.target)&&this.visible){
          this.visible=false
        }
      }
    },

    mounted(){
      document.addEventListener('click',this.outClick)
    },
    destroyed(){
      document.removeEventListener('click',this.outClick)
    }

  }
</script>

<style scoped>
  .a{
    position: relative;
    /*width: 100%;*/
    display: inline-block;
    text-align: center;
    user-select: none;

    width: 130rpx;
    height: 45rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(77,86,161,0.4), inset 0rpx 0rpx 12rpx 0rpx rgba(173,182,255,0.7);
    border-radius: 4rpx;

    font-size: 24rpx;
    font-family: MicrosoftYaHei;
    color: #2572FF;
    line-height: 45rpx;
  }
  .z>ul{
    list-style: none;
    margin: 0;
    position: absolute;
    /*top:10px;*/
    padding-inline-start: 0;

    /*background-color: lightblue;*/
    left: 0;
    /*left 不包含border*/
    width: 100%;
    /*height: 420rpx;*/
    background: rgba(255,255,255,0.1);
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(77,86,161,0.4);
    border-radius: 4rpx;
    border: 2rpx solid;
    border-image: linear-gradient(360deg, rgba(52, 121, 255, 1), rgba(52, 121, 255, 0)) 2 2;
    backdrop-filter: blur(10px);
  }

  .z>ul>li{
    padding: 3px 0;
    cursor: pointer;

    /*width: 72rpx;*/
    /*height: 24rpx;*/
    font-size: 24rpx;
    font-family: MicrosoftYaHei;
    color: #999999;
    line-height: 60rpx;
  }
  .z{
    position: relative;
    z-index: 9999;
  }
  div>ul>li.active{
    background-color:#3A7CFF;
    color: #DEF1FF
  }
  .z>ul>li:hover{
    background-color: #3A7CFF;
    color: #DEF1FF
  }

  /***  第一行显示适配  ****/
  .first{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 45rpx;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(77,86,161,0.4), inset 0rpx 0rpx 12rpx 0rpx rgba(173,182,255,0.7);
    border-radius: 4rpx;
    border: 1rpx solid #2572FF;
  }
  .left{
    width: 80%;
  }
  .right{
    width: 20%;
    align-items: center;
    display: flex;
    justify-content: space-around;
  }
  .b{
    background-image: url("../../assets/images/downSelect.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 16rpx;
    height: 11rpx;
  }

  .b1{
    background-image: url("../../assets/images/upSelect.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 16rpx;
    height: 11rpx;
  }
</style>

 3.引用及传值

import selectAssembly from "../../../components/select-title/selectAssembly";

export default {
  components:{
    bulletBox,
    selectAssembly
  },
}

<select-assembly @selected="selected" :list="choose"></select-assembly>

  methods: {
    selected:function (o){
      // console.log(o)
      this.city=o.label
    },
  }

data() {
    return {
      city: '溧阳市',
      choose: [
        {
          label: '溧阳市',
          value: '1',
          key: '1'
        },
        {
          label: '金坛区',
          value: '2',
          key: '2'
        },
        {
          label: '武进区',
          value: '3',
          key: '3'
        },
        {
          label: '新北区',
          value: '4',
          key: '4'
        },
        {
          label: '天宁区',
          value: '5',
          key: '5'
        },
        {
          label: '钟楼区',
          value: '6',
          key: '6'
        },
        {
          label: '经开区',
          value: '7',
          key: '7'
        }
      ],
    }
}