基于Vue3框架的Vben的Modal弹窗

参考文档Modal
比如Table的列表在打开一个弹窗的时候用方法useModal

import { useModal } from '@/components/Modal';
const [register1, { openModal: openModal1 }] = useModal();

register1用于注册useModal, 绑定到template里面test1Modal 的 组件

<test1Modal @register="register1" @success="handleSuccess" />

所以在TS里面要先引入组件,
再定义一个打开弹窗的方法openModal1 ,并且可以通过该方式传递值data到弹窗的子组件

import test1Modal from './test1Modal.vue';
openModal1(true, {
  record,
  isUpdate: true,
});

弹窗的定义就结束了
我理解的要在父类里控制弹窗Modal, 需要用到setModalProps

const [register1, { openModal: openModal1, setModalProps }] = useModal();
//下面这个方法得在弹窗打开的时候才会生效,不然会报错的
setModalProps({ confirmLoading: true });

在子组件中控制本弹窗Modal需要用到useModalInner(用于独立的 Modal 内部调用)的方法

const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
	setFieldsValue({ ...data.record }); //传入的值快速赋值
});
setModalProps({ confirmLoading: true }); 

test1Modal.vue文件里的简单语法引用

<template>
    <BasicModal title="Modal" v-bind="$attrs" :helpMessage="['提示1', '提示2']"> Test 2</BasicModal>
</template>
<script lang="ts" setup>
  import { BasicModal } from '@/components/Modal';
</script>  
Vue3结合TypeScript中实现拖拽功能,你需要做以下几个步骤: 1. 安装必要的库:首先,安装`vue-draggable-resizable`库,它提供了一个简单的API来处理元素的拖放和缩放操作。你可以通过npm或yarn添加这个依赖: ```bash npm install vue-draggable-resizable @types/vue-draggable-resizable # 或者 yarn add vue-draggable-resizable @types/vue-draggable-resizable ``` 2. 配置引入:在你的项目中,需要在组件的`<script setup>`部分导入并配置draggable-resizable插件: ```html <template> <div ref="dragArea" class="modal-content draggable"> <!-- modal内容 --> </div> </template> <script setup> import draggable from 'vue-draggable-resizable'; const dragArea = ref(null); const handleDrag = (event: any) => { // 拖动事件处理逻辑 }; const initDraggable = () => { if (dragArea.value) { draggable(dragArea.value, { onDragEnd: handleDrag }); } }; </script> ``` 3. 初始化和销毁:在组件的生命周期钩子中初始化和销毁draggable实例,例如在`mounted()`和`beforeDestroy()`中调用`initDraggable()`。 4. 监听组件卸载:确保在组件卸载前停止监听拖放事件,避免内存泄漏: ```javascript beforeUnmount(() => { if (dragArea.value) { draggable.destroy(dragArea.value); } }); ``` 5. TypeScript定义:在`setup`文件中,可以为ref类型的`dragArea`添加类型注解,例如: ```typescript const dragArea = ref<HTMLDivElement>(null as unknown as HTMLDivElement); ``` 这样,在代码编辑器中,你会得到更好的类型提示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值