feat(AddressSelector): 添加nut-config-provider包装级联选择器以支持主题变量
为AddressSelector组件中的nut-cascader添加nut-config-provider包装,支持通过themeVars配置主题样式,如激活项颜色
Showing
1 changed file
with
8 additions
and
0 deletions
| ... | @@ -56,6 +56,7 @@ | ... | @@ -56,6 +56,7 @@ |
| 56 | </nut-popup> | 56 | </nut-popup> |
| 57 | 57 | ||
| 58 | <!-- 省市县级联选择器 - 放在popup外面避免层级冲突 --> | 58 | <!-- 省市县级联选择器 - 放在popup外面避免层级冲突 --> |
| 59 | + <nut-config-provider :theme-vars="themeVars"> | ||
| 59 | <nut-cascader | 60 | <nut-cascader |
| 60 | v-model="selectedAreaCodes" | 61 | v-model="selectedAreaCodes" |
| 61 | v-model:visible="showAreaPicker" | 62 | v-model:visible="showAreaPicker" |
| ... | @@ -64,6 +65,7 @@ | ... | @@ -64,6 +65,7 @@ |
| 64 | @path-change="onAreaPathChange" | 65 | @path-change="onAreaPathChange" |
| 65 | title="请选择省市县" | 66 | title="请选择省市县" |
| 66 | /> | 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的原始数据 | ... | ... |
-
Please register or login to post a comment