Vue.js实现城市选择下拉列表无法自定义样式 如何修改代码满足需求

解决方案 #

放弃原生<select>标签，自行实现全自定义样式的下拉组件，同时支持直接绑定seo_name类型的选中值，完整修改代码如下：

模板代码

<template>
  <div class="regions-list">
    <!-- 下拉触发按钮 -->
    <div class="select-trigger" @click="showDropdown = !showDropdown">
      {{ selectedLabel || '请选择城市' }}
      <span class="arrow">▼</span>
    </div>
    <!-- 下拉选项列表 -->
    <div class="dropdown-list" v-if="showDropdown">
      <div 
        class="dropdown-item" 
        v-for="item in region" 
        :key="item.name"
        @click="handleSelect(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

逻辑代码

<script>
export default {
  props: {
    region: {
      type: Array,
      default: () => []
    },
    // 支持v-model绑定选中的seo_name值
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showDropdown: false,
    }
  },
  computed: {
    // 根据绑定的seo_name匹配显示的城市名称
    selectedLabel() {
      const target = this.region.find(item => item.seo_name === this.value)
      return target ? target.name : ''
    }
  },
  methods: {
    handleSelect(item) {
      // 选中后更新绑定值，值为对应项的seo_name
      this.$emit('input', item.seo_name)
      this.showDropdown = false
    }
  },
  // 点击组件外部自动关闭下拉
  mounted() {
    document.addEventListener('click', (e) => {
      if (!this.$el.contains(e.target)) this.showDropdown = false
    })
  },
  beforeDestroy() {
    document.removeEventListener('click', () => {})
  }
}
</script>

样式示例（可完全自定义）

<style scoped>
.regions-list {
  position: relative;
  width: 200px;
}
.select-trigger {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.select-trigger:hover {
  border-color: #c0c4cc;
}
.arrow {
  font-size: 12px;
  transition: transform 0.3s;
}
.dropdown-list {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  background: #fff;
  max-height: 300px;
  overflow-y: auto;
  z-index: 999;
}
.dropdown-item {
  padding: 8px 12px;
  cursor: pointer;
}
.dropdown-item:hover {
  background: #f5f7fa;
}
</style>

使用说明 #

1. 样式自定义：上述所有CSS规则都可以按需修改，包括颜色、尺寸、圆角、hover效果、阴影等，不存在原生select的样式限制问题。
2. 值绑定：父组件调用时直接通过v-model绑定变量即可，变量自动同步选中项的seo_name值，调用示例：

<RegionSelect :region="cityList" v-model="selectedCitySeoName" />

内容的提问来源于stack exchange，提问作者Alex