政务信息网站建设制度,深圳标本制作,手机网站微信分享代码,什么是电商平台怎么加入电商平台vue3ts 基于内置组件picker-view 扩展组件 Popup 实现自定义日期选择及其他选择 vue3tsuniapp小程序端自定义日期选择器 1.先上效果图2.代码展示2.1 组件2.2 公共方法处理日期2.3 使用组件 3.注意事项3.1refSelectDialog3.1 backgroundColor#fff 自我记录 1.先上…vue3ts 基于内置组件picker-view 扩展组件 Popup 实现自定义日期选择及其他选择 vue3tsuniapp小程序端自定义日期选择器 1.先上效果图2.代码展示2.1 组件2.2 公共方法处理日期2.3 使用组件 3.注意事项3.1refSelectDialog3.1 backgroundColor#fff 自我记录 1.先上效果图 直接上代码
2.代码展示
2.1 组件
src\components\HbcyPopup.vue
script setup langts
import { formatDate, parseDate } from /utils
import { ref } from vueconst props defineProps{popupTitle: stringtype: year | month | daydefaultDate: string
}()
const emit defineEmits{(e: confirm-popup, params: string): void(e: close-popup): void
}()// 选中的值
const selectDate ref()
// 创建选择区间 参考uni文档
const date new Date()
// 年月日
const TYPEYY_MM_DD props.type year || props.type month || props.type day
// 月日
const TYPEMM_DD props.type month || props.type day
const TYPEYY props.type year
const TYPEMM props.type month
const TYPEDD props.type day
const years TYPEYY_MM_DD? Array.from({ length: date.getFullYear() - 1989 }, (_, index) 1990 index): []
const months TYPEMM_DD ? Array.from({ length: 12 }, (_, index) index 1) : []
const days TYPEDD ? Array.from({ length: 31 }, (_, index) index 1) : []
// 处理默认展示的时间
const defaultDate parseDate(props.defaultDate, props.type)
// 确保默认时间
const year refnumber(defaultDate[0])
const month refnumber | undefined(defaultDate[1])
const day refnumber | undefined(defaultDate[2])
// 区分日期展示
let showValueList: any []
// 展示日期的选中时间
if (TYPEDD) {showValueList [years.indexOf(defaultDate[0]),months.indexOf(defaultDate[1]!),days.indexOf(defaultDate[2]!),]
} else if (TYPEMM) {showValueList [years.indexOf(defaultDate[0]), months.indexOf(defaultDate[1]!)]
} else if (TYPEYY) {showValueList [years.indexOf(defaultDate[0])]
}
const valueList refnumber[](showValueList)// 切换日期
const bindChange: UniHelper.PickerViewOnChange (e) {const val e.detail.valueyear.value years[val[0]]month.value months[val[1]]day.value days[val[2]]
}
// 确定按钮
const onClickConfirmPopup (): void {selectDate.value formatDate(year.value, month.value, day.value)emit(confirm-popup, selectDate.value)onClosePopup()
}
// 关闭弹出层
const onClosePopup (): void {emit(close-popup)
}
/scripttemplateview classselectBoxview classselectTitletext classcancel clickonClosePopup取消/texttext classtitle{{ 选择 popupTitle }}/texttext classcancel ok clickonClickConfirmPopup确定/text/viewblock v-ifTYPEYY_MM_DDpicker-view:immediate-changetrueindicator-classindicatorClass:valuevalueListchangebindChangeclasspicker-viewpicker-view-columnview classitem v-for(item, index) in years :keyindex{{ item }}年/view/picker-view-columnpicker-view-column v-ifTYPEMM_DDview classitem v-for(item, index) in months :keyindex{{ item }}月/view/picker-view-columnpicker-view-column v-ifTYPEDDview classitem v-for(item, index) in days :keyindex{{ item }}日/view/picker-view-column/picker-view/block!-- TODO --block v-else text我是单列/text /block/view
/templatestyle langscss scoped
::v-deep.indicatorClass {height: 100rpx;
}
.picker-view {width: 750rpx;height: 600rpx;margin-top: 20rpx;
}
.item {line-height: 100rpx;text-align: center;
}
.selectBox {width: 100%;height: 720rpx;background-color: #fff;border-radius: 20rpx 20rpx 0 0;.selectTitle {display: flex;justify-content: space-between;align-items: center;height: 100rpx;font-size: 32rpx;.cancel {width: 160rpx;text-align: center;color: #ff976a;}.ok {color: #07c160;}}
}
/style2.2 公共方法处理日期
src\utils\index.ts
// 将 yyyy-mm-dd 的字符串 2023-08-24 [2023,8,24] || [2023,8] || [2023]
export function parseDate(dateString: string, type: string): [number, number?, number?] {const date dateString ? new Date(dateString) : new Date()const year date.getFullYear()const month type day || type month ? date.getMonth() 1 : undefinedconst day type day ? date.getDate() : undefinedreturn [year, month, day]
}// 将数字格式的年、月、日转换成格式为 yyyy-mm-dd 的字符串 || yyyy-mm || yyyy
export function formatDate(year: number, month?: number, day?: number): string {const formattedMonth month ! undefined ? (month 10 ? 0${month} : ${month}) : const formattedDay day ! undefined ? (day 10 ? 0${day} : ${day}) : return ${year}${formattedMonth ? -${formattedMonth} : }${formattedDay ? -${formattedDay} : }
}2.3 使用组件
src\pages\test\index.vue
script setup langts
import type { Ref } from vue
import { ref } from vue// 日期相关
const isShowPopop ref(false)
// 弹出层实例
const refSelectDialog: RefUniHelper.UniPopup | null ref(null)
const dateTime ref()
// 打开日期弹窗
const onClcikPopup () {refSelectDialog.value!.open()isShowPopop.value trueconsole.log(refSelectDialog, refPopup)
}
// 关闭弹窗
const onClosePopup () {refSelectDialog.value!.close()isShowPopop.value false
}
// 确定日期弹窗
const onConfirmPopup (params: string) {dateTime.value paramsconsole.log(dateTime.value, dateTime.value)
}
/scripttemplateview classtest-page!-- 展示信息 --view taponClcikPopup classitem-datetext classitem-date-placeholder v-show!dateTime请选择时间/texttext classitem-date-txt v-showdateTime{{ dateTime }}/text/view!-- 使用组件 --uni-popuprefrefSelectDialogtypebottomclassselectDialogBox:maskClickfalse:isMaskClickfalsebackgroundColor#fff:closeonClosePopupHbcyPopupv-ifisShowPopoppopupTitle日期typeday:defaultDatedateTimeconfirm-popuponConfirmPopupclose-popuponClosePopup//uni-popup/view
/templatestyle langscss scoped
.test-page {.item-date {width: 300rpx;height: 60rpx;line-height: 60rpx;text-align: center;border: 1rpx solid #999;font-size: 28rpx;-placeholder {color: #999;}-txt {color: #333;}}
}
/style3.注意事项
3.1refSelectDialog
// 弹出层实例
const refSelectDialog: RefUniHelper.UniPopup | null ref(null)ts类型有一些问题,找了好久不知道该给什么类型!!! 新手TS,有大佬的话请指出,感谢!
3.1 backgroundColor#fff
uni-popup backgroundColor#fff / 因为默认是开启适配的,需要加上背景色,否则就是透明的底部区域示例如下:源码查看 整理不易,如有转载请备注原文地址!
