下拉选择器组件

展示

当鼠标放置下拉选择器自动弹出

代码

<template>
  <div class="divInput" @mouseover="hover = true" @mouseleave="hover = false">
    <div class="input" :class="{'hover': hover}" @click="openValue" >
      <div v-if="!props.slotTitle">
        <span>{{ value }}</span>
        <el-icon><ArrowDown /></el-icon>
      </div>
      <slot name="title"></slot>
    </div>
    <div class="list" v-show="hover">
      <ul v-if="props.options" :style="{width: listWidth}">
        <li
          @click="getvalue(item)" 
          v-for="item in props.options" 
          :value="item.value"
          :key="item.label"
        >{{ item.label }}</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, Ref } from 'vue'

interface option {
  value: string,
  label: string
}

let show:Ref<boolean> = ref(false)
let hover:Ref<boolean> = ref(false)
let value:Ref<string> = ref('')

function openValue(){
  show.value = !show.value
}

function getvalue(item) {
  emit('change', item)
  show.value = false
  if(props.slotTitle) return
  if(props.title) return
  value.value = item.label
}

const props = defineProps({
  options: {
    type: Array<option>,
    default: []
  },
  title: {
    type: String,
    default: ''
  },
  defaultValue: {
    type: String,
    default: ''
  },
  listWidth: {
    type: String,
    default: 'auto'
  },
  slotTitle: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits<{
  (e: 'change', val: option): void
}>()

onMounted(()=>{
  if(props.defaultValue) value.value = props.defaultValue
  else if(props.title) value.value = props.title
  else value.value = props.options[0]?.label
})

</script>

<style lang="scss" scoped>
.divInput{
  height: 100%;
}
  ul li{
    list-style: none;
    border: none;
  }
  .hover {
    @include bg_color('bg-color');
  }
  .input{
    position: relative;
    height: 35px;
    line-height: 35px;
    padding: 2.5px 6px;
    @include color('font-light-color');
  }
  .list{
    position: relative;
    z-index: 10000;
    @include bg_color('bg-color');
    ul {
      position: absolute;
      top: 0;
      left: 0;
      margin: 0;
      padding: 0;
      max-height: 270px;
      overflow-y: auto;
      overflow-x: hidden;
      @include bg_color('bg-color');
      @include color('font-light-color2');
    }
    li {
      width: 100%;
      height: 29px;
      cursor: pointer;
      line-height: 29px;
      margin: 0;
      padding: 0;
      padding-left: 8px;
      &:hover{
        @include bg_color('select-color');
      }
    }
  }
</style>

属性

属性名	描述
options	下拉列表（option数组）
title	选择器占位符（不会根据用户选择而改变），没有title的时候，默认为下拉列表第一个值，且会根据用户选择改变
defaultValue	设置初始值
listWidth	设置下拉列表的宽度
slotTitle	是否使用自定义下拉选择器占位符

ps：option定义为抽象对象，如下代码

interface option {
  value: string,
  label: string
}

方法

方法名	描述
change	当用户点击选择时触发（item：返回option实例）