portable-dialog-v3

说明

portable-dialog-v3是为了解决页面在使用弹窗时，维护弹窗数据及状态的代码可以单独抽离出来封装，防止页面弹窗过多时，代码维护困难。 如果是vue2版本请安装 portable-dialog。

安装

npm install portable-dialog-v3

引入

// 在需要使用弹窗的地方直接引入创建弹窗方法
import OpenDialog from 'portable-dialog-v3'

使用案例

// Test.vue
<template>
    <div>
        <button @click="handleClick">点击弹窗</button>
    </div>
</template>
<script lang="ts" setup>
import OpenDialog from 'portable-dialog-v3';

import FormView from './FormView.vue';
const handleClick = () => {
    // 以弹窗方式打开用户定义的Form组件
      // OpenDialog可传入三个参数
      // 第一个参数是自定义的弹窗组件
      // 第二个参数是需要传入给自定义弹窗组件的数据
      // 第三个参数是一个配置对象，可以定义回调方法，okCallback，cancelCallback
      // 其中okCallback会传递用户调用自定义事件时传入的参数，供用户提交使用，同时如果该方法返回true会关闭弹窗，否则弹窗不会关闭
    OpenDialog(FormView, { name: 'zhangsan', age: 19 }, {
        okCallback:  (data = {}) => {
            // 拿到Form组件传递过来的数据，可用于后续校验提交等
            console.log('data', data)
            return true
        },
        cancelCallback() {
            // 弹窗关闭时的触发
            console.log('cancel')
            return true;
        },
        title: '弹窗',  // 设置弹窗标题，仅在hiddenHeader为false有效
        // top: '600px', // 设置弹窗和窗口的距离
        // closeAnimation: true,
        // hiddenHeader: true,// 设置隐藏弹窗头部（需要自定义头部展示样式时使用）
        // hiddenZoomIcon: true, // 设置隐藏缩放图标，仅在hiddenHeader为false有效
        // hiddenCloseIcon: true, // 设置隐藏关闭图标，仅在hiddenHeader为false有效
        // fullScreen: true // 设置弹窗是否为全屏展示
    })

}
</script>



<style scoped>

</style>

// Form.vue
<template>
    <div class="dialog">
        {{ props.name }}---{{ props.age }}
        <br/>
        <button @click="handleClick">确定</button>
    </div>
</template>
<script lang="ts" setup>
  // 接收传入的数据
const props = defineProps({
    name: {
        type: String,
        default: "",
    },
    age: {
        type: Number,
        default: 0,
    },
});
const emit = defineEmits(["ok"]);
const handleClick = () => {
     // 调用弹窗确定事件，其中第二个之后的参数会定义的okCallback回调中接收
    emit('ok', { name: 'lisi' })

}
</script>
<style scoped>
.dialog {
    width: 180px;
    height: 100px;
    padding: 20px;
}
</style>