mt-ui-components-vue3
Version:
玛果添实UI组件库(Vue3)
144 lines • 6.23 kB
JavaScript
/* Analyzed bindings: {
"draggableTitle": "props",
"modalType": "props",
"Modal": "setup-maybe-ref",
"ref": "setup-const",
"useSlots": "setup-const",
"watch": "setup-const",
"watchEffect": "setup-const",
"computed": "setup-const",
"CSSProperties": "setup-const",
"ModalProps": "setup-maybe-ref",
"useDraggable": "setup-maybe-ref",
"slots": "setup-maybe-ref",
"props": "setup-reactive-const",
"modalTitleRef": "setup-ref",
"x": "setup-maybe-ref",
"y": "setup-maybe-ref",
"isDragging": "setup-maybe-ref",
"startX": "setup-ref",
"startY": "setup-ref",
"startedDrag": "setup-ref",
"transformX": "setup-ref",
"transformY": "setup-ref",
"preTransformX": "setup-ref",
"preTransformY": "setup-ref",
"dragRect": "setup-ref",
"transformStyle": "setup-ref"
} */
import { defineComponent as _defineComponent } from 'vue';
import { unref as _unref, renderSlot as _renderSlot, toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock, createElementVNode as _createElementVNode, resolveDynamicComponent as _resolveDynamicComponent, createBlock as _createBlock, normalizeStyle as _normalizeStyle, mergeProps as _mergeProps, withCtx as _withCtx, renderList as _renderList, createSlots as _createSlots } from "vue";
const _hoisted_1 = { key: 1 };
import { Modal } from 'ant-design-vue';
import { ref, useSlots, watch, watchEffect, computed, } from 'vue';
import ModalProps from 'ant-design-vue/lib/modal/Modal';
import { useDraggable } from '@vueuse/core';
const __sfc_main__ = _defineComponent({
props: {
...ModalProps.props,
draggableTitle: {
type: String,
default: '',
},
modalType: {
type: String,
default: 'modal', // ['modal', 'draggable', 'message'] //普通对话框、拖拽、提示框
},
},
setup(__props) {
const props = __props;
const slots = useSlots();
const modalTitleRef = ref(null);
const { x, y, isDragging } = useDraggable(modalTitleRef);
const startX = ref(0);
const startY = ref(0);
const startedDrag = ref(false);
const transformX = ref(0);
const transformY = ref(0);
const preTransformX = ref(0);
const preTransformY = ref(0);
const dragRect = ref({ left: 0, right: 0, top: 0, bottom: 0 });
watch([x, y], () => {
if (!startedDrag.value) {
startX.value = x.value;
startY.value = y.value;
const bodyRect = document.body.getBoundingClientRect();
const titleRect = modalTitleRef.value.getBoundingClientRect();
dragRect.value.right = bodyRect.width - titleRect.width;
dragRect.value.bottom = bodyRect.height - titleRect.height;
preTransformX.value = transformX.value;
preTransformY.value = transformY.value;
}
startedDrag.value = true;
});
watch(isDragging, () => {
if (!isDragging) {
startedDrag.value = false;
}
});
watchEffect(() => {
if (startedDrag.value) {
transformX.value =
preTransformX.value +
Math.min(Math.max(dragRect.value.left, x.value), dragRect.value.right) -
startX.value;
transformY.value =
preTransformY.value +
Math.min(Math.max(dragRect.value.top, y.value), dragRect.value.bottom) -
startY.value;
}
});
const transformStyle = computed(() => {
return {
transform: `translate(${transformX.value}px, ${transformY.value}px)`,
};
});
return (_ctx, _cache) => {
return (_openBlock(), _createBlock(_unref(Modal), _mergeProps(props, {
"ok-text": props.okText || '确定',
"cancel-text": props.cancelText || '取消',
"wrap-class-name": props.modalType === 'message' ? 'modalRef-message' : 'modalRef'
}), _createSlots({ _: 2 /* DYNAMIC */ }, [
_renderList(Object.keys(_unref(slots)), (slot) => {
return {
name: slot,
fn: _withCtx(() => [
_renderSlot(_ctx.$slots, slot)
])
};
}),
(props.modalType === 'draggable')
? {
name: "title",
fn: _withCtx(() => [
_createElementVNode("div", {
ref_key: "modalTitleRef",
ref: modalTitleRef,
style: { "width": "100%", "cursor": "move" }
}, [
(Object.keys(_unref(slots)).includes('draggableTitle'))
? _renderSlot(_ctx.$slots, "draggableTitle", { key: 0 })
: (_openBlock(), _createElementBlock("span", _hoisted_1, _toDisplayString(props.draggableTitle), 1 /* TEXT */))
], 512 /* NEED_PATCH */)
]),
key: "0"
}
: undefined,
(props.modalType === 'draggable')
? {
name: "modalRender",
fn: _withCtx(({ originVNode }) => [
_createElementVNode("div", {
style: _normalizeStyle(transformStyle.value)
}, [
(_openBlock(), _createBlock(_resolveDynamicComponent(originVNode)))
], 4 /* STYLE */)
]),
key: "1"
}
: undefined
]), 1040 /* FULL_PROPS, DYNAMIC_SLOTS */, ["ok-text", "cancel-text", "wrap-class-name"]));
};
}
});
export default __sfc_main__;