portable-dialog

说明

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

安装

npm install portable-dialog

引入

// 在main.js中引入公共样式,从1.0.7版本后，样式默认打包进去，已经不需要单独引入
import 'portable-dialog/portable-dialog.css';（1.0.7后省略该步骤）
// 在需要使用弹窗的地方直接引入创建弹窗方法
import OpenDialog from 'portable-dialog'

使用案例

// Test.vue
<template>
  <div class="page">
    <button @click="handleClick">测试</button>
  </div>
</template>

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

<style lang="scss">
.page {

  background-color: gray;
}
  .title {
    color:red;
  }
</style>

// Form.vue
<template>
  <div class="dialog">
    <div class="header">
      <span>标题</span>
    </div>
    <span>name{{name}}</span>
    <br/>
    <button @click="handleConfirm">确定</button>
    <button @click="handleCancel">取消</button>
  </div>
</template>

<script>
export default {
  name: "Form",
  props: ['name'], // 通过接收OpenDialog传递过来的参数
  methods:{
    handleConfirm() {
      // 调用弹窗确定事件，其中第二个之后的参数会定义的okCallback回调中接收
      this.$emit('ok',{
        name: '李四'
      })
    },
    handleCancel() {
      // 调用弹窗关闭事件
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped lang="scss">
.dialog {
  width:500px;
  height: 200px;
  .header {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #ddd;
  }

}
</style>