birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
63 lines (62 loc) • 1.94 kB
JavaScript
import { IconTimeLine } from "birdpaper-icon";
import timeTable from "./components/time-table.vue.js";
import { defineComponent, ref, provide, watch } from "vue";
import { timeInjectionKey } from "./types.js";
const _sfc_main = defineComponent({
name: "TimePicker",
props: {
/** 绑定值 Binding value */
modelValue: { type: String, default: "" },
/** 输入框尺寸 Size of the input */
size: { type: String, default: "normal" },
/** 是否禁用 Disabled or not */
disabled: { type: Boolean, default: false },
/** 是否只读状态 Readonly or not */
readonly: { type: Boolean, default: true },
/** 是否警示状态 Danger or not */
isDanger: { type: Boolean, default: false },
/** 占位提示文字 The placeholder text */
placeholder: { type: String, default: "" },
/** 是否允许清空 Clearable or not */
clearable: { type: Boolean, default: false },
/** 值格式 */
valueFormat: { type: String, default: "YYYY-MM-DD" },
/** 隐藏触发器 */
hideTrigger: { type: Boolean, default: false }
},
components: { timeTable, IconTimeLine },
emits: ["update:modelValue", "input", "blur"],
setup(props, { emit }) {
const name = "bp-time-picker";
const inputRef = ref();
const showPopup = ref(false);
const globalValue = ref(props.modelValue || "");
provide(timeInjectionKey, {
modelValue: props.modelValue,
onSelect: (v, payload) => {
globalValue.value = v;
emit("update:modelValue", globalValue.value);
showPopup.value = false;
}
});
const onInput = () => emit("input");
const onBlur = () => emit("blur");
watch(
() => props.modelValue,
(value) => {
globalValue.value = value || "";
}
);
return {
name,
inputRef,
globalValue,
showPopup,
onInput,
onBlur
};
}
});
export {
_sfc_main as default
};