52 lines
1.0 KiB
TypeScript
52 lines
1.0 KiB
TypeScript
|
import { toRef, computed } from "vue";
|
||
|
|
import type { Ref } from "vue";
|
||
|
|
|
||
|
|
interface UseDateTimePickerOptions {
|
||
|
|
value?: string | Ref<string>;
|
||
|
|
show?: boolean | Ref<boolean>;
|
||
|
|
placeholder?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 使用 uview-plus 的 datetime-picker
|
||
|
|
* uview-plus版本：~3.4.51
|
||
|
|
* @param options 选项
|
||
|
|
* @returns
|
||
|
|
*/
|
||
|
|
export function useDateTimePicker(options: UseDateTimePickerOptions) {
|
||
|
|
const value = toRef(options.value ?? null);
|
||
|
|
const show = toRef(options.show ?? false);
|
||
|
|
const placeholder = toRef(options.placeholder ?? "请选择");
|
||
|
|
|
||
|
|
const text = computed(() => {
|
||
|
|
return value.value ?? placeholder.value;
|
||
|
|
});
|
||
|
|
|
||
|
|
function showPicker() {
|
||
|
|
show.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
function hidePicker() {
|
||
|
|
show.value = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleConfirm(e: UViewPlus.PickerConfirmEvent) {
|
||
|
|
console.log("handleConfirm:", e);
|
||
|
|
hidePicker();
|
||
|
|
}
|
||
|
|
|
||
|
|
function handleCancel() {
|
||
|
|
hidePicker();
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
value,
|
||
|
|
show,
|
||
|
|
text,
|
||
|
|
showPicker,
|
||
|
|
hidePicker,
|
||
|
|
handleConfirm,
|
||
|
|
handleCancel,
|
||
|
|
};
|
||
|
|
}
|