hookehuyr

feat(AddressSelector): 添加nut-config-provider包装级联选择器以支持主题变量

为AddressSelector组件中的nut-cascader添加nut-config-provider包装,支持通过themeVars配置主题样式,如激活项颜色
......@@ -56,14 +56,16 @@
</nut-popup>
<!-- 省市县级联选择器 - 放在popup外面避免层级冲突 -->
<nut-cascader
v-model="selectedAreaCodes"
v-model:visible="showAreaPicker"
:options="areaData"
@change="onAreaChange"
@path-change="onAreaPathChange"
title="请选择省市县"
/>
<nut-config-provider :theme-vars="themeVars">
<nut-cascader
v-model="selectedAreaCodes"
v-model:visible="showAreaPicker"
:options="areaData"
@change="onAreaChange"
@path-change="onAreaPathChange"
title="请选择省市县"
/>
</nut-config-provider>
</view>
</template>
......@@ -72,6 +74,12 @@ import { ref, computed, watch } from 'vue'
import { RectRight, ArrowRight } from '@nutui/icons-vue-taro'
import { areaList } from '@vant/area-data'
const themeVars = {
// cascaderBarColor: 'orange',
// cascaderItemColor: 'orange',
cascaderItemActiveColor: 'orange',
}
/**
* 转换@vant/area-data的扁平化数据为NutUI Cascader组件需要的树形结构
* @param {Object} areaList - @vant/area-data的原始数据
......@@ -79,16 +87,16 @@ import { areaList } from '@vant/area-data'
*/
const transformAreaData = (areaList) => {
const { province_list, city_list, county_list } = areaList
return Object.keys(province_list).map(provinceCode => {
const provinceName = province_list[provinceCode]
// 获取该省份下的所有城市
const cities = Object.keys(city_list)
.filter(cityCode => cityCode.startsWith(provinceCode.substring(0, 2)))
.map(cityCode => {
const cityName = city_list[cityCode]
// 获取该城市下的所有区县
const counties = Object.keys(county_list)
.filter(countyCode => countyCode.startsWith(cityCode.substring(0, 4)))
......@@ -96,14 +104,14 @@ const transformAreaData = (areaList) => {
value: countyCode,
text: county_list[countyCode]
}))
return {
value: cityCode,
text: cityName,
children: counties.length > 0 ? counties : undefined
}
})
return {
value: provinceCode,
text: provinceName,
......@@ -284,11 +292,11 @@ const getAreaTextFromCodes = () => {
if (codes.length >= 1 && province_list[codes[0]]) {
result.province = province_list[codes[0]]
}
if (codes.length >= 2 && city_list[codes[1]]) {
result.city = city_list[codes[1]]
}
if (codes.length >= 3 && county_list[codes[2]]) {
result.county = county_list[codes[2]]
}
......