birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
97 lines (96 loc) • 2.77 kB
JavaScript
import { defineComponent, ref, computed, watch } from "vue";
import { IconCloseLine } from "birdpaper-icon";
const _sfc_main = defineComponent({
name: "Modal",
props: {
/** 对话框显示状态 */
modelValue: { type: Boolean, default: false },
/** 对话框标题 */
title: { type: String, default: "标题" },
/** 标题对齐方式 */
titleAlign: { type: String, default: "left" },
/** 对话框宽度 */
width: { type: String, default: "600px" },
/** 对话框宽度 */
top: { type: String, default: "20vh" },
/** 是否隐藏底部区域 */
hideFooter: { type: Boolean, default: false },
/** 是否隐藏关闭图标 */
hideClose: { type: Boolean, default: false },
/** 是否展示边框 */
border: { type: Boolean, default: false },
/** 点击遮罩是否关闭 */
maskClosable: { type: Boolean, default: true },
/** 确认按钮是否处于加载状态 */
okLoading: { type: Boolean, default: false },
/** 确定按钮内容 */
okText: { type: String, default: "确认" },
/** 取消按钮内容 */
cancleText: { type: String, default: "取消" },
/** 触发确定前的回调，返回 false 则中断 */
onBeforeOk: { type: Function, default: () => true }
},
emits: ["update:modelValue", "ok", "cancle"],
components: { IconCloseLine },
setup(props, { emit, slots }) {
const name = "bp-modal";
const containerVisable = ref(false);
const cls = computed(() => {
let cls2 = [name];
if (props.border) {
cls2.push(`${name}-border`);
}
cls2.push(`${name}-title-${props.titleAlign}`);
return cls2;
});
const handleMaskClick = () => {
if (!props.maskClosable)
return;
handleCancle();
};
const handleCancle = () => {
emit("cancle");
emit("update:modelValue", false);
};
const confirmLoading = ref(false);
const handleOk = async () => {
try {
confirmLoading.value = true;
const res = await props.onBeforeOk();
if (!res)
return;
emit("ok");
emit("update:modelValue", false);
} catch (error) {
console.log("[ Modal -onBeforeOk error]", error);
} finally {
confirmLoading.value = false;
}
};
watch(
() => props.modelValue,
() => {
if (props.modelValue) {
containerVisable.value = true;
return;
}
setTimeout(() => {
containerVisable.value = false;
}, 200);
}
);
return {
name,
cls,
confirmLoading,
containerVisable,
handleMaskClick,
handleCancle,
handleOk,
slots
};
}
});
export {
_sfc_main as default
};