基于vue3，popperjs下拉框简易实现

<template>
  <input v-model="text" placeholder="请选择" id="trigger"/>
  <ul id="mylist" style="display: none">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
    <li>test4</li>
  </ul>
</template>
 
<script>
import { createPopper } from '@popperjs/core';
import {onMounted, ref} from 'vue';
export default {
  name: "MySelect",
  setup(props) {
    console.log(props);
    let text = ref('test')
    onMounted(() => {
      const trigger = document.getElementById('trigger');
      const mylist = document.getElementById('mylist');
      const instance = createPopper(trigger, mylist, {
        placement: 'bottom',
        modifiers: [
          {
            name: 'offset',
            options: {
              offset: [0, 2],
            },
          },
          {
            name: 'preventOverflow',
            options: {
              padding: 8,
            },
          },
          {
            name: 'flip',
            options: {
              fallbackPlacements: ['top'],
            },
          },
        ],
      });
 
      const handler = () => {
        mylist.style.display = "none";
      }
      const close = () => {
        mylist.className = 'mylistHidden'
        mylist.addEventListener('webkitAnimationEnd', handler);
        window.removeEventListener('click', close);
      }
      const open = (event) => {
        mylist.style.display = 'block'
        mylist.className = 'mylistShow';
        event.preventDefault();
        event.stopPropagation();
        window.addEventListener('click', close);
      }
      trigger.addEventListener("click", (event) => {
        mylist.removeEventListener('webkitAnimationEnd', handler)
        if (mylist.style.display === 'block') {
          close();
        } else {
          open(event);
          instance.update();
        }
      })
      mylist.addEventListener('click', (event) => {
        text.value = event.target.textContent;
        close();
        instance.update();
      })
    })
    return {
      text
    }
  }
}
</script>
 
<style scoped>
ul{
  padding: 0;
  list-style: none;
  border: #ccc solid thin;
  width: 400px;
}
.mylistHidden{
  animation: s2 0.25s;
}
.mylistShow{
  opacity: 1!important;
  animation: s1 0.25s;
}
@keyframes s1 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes s2 {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
</style>