当前位置：首页 > news >正文

Ant Design for UI 选择下拉框

news 2025/8/26 19:51:30

1. 单选框与多选框

<template><div class="demo-page" style="padding: 40px; max-width: 1200px; margin: 0 auto; font-family: 'Microsoft YaHei', Arial, sans-serif;"><h1 style="color: #1890ff; text-align: center; margin-bottom: 10px;">📊 下拉框功能演示</h1><p style="text-align: center; color: #666; margin-bottom: 40px;">模拟从后端加载数据 | Vue 2 + ant-design-vue</p><a-spin :spinning="loading" tip="加载数据中..." style="display: block; margin-bottom: 30px;"><div style="background: #f8f9fa; padding: 24px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);display: flex;gap: 24px;align-items: flex-start;"><!-- 单选：选择省份 --><div style="flex: 1; min-width: 280px;"><label style="display: block; margin-bottom: 8px; color: #333; font-weight: 500;">选择省份：</label><a-selectv-model="selectedProvince"placeholder="请选择一个省份"style="width: 100%;"@change="handleProvinceChange"><a-select-option v-for="p in provinces" :key="p.value" :value="p.value">{{ p.label }}</a-select-option></a-select></div><!-- 多选：选择城市 --><div style="flex: 1; min-width: 280px;"><label style="display: block; margin-bottom: 8px; color: #333; font-weight: 500;">选择城市（多选）：</label><a-selectmode="multiple"v-model="selectedCities"placeholder="请选择你喜欢的城市"style="width: 100%;":disabled="loading"><a-select-option v-for="c in cities" :key="c.value" :value="c.value">{{ c.label }}</a-select-option></a-select></div></div></a-spin><!-- 显示结果 --><div style="margin-top: 30px; padding: 20px; background: #e6f7ff; border-radius: 8px; border-left: 4px solid #1890ff;"><h3>🎯 当前选择结果：</h3><p><strong>选中的省份：</strong> {{ provinceText || '未选择' }}</p><p><strong>选中的城市：</strong> {{ selectedCities.length ? selectedCities.map(v => cityMap[v]).join(', ') : '未选择' }}</p></div></div>
</template><script>
export default {name: 'Home',data() {return {loading: true,selectedProvince: undefined,selectedCities: [],provinces: [{ value: 'zhejiang', label: '浙江省' },{ value: 'jiangsu', label: '江苏省' },{ value: 'guangdong', label: '广东省' },{ value: 'sichuan', label: '四川省' },{ value: 'shandong', label: '山东省' }],cities: [{ value: 'hangzhou', label: '杭州' },{ value: 'ningbo', label: '宁波' },{ value: 'wenzhou', label: '温州' },{ value: 'shaoxing', label: '绍兴' },{ value: 'nanjing', label: '南京' },{ value: 'suzhou', label: '苏州' },{ value: 'wuxi', label: '无锡' },{ value: 'guangzhou', label: '广州' },{ value: 'shenzhen', label: '深圳' },{ value: 'chengdu', label: '成都' }]}},computed: {provinceText() {const p = this.provinces.find(item => item.value === this.selectedProvince)return p ? p.label : ''},cityMap() {const map = {}this.cities.forEach(c => { map[c.value] = c.label })return map}},methods: {handleProvinceChange(value) {console.log('选择了省份:', value)}},created() {setTimeout(() => {this.loading = false}, 1200)}
}
</script><style scoped>
/* ✅ 使用 :deep() 替代 /deep/，现代写法 */
:deep(.ant-select-arrow) {color: black !important;opacity: 1 !important;
}:deep(.ant-select-arrow::before) {content: '>' !important;color: black !important;font-weight: 600;font-size: 14px;transform: rotate(90deg);transition: transform 0.3s;
}:deep(.ant-select-selection:hover .ant-select-arrow::before) {color: #1890ff !important; /* 悬停变蓝色，专业 */
}:deep(.ant-select-open .ant-select-arrow::before) {transform: rotate(-90deg) !important;
}/* 美化多选标签 */
:deep(.ant-select-selection__choice) {background-color: #1890ff !important;border-color: #1890ff !important;height: 24px;line-height: 22px;
}:deep(.ant-select-selection__choice__content) {color: white !important;
}<style scoped>
/* 设置下拉框输入框背景为白灰色 */
:deep(.ant-select-selection),
:deep(.ant-select-selection--multiple) {background-color: #f0f0f0 !important; /* 白灰色背景，可以根据需要调整色值 */
}/* 可选：为悬停和聚焦状态设置不同的背景颜色 */
:deep(.ant-select-selection:hover),
:deep(.ant-select-selection:focus) {background-color: #e0e0e0 !important; /* 悬停或聚焦时稍微深一点的白灰色 */
}
</style>

