mes_mobile/components/pickerSelect/index.vue

<template>
	<view class="selectView">
		<picker mode="selector" @change="bindPickerChange" @cancel="pickerHide" :value="value" range-key="name" :range="list" >
			<view class="pickerBom" @click="pickerClick">
				<input class="input" type="text" :value="text" :placeholder="placeholder" disabled />
				<text class="iconfont icon-gengduo" :class="selectShow?'selectOpen':'selectHide'"></text>
			</view>
		</picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectShow:false,
				value:'',
				text:'',
				id:this.id,
				array:this.list,
			}
		},
		props: {
		    placeholder:{
				type:[String],
				default:'请选择'
			},
			list:{
				type:[Array],
				default:[]
			},
			id:{
				type:[String,Number],
				default:''
			}
		},
		watch:{
			id:{
				handler(val){
					if(val){
						this.array.forEach((item,index)=>{
							if(item.value == val){
								this.value = index;
								this.text = item.name;
								this.id = val;
							}
						})
					}else{
						this.value = '';
						this.text = '';
						this.id = '';
					}
				},
				immediate:true,
				deep:true
			},
			list:{
				handler(val){
					this.array = val;
					this.array.forEach((item,index)=>{
						if(item.value == this.id){
							this.value = index;
							this.text = item.name;
							this.id = item.value;
						}
					})
				},
				immediate:true,
				deep:true
			}
		},
		computed: {
			
		},
		methods: {
			pickerClick(){
				this.selectShow = true;
			},
			bindPickerChange(e){
				this.value = e.detail.value;
				this.text = this.array[e.detail.value].name;
				this.id = this.array[e.detail.value].value;
				this.selectShow = false;
				
				this.$emit('change',{name:this.array[e.detail.value].name,value:this.array[e.detail.value].value,item:this.array[e.detail.value]});
			},
			pickerHide(){
				this.selectShow = false;
			}
		}
	}
</script>

<style scoped lang="scss">
	.selectView{
		width: 100%;
	}
	.pickerBom{
		width: 100%;
		.input{
			width: 100%;
		}
	}
	.selectOpen{
		animation: rotate 0.6s;
		animation-fill-mode: forwards;
	}
	.selectHide{
		animation: rotate180 0.6s ;
		animation-fill-mode: forwards;
	}
	@keyframes rotate {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(90deg);
		}
	}
	@keyframes rotate180 {
		from {
			transform: rotate(90deg);
		}
		to {
			transform: rotate(0deg);
		}
	}
</style>