用vue ts setup 写一个原生select ,宽度为80px,高度为30px,背景颜色湖蓝色，字体白色，radius为5px,异步渲染，有默认选项，有并列选择框名称，鼠标悬浮在选择框上鼠标样式为hover

好的，以下是代码示例：

<template>
  <div class="select-wrapper">
    <div class="select" :style="{ width: width + 'px', height: height + 'px', backgroundColor: bgColor, borderRadius: radius + 'px' }" @mouseover="handleMouseOver">
      <div class="selected-option" :style="{ color: fontColor }">{{ selectedOption }}</div>
      <div class="arrow" :style="{ borderColor: fontColor + ' transparent transparent transparent' }"></div>
    </div>
    <div class="options" v-show="showOptions">
      <div class="option" v-for="option in options" :key="option" :style="{ color: fontColor }" @click="handleOptionClick(option)">{{ option }}</div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, watchEffect } from 'vue';

export default {
  name: 'Select',
  props: {
    options: {
      type: Array,
      default: () => [],
    },
    defaultOption: {
      type: String,
      default: '',
    },
    width: {
      type: Number,
      default: 80,
    },
    height: {
      type: Number,
      default: 30,
    },
    bgColor: {
      type: String,
      default: '#00BFFF',
    },
    fontColor: {
      type: String,
      default: '#fff',
    },
    radius: {
      type: Number,
      default: 5,
    },
    name: {
      type: String,
      default: '',
    },
  },
  setup(props) {
    const selectedOption = ref(props.defaultOption);
    const showOptions = ref(false);

    watchEffect(() => {
      selectedOption.value = props.defaultOption;
    });

    function handleOptionClick(option: string) {
      selectedOption.value = option;
      showOptions.value = false;
    }

    function handleMouseOver() {
      document.body.style.cursor = 'pointer';
    }

    return {
      selectedOption,
      showOptions,
      handleOptionClick,
      handleMouseOver,
    };
  },
};
</script>

<style scoped>
.select-wrapper {
  position: relative;
}

.select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  cursor: pointer;
}

.arrow {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
}

.options {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  display: flex;
  flex-wrap: wrap;
  max-height: 120px;
  overflow-y: auto;
  padding: 5px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.15), 0 0.1em 0.2em rgba(0, 0, 0, 0.05);
}

.option {
  width: 100%;
  padding: 5px;
  cursor: pointer;
}

.option:hover {
  background-color: #f5f5f5;
}
</style>

在父组件中使用该组件：

<template>
  <div>
    <Select :options="options" default-option="A" width="80" height="30" bg-color="#00BFFF" font-color="#fff" radius="5" name="select1" />
    <Select :options="options" default-option="B" width="80" height="30" bg-color="#00BFFF" font-color="#fff" radius="5" name="select2" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import Select from './Select.vue';

export default defineComponent({
  name: 'App',
  components: {
    Select,
  },
  data() {
    return {
      options: ['A', 'B', 'C', 'D', 'E'],
    };
  },
});
</script>

其中，`options` 是选择框可选的选项，`defaultOption` 是选择框的默认选项。在 `setup` 函数中，我们使用 `ref` 创建了 `selectedOption` 和 `showOptions` 变量，并且使用 `watchEffect` 监听 `defaultOption` 的变化，来更新 `selectedOption` 的值。

在 `handleOptionClick` 函数中，我们更新了 `selectedOption` 的值，并且隐藏了选项框。在 `handleMouseOver` 函数中，我们设置了鼠标悬浮在选择框上时的鼠标样式为 `pointer`。

在样式中，我们使用了 `scoped` 关键字来限制样式的作用域，避免与其他组件的样式冲突。使用 `position: relative` 来设置选择框和选项框的相对定位，使用 `position: absolute` 来设置选项框的绝对定位。使用 `display: flex` 来设置选择框和选项框的弹性布局，以及选项框中选项的排列方式。使用 `overflow-y: auto` 来设置选项框的纵向滚动条，当选项框高度超过 `max-height` 时，会自动出现滚动条。