uniapp uview1.0x 下拉选择fs-select，日期下拉选择u-picker 组件简单分装

uview组件 下拉 和 日期简单分装

u-select封装

效果图
labelformat=“yyyy年MM月dd日 HH:mm:ss”
valuename="yyyy-MM-dd HH:mm:ss

<!-- 点击弹窗下拉选择  可 单/多 列-->
<template>
	<view style="width: 100%">
		<u-input :input-align="inputaling" :placeholder="`请选择 ${placeholder}`" v-model="valueLable" type="select" :select-open="show" @click="show = true" :border="border"/>
		<u-select v-model="show" :mode="mode" :list="list" @confirm="confirm" :value-name="valuename" :label-name="labelname" :safe-area-inset-bottom="true"></u-select>
	</view>
</template>

<script>
	export default {
		name:"fs-select",
		props:{
			placeholder: {type:String,default:''}, // 提示
			labelname: {type:String,default:'dictValue'}, // 默认 label tag
			valuename: {type: String, default: 'dictKey'}, // 默认 value tag
			mode: {type: String, default: 'single-column'}, // 模式
			list: {type: Array, default(){return []}}, //下拉列表数据
			value: {type:[String, Number],required:true},//选中的值，value
			border: {type: Boolean,required:false},// 是否显示边框
			inputaling: {type:String,default:'right'},
		},
		data() {
			return {
				show: false,//控制显隐
				valueLable: ''//展示的值
			};
		},
		watch:{
			//监听 value
			value(newValue, oldValue) {
				this.list.forEach((item,index) => {
					if(newValue == item[this.valuename]) {
						this.valueLable = item[this.labelname]
					}
				})
			},
			//监听 value
			list:{
				handler(newValue, oldValue) {
					newValue.forEach((item,index) => {
						if(this.value == item[this.valuename]) {
							this.valueLable = item[this.labelname]
						}
					})
				},
				deep: true
			}
		},
		methods:{
			//成功选中
			confirm(e) {
				console.log(e,'e--')
				this.valueLable = e[0].label
				this.$emit('input',e[0].value)
				// console.log(this.$emit('change'))
			}
		}
	}
</script>

<style lang="scss">

</style>

使用

# sexList 字典 
# form.SEX key值
# labelname="label" 显示的值
# valuename="value" 绑定的key
<fs-select :list="sexList" v-model="form.SEX" ></fs-select>

日期

<!-- 日期选择器  专注于时间和地区的选择-->
<!-- 只支持 年月日时分秒 按顺序排列 -->
<!-- 不回显原因：在页面的data中 写上你绑定的对应的属性~~~~~否则监听不到回显~~~~~ -->
<!-- 不回显原因：修改页面  不能直接 this.form = data[0],这样监听响应失效~~~~~ -->
<template>
	<view style="width: 100%">
		<u-input :disabled="disabled" :input-align="align" :placeholder="`请选择 ${placeholder}`" v-model="valueLable" type="select" :select-open="show" @click="disabled? '' : show = true" :border="border" />
		<u-picker :mode="mode" v-model="show" :params="params" @cancel="cancel" @confirm="confirm" :safe-area-inset-bottom="safebottom" />
	</view>
</template>

