feat(AddressSelector): 添加nut-config-provider包装级联选择器以支持主题变量
为AddressSelector组件中的nut-cascader添加nut-config-provider包装,支持通过themeVars配置主题样式,如激活项颜色
Showing
1 changed file
with
23 additions
and
15 deletions
| ... | @@ -56,14 +56,16 @@ | ... | @@ -56,14 +56,16 @@ |
| 56 | </nut-popup> | 56 | </nut-popup> |
| 57 | 57 | ||
| 58 | <!-- 省市县级联选择器 - 放在popup外面避免层级冲突 --> | 58 | <!-- 省市县级联选择器 - 放在popup外面避免层级冲突 --> |
| 59 | - <nut-cascader | 59 | + <nut-config-provider :theme-vars="themeVars"> |
| 60 | - v-model="selectedAreaCodes" | 60 | + <nut-cascader |
| 61 | - v-model:visible="showAreaPicker" | 61 | + v-model="selectedAreaCodes" |
| 62 | - :options="areaData" | 62 | + v-model:visible="showAreaPicker" |
| 63 | - @change="onAreaChange" | 63 | + :options="areaData" |
| 64 | - @path-change="onAreaPathChange" | 64 | + @change="onAreaChange" |
| 65 | - title="请选择省市县" | 65 | + @path-change="onAreaPathChange" |
| 66 | - /> | 66 | + title="请选择省市县" |
| 67 | + /> | ||
| 68 | + </nut-config-provider> | ||
| 67 | </view> | 69 | </view> |
| 68 | </template> | 70 | </template> |
| 69 | 71 | ||
| ... | @@ -72,6 +74,12 @@ import { ref, computed, watch } from 'vue' | ... | @@ -72,6 +74,12 @@ import { ref, computed, watch } from 'vue' |
| 72 | import { RectRight, ArrowRight } from '@nutui/icons-vue-taro' | 74 | import { RectRight, ArrowRight } from '@nutui/icons-vue-taro' |
| 73 | import { areaList } from '@vant/area-data' | 75 | import { areaList } from '@vant/area-data' |
| 74 | 76 | ||
| 77 | +const themeVars = { | ||
| 78 | + // cascaderBarColor: 'orange', | ||
| 79 | + // cascaderItemColor: 'orange', | ||
| 80 | + cascaderItemActiveColor: 'orange', | ||
| 81 | +} | ||
| 82 | + | ||
| 75 | /** | 83 | /** |
| 76 | * 转换@vant/area-data的扁平化数据为NutUI Cascader组件需要的树形结构 | 84 | * 转换@vant/area-data的扁平化数据为NutUI Cascader组件需要的树形结构 |
| 77 | * @param {Object} areaList - @vant/area-data的原始数据 | 85 | * @param {Object} areaList - @vant/area-data的原始数据 |
| ... | @@ -79,16 +87,16 @@ import { areaList } from '@vant/area-data' | ... | @@ -79,16 +87,16 @@ import { areaList } from '@vant/area-data' |
| 79 | */ | 87 | */ |
| 80 | const transformAreaData = (areaList) => { | 88 | const transformAreaData = (areaList) => { |
| 81 | const { province_list, city_list, county_list } = areaList | 89 | const { province_list, city_list, county_list } = areaList |
| 82 | - | 90 | + |
| 83 | return Object.keys(province_list).map(provinceCode => { | 91 | return Object.keys(province_list).map(provinceCode => { |
| 84 | const provinceName = province_list[provinceCode] | 92 | const provinceName = province_list[provinceCode] |
| 85 | - | 93 | + |
| 86 | // 获取该省份下的所有城市 | 94 | // 获取该省份下的所有城市 |
| 87 | const cities = Object.keys(city_list) | 95 | const cities = Object.keys(city_list) |
| 88 | .filter(cityCode => cityCode.startsWith(provinceCode.substring(0, 2))) | 96 | .filter(cityCode => cityCode.startsWith(provinceCode.substring(0, 2))) |
| 89 | .map(cityCode => { | 97 | .map(cityCode => { |
| 90 | const cityName = city_list[cityCode] | 98 | const cityName = city_list[cityCode] |
| 91 | - | 99 | + |
| 92 | // 获取该城市下的所有区县 | 100 | // 获取该城市下的所有区县 |
| 93 | const counties = Object.keys(county_list) | 101 | const counties = Object.keys(county_list) |
| 94 | .filter(countyCode => countyCode.startsWith(cityCode.substring(0, 4))) | 102 | .filter(countyCode => countyCode.startsWith(cityCode.substring(0, 4))) |
| ... | @@ -96,14 +104,14 @@ const transformAreaData = (areaList) => { | ... | @@ -96,14 +104,14 @@ const transformAreaData = (areaList) => { |
| 96 | value: countyCode, | 104 | value: countyCode, |
| 97 | text: county_list[countyCode] | 105 | text: county_list[countyCode] |
| 98 | })) | 106 | })) |
| 99 | - | 107 | + |
| 100 | return { | 108 | return { |
| 101 | value: cityCode, | 109 | value: cityCode, |
| 102 | text: cityName, | 110 | text: cityName, |
| 103 | children: counties.length > 0 ? counties : undefined | 111 | children: counties.length > 0 ? counties : undefined |
| 104 | } | 112 | } |
| 105 | }) | 113 | }) |
| 106 | - | 114 | + |
| 107 | return { | 115 | return { |
| 108 | value: provinceCode, | 116 | value: provinceCode, |
| 109 | text: provinceName, | 117 | text: provinceName, |
| ... | @@ -284,11 +292,11 @@ const getAreaTextFromCodes = () => { | ... | @@ -284,11 +292,11 @@ const getAreaTextFromCodes = () => { |
| 284 | if (codes.length >= 1 && province_list[codes[0]]) { | 292 | if (codes.length >= 1 && province_list[codes[0]]) { |
| 285 | result.province = province_list[codes[0]] | 293 | result.province = province_list[codes[0]] |
| 286 | } | 294 | } |
| 287 | - | 295 | + |
| 288 | if (codes.length >= 2 && city_list[codes[1]]) { | 296 | if (codes.length >= 2 && city_list[codes[1]]) { |
| 289 | result.city = city_list[codes[1]] | 297 | result.city = city_list[codes[1]] |
| 290 | } | 298 | } |
| 291 | - | 299 | + |
| 292 | if (codes.length >= 3 && county_list[codes[2]]) { | 300 | if (codes.length >= 3 && county_list[codes[2]]) { |
| 293 | result.county = county_list[codes[2]] | 301 | result.county = county_list[codes[2]] |
| 294 | } | 302 | } | ... | ... |
-
Please register or login to post a comment