2. 下拉框纯静态展示

<template><div class="demo-page" style="padding: 40px; max-width: 1200px; margin: 0 auto; font-family: 'Microsoft YaHei', Arial, sans-serif;"><h1 style="color: #1890ff; text-align: center; margin-bottom: 10px;">📋 下拉框值展示（点击展开）</h1><p style="text-align: center; color: #666; margin-bottom: 40px;">点击展开展示下拉框中的所有可选值 | 静态展示</p><!-- 🔹 展示所有省份 --><div style="display: flex; justify-content: space-between; margin-bottom: 20px;"><div style="display: flex; align-items: center; gap: 16px; width: 45%;"><span style="font-weight: 500; color: #333;">所有可选省份：</span><a-popover placement="bottomLeft" trigger="click"><template slot="content"><div style="max-height: 200px; overflow-y: auto; padding: 8px; width: 200px;"><div v-for="p in provinces" :key="p.value">{{ p.label }}</div></div></template><a-button type="link">点击查看</a-button></a-popover></div><!-- 🔹 展示所有城市 --><div style="display: flex; align-items: center; gap: 16px; width: 200px;"><span style="font-weight: 500; color: #333;">所有可选城市：</span><a-popover placement="bottomLeft" trigger="click"><template slot="content"><!-- ✅ 在这里设置弹出面板的宽度 --><div style="max-height: 150px; overflow-y: auto; padding: 8px; width: 100px;"><div v-for="c in cities" :key="c.value">{{ c.label }}</div></div></template><a-button type="link">点击查看</a-button></a-popover></div></div></div>
</template><script>
export default {name: 'Home',data() {return {// 模拟数据provinces: [{ value: 'zhejiang', label: '浙江省' },{ value: 'jiangsu', label: '江苏省' },{ value: 'guangdong', label: '广东省' },{ value: 'sichuan', label: '四川省' },{ value: 'shandong', label: '山东省' }],cities: [{ value: 'hangzhou', label: '杭州' },{ value: 'ningbo', label: '宁波' },{ value: 'wenzhou', label: '温州' },{ value: 'shaoxing', label: '绍兴' },{ value: 'nanjing', label: '南京' },{ value: 'suzhou', label: '苏州' },{ value: 'wuxi', label: '无锡' },{ value: 'guangzhou', label: '广州' },{ value: 'shenzhen', label: '深圳' },{ value: 'chengdu', label: '成都' }]}}
}
</script><style scoped>
/* 调整样式使其更加紧凑 */
.demo-page {max-width: 100%;
}.ant-btn-link {padding: 0;color: #1890ff;text-decoration: underline;
}.ant-btn-link:hover {color: #40a9ff;
}.ant-popover-inner-content {padding: 8px;background-color: #fff;border-radius: 4px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}.ant-popover-inner-content div {padding: 4px 0;
}/* 确保每组元素在同一行显示 */
.flex-container {display: flex;justify-content: space-between;
}.flex-item {display: flex;align-items: center;gap: 16px;
}.flex-item span {font-weight: 500;color: #333;
}
</style>

查看全文

http://www.xdnf.cn/news/1366723.html