uni-data-picker修改成自定义样式

想使用uni-data-picker，并修改成自己自定义的颜色和样式。

1：修改样式前后样式对比

图1为原本样式，图2，3为修改后的样式

 2：两种使用方法

直接使用uni-data-picker组件，会先显示请选择区域的下拉框，再显示选择区域；

直接使用后样式：

 

使用插槽后样式：

 我这里需要第二种样式，所以需要使用uni-data-picker组件的插槽用法

3：uni-data-picker初引入

首先在插件市场通过HBuilderX导入该组件，然后加入以下代码；

如果需要使用本地数据，需要加入属性:localdata="cityData"；

如果需要实现数据双绑，需要加入属性v-model="formItems[2].value"；

  
    {{error}}
  
  
    
      {{item.text}}
    
  
  
    请选择
  

4： 引入本地数据：

import cityData from "@/data/city-china.json";

....
data() {
			return {
				cityData,
			}
		},

5：修改初始化"请选择"样式并加入图标

 插槽以下处加入class样式，并加入uni-icons即可

	
		{{error}}
	
	
		
		    {{item.text}}
		
	
	
		请选择
		
	

$fontColor2: #808080;

.data-picker {
    //data-picker必须和父级元素长度一直才能占满整个容器
	width: 70%;

		.selected {
			// 修改选择完成后省市区横向显示（类名为uni-data-pickerview组件vue文件中定义）
			display: flex;
			font-size: 16px;
			
			// 修改选择完成后省市区间隔距离
			.selected-item {
				padding-right: 10px;
			}
		}

	.active-region {
			font-size: 16px;
			color: $fontColor2;
			display: flex;
			justify-content: space-between;
	}
}

6:修改选择区域样式

1. 请选择--》修改为对应“选择省”“选择市”“选择区”
2. 选择省的下边框颜色，padding和省市区padding

这些是uni-data-pickerview组件vue文件中定义好的，尝试修改没有成功，就直接修改文件了

            
			
            {{item.value!==null?item.text : '选择省'}}
            {{item.value!==null?item.text : '选择市'}}
            {{item.value!==null?item.text : '选择区'}}

	// 自定义颜色
	// $uni-primary: #007aff !default;
	$uni-primary: #bc2840 !default;

...
	.selected-item-active {
		// 自定义border大小
		// border-bottom: 2px solid $uni-primary;
		border-bottom: 4px solid $uni-primary;
		// 自定义请选择字体样式
		.active-resion{
			color: $uni-primary;
			font-size: 15px;
		}
	}

...
  .item {
	  // 自定义修改
    // padding: 12px 15px;

	font-size: 15px;
    padding: 0px 15px;
    /* border-bottom: 1px solid #f0f0f0; */
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
  }

7:修改样式后完整uni-data-pickerview组件vue文件