<script>
	export default {
		name: "fs-picker",
		props: {
			placeholder: { type: String, default: '' }, // 提示
			mode: { type: String, default: 'time' }, // 模式 time、region 时间、地区
			valueformat: { type: String, default: 'yyyy-MM-dd HH:mm:ss' }, //选中的值，value
			labelformat: { type: String, default: 'yyyy-MM-dd' },
			border: { type: Boolean, required: false }, // 是否显示边框
			value: { type: String, default: '' },
			align: { type: String, default: 'right' },
			safebottom: { type: Boolean, default: true }, //底部安全区域
			disabled:{type:Boolean, default: false},// 禁用全部
		},
		data() {
			return {
				show: false, //控制显隐
				valueLable: '', //当前展示的值
				currentValue: '',//当前展示的 key
				valueLabelArr: [],//当前拆分的 值 [yyyy，MM，dd，HH，mm，ss]
				valueArr: [],//当前拆分的 值 [2002，01，03，24，59，59]
				params: { year: false, month: false, day: false, hour: false, minute: false, second: false, }, //时间模式
				obj: { 'yyyy': 'year', 'MM': 'month', 'dd': 'day', 'HH': 'hour', 'mm': 'minute', 'ss': 'second' },
			};
		},
		mounted() {
			// 2021-11-18 00:00:00
			//初始化 下拉框选项
			this.valueLabelArr = this.paramsFormat(this.valueformat) //[yyyy,dd,zz,hh,ss,hh]
			let obj = {}
			this.valueLabelArr.forEach(item => { obj[this.obj[item]] = true })
			this.params = obj
		},
		watch: {
			// 监听 value
			value: {
				handler(newValue, oldValue) {
				console.log('-fs-picker--','新：',newValue, '旧：',typeof oldValue,oldValue)
				if(!newValue) return
				this.currentValue = newValue
				this.initData(newValue)
			},
			immediate: true
			}
		},
		methods: {
			//初始化数据
			initData(newValue) {
				//初始化显示的值
				let valueLable = this.labelformat //yyyy-MM-dd
				//拆分 value
				this.valueArr = this.paramsFormat(newValue) //【2022，】
				this.valueLabelArr = this.paramsFormat(this.valueformat) //[yyyy,dd,zz,hh,ss,hh]
				console.log(this.valueArr,this.valueLabelArr,'this.valueArr')
				this.valueLabelArr.forEach((item, index) => {
					if (valueLable.indexOf(item) != -1) {//yyyy年MM月dd日
						let reg = new RegExp(item, "i")
						valueLable = valueLable.replace(reg, this.valueArr[index] || '00')
						console.log(valueLable,'valueLabel')
					}
				})
				console.log(valueLable,'this.valuelabel')
				this.valueLable = valueLable
			},
			//成功选中
			confirm(e) {
				let NYR = [] //年月日
				let SFM = [] //时分秒
				this.valueLabelArr = this.paramsFormat(this.valueformat)
				this.valueLabelArr.forEach((item, index) => {
					if (item == 'yyyy' || item == 'MM' || item == 'dd') { NYR.push(e[this.obj[item]]) }
					if (item == 'HH' || item == 'mm' || item == 'ss') { SFM.push(e[this.obj[item]]) }
				})
				let NYRstr = ''
				let SFMstr = ''
				if (NYR.length) { NYRstr = NYR.join('-') }
				if (SFM.length) { SFMstr = SFM.join(':') }

				let value = ''
				if (NYRstr && SFMstr) {
					value = NYRstr + ' ' + SFMstr
				} else if (NYRstr && !SFMstr) {
					value = NYRstr
				} else if (!NYRstr && SFMstr) {
					value = SFMstr
				}
				this.$emit('input', value)
				this.$emit('returnData', { value, oldValue: this.valueLable })
				console.log('开放方法：returnData：', { value, oldValue: this.valueLable, })
			},
			//取消 选择
			cancel(e) {},
			//解析日期格式
			paramsFormat(date) { //yyyy-dd-zz hh:ss:bb
				let arrFormat = []
				if (date.indexOf(' ') > 0 && date.indexOf(' ') < date.length - 1) {//有 时 / 时分 / 时分秒
					let arr = date.split(' ') // ['yyyy-dd-zz', 'hh']| ['yyyy-dd-zz', 'hh:ss'] |['yyyy-dd-zz', 'hh:ss:bb']
					arrFormat = [...arr[0].split('-'), ...arr[1].split(':')] //[yyyy,MM,dd,zz,hh,ss,hh]
				} else {
					arrFormat = date.split('-') //[yyyy,MM,dd]
				}
				return arrFormat
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>

使用

# labelformat 展示的值
# STARTTIME 绑定的值 默认格式是 yyyy-MM-dd HH:mm:ss
# 
<fs-picker v-model="form.STARTTIME" placeholder="开始时间" labelformat="yyyy年MM月dd日"></fs-picker>

https://blog.csdn.net/weixin_46211267/article/details/121650272