birdpaper-ui
Version:
一个通用的 vue3 UI组件库。A common vue3 UI component library.
97 lines (96 loc) • 2.83 kB
JavaScript
"use strict";
const vue = require("vue");
const useScroll = require("../../utils/useScroll.js");
const birdpaperIcon = require("birdpaper-icon");
const _sfc_main = vue.defineComponent({
name: "Drawer",
props: {
modelValue: { type: Boolean, default: false },
/** 抽屉标题 */
title: { type: String, default: "标题" },
/** 标题对齐方式 */
titleAlign: { type: String, default: "left" },
/** 抽屉宽度 */
width: { type: String, default: "360px" },
/** 是否隐藏底部区域 */
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: birdpaperIcon.IconCloseLine },
setup(props, { emit, slots }) {
const name = "bp-drawer";
const containerVisable = vue.ref(false);
const cls = vue.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 = vue.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("[ Drawer -onBeforeOk error]", error);
} finally {
confirmLoading.value = false;
}
};
const { move, stop } = useScroll.useScroll();
vue.watch(
() => props.modelValue,
() => {
if (props.modelValue) {
containerVisable.value = true;
stop();
return;
}
setTimeout(() => {
containerVisable.value = false;
move();
}, 200);
}
);
return {
name,
cls,
confirmLoading,
containerVisable,
handleMaskClick,
handleCancle,
handleOk,
slots
};
}
});
module.exports = _sfc_main;