hookehuyr

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

为AddressSelector组件中的nut-cascader添加nut-config-provider包装,支持通过themeVars配置主题样式,如激活项颜色
...@@ -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 }
......