149 lines
3.3 KiB
Vue
149 lines
3.3 KiB
Vue
<template>
|
||
<div v-if="modelValue" class="region-mask" @click.self="close">
|
||
<div class="region-dialog">
|
||
<div class="region-header">
|
||
<span>选择区域</span>
|
||
<span class="close" @click="close">×</span>
|
||
</div>
|
||
<div class="region-body">
|
||
<div
|
||
v-for="item in regions" :key="item.code" class="region-item" :class="{ active: item.name === modelSelected }"
|
||
@click="select(item)">
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'RegionSelector',
|
||
props: {
|
||
modelValue: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
modelSelected: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
regions: {
|
||
type: Array,
|
||
default: () => [
|
||
{ name: '北京', code: '2345' },
|
||
{ name: '上海', code: '2346' },
|
||
{ name: '雄安', code: '2347' },
|
||
{ name: '南京', code: '2348' },
|
||
{ name: '江苏', code: '2349' },
|
||
{ name: '西安', code: '2350' },
|
||
{ name: '成都', code: '2351' },
|
||
{ name: '重庆', code: '2352' },
|
||
{ name: '广州', code: '2353' },
|
||
{ name: '深圳', code: '2354' },
|
||
{ name: '武汉', code: '2355' },
|
||
{ name: '杭州', code: '2356' },
|
||
{ name: '苏州', code: '2357' },
|
||
{ name: '天津', code: '2358' },
|
||
{ name: '郑州', code: '2359' },
|
||
{ name: '合肥', code: '2360' },
|
||
{ name: '青岛', code: '2361' },
|
||
{ name: '厦门', code: '2362' }
|
||
]
|
||
}
|
||
},
|
||
emits: ['update:modelValue', 'update:modelSelected', 'change'],
|
||
methods: {
|
||
close () {
|
||
this.$emit('update:modelValue', false)
|
||
},
|
||
select (item) {
|
||
this.$emit('update:modelSelected', item.name)
|
||
this.$emit('change', item)
|
||
this.$emit('update:modelValue', false)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.region-mask {
|
||
position: fixed;
|
||
z-index: 2000;
|
||
display: flex;
|
||
background: rgb(0 0 0 / 35%);
|
||
inset: 0;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.region-dialog {
|
||
width: 700px;
|
||
color: #fff;
|
||
background: #0d2253;
|
||
border: 1px solid rgb(59 130 246 / 35%);
|
||
border-radius: 6px;
|
||
box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
|
||
}
|
||
|
||
.region-header {
|
||
position: relative;
|
||
display: flex;
|
||
height: 48px;
|
||
font-weight: 600;
|
||
background: #0f2a65;
|
||
border-bottom: 1px solid rgb(59 130 246 / 25%);
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.region-header .close {
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 16px;
|
||
font-size: 18px;
|
||
cursor: pointer;
|
||
opacity: 0.9;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
.region-body {
|
||
display: grid;
|
||
padding: 20px 24px 28px;
|
||
grid-template-columns: repeat(6, 1fr);
|
||
gap: 14px 14px;
|
||
}
|
||
|
||
|
||
.region-item {
|
||
display: flex;
|
||
height: 40px;
|
||
min-width: 0;
|
||
padding: 0 8px;
|
||
overflow: hidden;
|
||
font-size: 13px;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
cursor: pointer;
|
||
background: rgb(30 58 138 / 35%);
|
||
border: 1px solid rgb(59 130 246 / 35%);
|
||
border-radius: 6px;
|
||
transition: all 0.2s ease;
|
||
user-select: none;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.region-item:hover {
|
||
background: rgb(30 58 138 / 50%);
|
||
border-color: rgb(59 130 246 / 60%);
|
||
}
|
||
|
||
.region-item.active {
|
||
font-weight: 600;
|
||
color: #0a0a0a;
|
||
background: #38bdf8;
|
||
border-color: #38bdf8;
|
||
}
|
||
</style>
|