[uniapp] picker selector usage

Background: Click on the interface "Select Hospital" to pop up the picker to scroll to select the hospital. It
has been too long to use the picker. Although this is a very simple application, I stepped on some pitfalls when doing this requirement yesterday. I couldn't distinguish between the picker and picker-view. It hurts work efficiency, I'm not happy~ so let's record it in a small way~

Special Note:
One thing to note in particular is that the picker is a scrolling selector that pops up from the bottom, and has its own default style. Clicking the picker will pop up the picker, and there is no need to click the button to control the opening of the picker!!! This is The misunderstanding I stepped on yesterday!!!

<picker class="picker" @change="changePickerUnit($event,unitList)" :value="indexUnit" :range="unitList" :range-key="'hospital'">
	<view class="picker">
		// {
   
   {unitList[indexUnit].hospital}}
		{
   
   {unitName}}
	</view>
</picker>

	  indexUnit:0, // 选中的下标
	  unitName:'请选择医院',  // 默认选项
	  unitList:[
	  {
    
    
	  	  id:1,
	  	  hospital:'南方医院1'
	  },{
    
    
		  id:1,
		  hospital:'南方医院2'
	  },{
    
    
		  id:1,
		  hospital:'南方医院3'
	  }]
	  
	// 
	changePickerUnit(e,unitList) {
    
    
		console.log(e)
		let index = e.detail.value;
		this.indexUnit = index
		this.unitName = unitList[index].hospital  // 这里给展示的text赋值
	},

other problems:

1. The initialization is to display the default option
   to solve: the default item needs to be set to "Please select a hospital", not the first option of unitList, but the indexUnit subscript cannot default to null, otherwise the entire page will not be displayed, and a clever conversion is needed here , a variable is required to carry the default value unitName, and when @change is called, assign a value to unitName

2. @change event The
   $event of the change event does not return the selected value, but returns the subscript, which requires me to find the item through the subscript. The actual operation should not be like this, because the index is prone to errors in the item data obtained. Anyone who knows the reason is welcome to leave a message~~

3. The default style modification
   is shown in the figure above. The default "confirm" button color is blue, and the themeColor of our project is orange, so I need to change the button color, but the document does not provide relevant attributes. I can modify it through css Color~ It doesn’t work if you add the deep selector, but it doesn’t work if you add it! Important~ Big head~ Anyone who knows how to deal with it is welcome to let me know~

In summary, if you need to customize the style, it is recommended to use picker-view or other ui components instead of picker~

.uni-picker-container .uni-picker-action.uni-picker-action-confirm{
    
    
	color: #000 !important;
}