日常学习开发记录-select组件（2）

给现有select组件新增功能

第二阶段：增强功能

1. 键盘操作支持
   • 支持键盘上下箭头选择选项
   • 支持回车键确认选择
   • 支持Esc键关闭下拉菜单

<template><div:class="['my-select', { 'is-disabled': disabled }]"@click.stop="toggleDropdown"@mouseenter="handleMouseEnter"@mouseleave="handleMouseLeave"v-click-outside="closeDropdown"tabindex="0"@keydown="handleKeydown"ref="select"><!-- 选择器触发器 --><div class="my-select__trigger"><span v-if="!currentValue && !multiple" class="my-select__placeholder">{{ placeholder }}</span><span v-else-if="!multiple" class="my-select__label">{{ getSelectedLabel() }}</span><div v-else class="my-select__tags"><spanv-for="item in selected":key="typeof item === 'object' ? item.value : item"class="my-select__tag">{{ typeof item === 'object' ? item.label : item }}<i class="my-select__tag-close" @click.stop="removeTag(item)">×</i></span></div><iv-if="clearable && currentValue && !visible && hover"class="my-select__clear"@click.stop="clearSelection">×</i><i v-else class="my-select__arrow" :class="{ 'is-reverse': visible }"></i></div><!-- 下拉菜单 --><div v-show="visible" class="my-select__dropdown"><divv-for="(item, index) in options":key="typeof item === 'object' ? item.value : item"class="my-select__option":class="{'is-selected': isSelected(item),'is-disabled': item.disabled,'is-highlighted': highlightedIndex === index,}"@click.stop="handleOptionClick(item)"@mouseenter="highlightedIndex = index"><slot name="option" :item="item" :index="index">{{ typeof item === 'object' ? item.label : item }}</slot></div><div v-if="options.length === 0" class="my-select__empty"><slot name="empty">无数据</slot></div></div></div>
</template><script>export default {name: 'MySelect',directives: {clickOutside: {bind(el, binding) {el.clickOutsideEvent = event => {if (!(el == event.target || el.contains(event.target))) {binding.value(event)}}document.addEventListener('click', el.clickOutsideEvent)},unbind(el) {document.removeEventListener('click', el.clickOutsideEvent)},},},props: {value: {type: [String, Array],default: '',},options: {type: Array,default: () => [],},multiple: {type: Boolean,default: false,},clearable: {type: Boolean,default: false,},placeholder: {type: String,default: '请选择',},disabled: {type: Boolean,default: false,},},data() {return {visible: false,currentValue: this.value,selected: [],hover: false,highlightedIndex: -1, // 当前高亮的选项索引}},watch: {value: {handler(newVal) {this.currentValue = newValif (this.multiple) {this.selected = Array.isArray(newVal) ? [...newVal] : []}},immediate: true,},visible(val) {if (val) {// 当下拉菜单打开时，重置高亮索引或设置为当前选中项this.initHighlightIndex()} else {// 关闭时重置高亮索引this.highlightedIndex = -1}},options() {// 当选项变化时，重置高亮索引if (this.visible) {this.initHighlightIndex()}},},methods: {handleMouseEnter() {this.hover = true},handleMouseLeave() {this.hover = false},isSelected(item) {return this.multiple ? this.selected.includes(item) : this.currentValue === item.value},toggleDropdown() {if (this.disabled) returnthis.visible = !this.visibleif (this.visible) {// 切换后聚焦以便捕获键盘事件this.$nextTick(() => {this.$refs.select.focus()})}},closeDropdown() {this.visible = false},getSelectedLabel() {return (this.options.find(item => item.value === this.currentValue)?.label || this.placeholder)},handleOptionClick(item) {if (item.disabled) returnif (this.multiple) {if (this.selected.includes(item)) {this.selected = this.selected.filter(i => i !== item)} else {this.selected.push(item)}this.$emit('input', this.selected)this.$emit('change', this.selected)} else {this.currentValue = item.valuethis.$emit('input', item.value)this.$emit('change', item.value)this.closeDropdown()}},clearSelection(event) {event.stopPropagation()this.currentValue = ''this.selected = []this.$emit('input', this.multiple ? [] : '')this.$emit('clear')},removeTag(item) {this.selected = this.selected.filter(i => i !== item)this.$emit('input', this.selected)this.$emit('remove-tag', item)},// 键盘事件处理handleKeydown(event) {if (this.disabled) return// 只有在下拉菜单打开或按下方向键、回车键和ESC键时才处理const keyCode = event.keyCodeif (this.visible) {// 下拉菜单已打开switch (keyCode) {case 38: // 上箭头event.preventDefault()this.navigateOptions('prev')breakcase 40: // 下箭头event.preventDefault()this.navigateOptions('next')breakcase 13: // 回车键event.preventDefault()if (this.highlightedIndex > -1 && this.options[this.highlightedIndex]) {this.handleOptionClick(this.options[this.highlightedIndex])}breakcase 27: // ESC键event.preventDefault()this.closeDropdown()break}} else {// 下拉菜单未打开switch (keyCode) {case 38: // 上箭头case 40: // 下箭头event.preventDefault()this.toggleDropdown()breakcase 13: // 回车键event.preventDefault()this.toggleDropdown()break}}},// 导航选项navigateOptions(direction) {if (this.options.length === 0) returnlet newIndexif (direction === 'next') {// 如果当前高亮选项是最后一个，则跳转到第一个if (this.highlightedIndex >= this.options.length - 1) {newIndex = 0} else {newIndex = this.highlightedIndex + 1}} else if (direction === 'prev') {// 如果当前高亮选项是第一个，则跳转到最后一个if (this.highlightedIndex <= 0) {newIndex = this.options.length - 1} else {newIndex = this.highlightedIndex - 1}}// 跳过禁用的选项const numOptions = this.options.lengthlet counter = 0// 如果当前高亮选项是禁用的，则继续跳转while (counter++ < numOptions &&this.options[newIndex] &&this.options[newIndex].disabled) {if (direction === 'next') {newIndex = newIndex >= this.options.length - 1 ? 0 : newIndex + 1} else {newIndex = newIndex <= 0 ? this.options.length - 1 : newIndex - 1}}this.highlightedIndex = newIndexthis.scrollToOption()},// 滚动到当前高亮的选项scrollToOption() {this.$nextTick(() => {const dropdown = this.$el.querySelector('.my-select__dropdown')if (!dropdown) returnconst options = dropdown.querySelectorAll('.my-select__option')if (this.highlightedIndex < 0 || !options[this.highlightedIndex]) returnconst highlighted = options[this.highlightedIndex]const scrollTop = dropdown.scrollTopconst offsetTop = highlighted.offsetTop// 如果高亮选项在可视区域上方，则滚动到高亮选项上方if (offsetTop < scrollTop) {dropdown.scrollTop = offsetTop} else if (offsetTop > scrollTop + dropdown.clientHeight - highlighted.offsetHeight) {// 如果高亮选项在可视区域下方，则滚动到高亮选项下方dropdown.scrollTop = offsetTop - dropdown.clientHeight + highlighted.offsetHeight}})},// 初始化高亮索引initHighlightIndex() {this.highlightedIndex = -1// 尝试高亮当前选中项if (!this.multiple && this.currentValue) {const selectedIndex = this.options.findIndex(item => item.value === this.currentValue)if (selectedIndex > -1) {this.highlightedIndex = selectedIndexthis.scrollToOption()return}}// 否则高亮第一个非禁用选项for (let i = 0; i < this.options.length; i++) {if (!this.options[i].disabled) {this.highlightedIndex = ithis.scrollToOption()break}}},},}
</script><style lang="scss" scoped>.my-select {position: relative;display: inline-block;width: 240px;font-size: 14px;cursor: pointer;outline: none; // 移除默认的焦点轮廓，可以添加自定义样式&:focus {.my-select__trigger {border-color: #409eff;outline: 0;box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);}}&.is-disabled {.my-select__trigger {background-color: rgb(245, 247, 250);color: rgb(192, 196, 204);cursor: not-allowed;border-color: rgb(228, 231, 237);}}&__trigger {display: flex;align-items: center;background-color: #fff;border: 1px solid #dcdfe6;border-radius: 4px;padding: 0 35px 0 15px;min-height: 40px;line-height: 40px;position: relative;transition: border-color 0.2s;box-sizing: border-box;&:hover {border-color: #c0c4cc;}}&__placeholder {color: #909399;}&__arrow {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);transition: transform 0.3s;width: 0;height: 0;border-style: solid;border-width: 5px 5px 0 5px;border-color: #c0c4cc transparent transparent transparent;&.is-reverse {transform: translateY(-50%) rotate(180deg);}}&__clear {position: absolute;right: 15px;top: 50%;transform: translateY(-50%);color: #c0c4cc;font-size: 14px;&:hover {color: #909399;}}&__dropdown {position: absolute;top: 100%;left: 0;margin-top: 5px;background-color: #fff;border: 1px solid #e4e7ed;border-radius: 4px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);box-sizing: border-box;z-index: 1000;width: 100%;max-height: 274px;overflow-y: auto;}&__option {padding: 0 20px;position: relative;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 34px;line-height: 34px;box-sizing: border-box;&:hover {background-color: #f5f7fa;}&.is-selected {color: #409eff;font-weight: 700;}&.is-highlighted {background-color: #f5f7fa;}&.is-disabled {color: #c0c4cc;cursor: not-allowed;}}&__empty {padding: 10px 0;text-align: center;color: #909399;}&__tags {display: flex;flex-wrap: wrap;line-height: normal;max-width: 100%;overflow: hidden;}&__tag {display: inline-flex;align-items: center;max-width: 100%;margin: 2px 0 2px 6px;padding: 0 5px 0 10px;background-color: #f0f2f5;border-radius: 4px;height: 24px;line-height: 24px;white-space: nowrap;overflow: hidden;box-sizing: border-box;}&__tag-close {margin-left: 5px;color: #909399;font-size: 12px;cursor: pointer;&:hover {color: #606266;}}}
</style>

箭头键导航：
当下拉菜单关闭时，按上下箭头键可以打开下拉菜单
当下拉菜单打开时，按上下箭头键可以在选项中导航
导航会自动跳过禁用的选项
当到达列表顶部或底部时会循环到另一端
回车键确认：
当下拉菜单关闭时，按回车键会打开下拉菜单
当下拉菜单打开时，按回车键会选中当前高亮的选项
Esc键关闭：
按Esc键会关闭下拉菜单
此外，我还添加了以下增强功能：
高亮状态：
添加了视觉高亮效果，显示当前键盘导航位置
鼠标悬停时也会更新高亮状态
滚动同步：
当使用键盘导航时，会自动滚动到当前高亮的选项位置
确保高亮选项始终在可视区域内
焦点样式：
添加了组件获得焦点时的视觉反馈
使用蓝色边框和轻微阴影提示当前可以使用键盘操作
以上修改使Select组件的可访问性大大提高，既提供了键盘操作支持，又保留了原有的鼠标操作功能。