安装：

npm i vue-dialog-yy

引入

import Vue from 'vue'
import Dialog from 'vue-dialog-yy'

Vue.use(Dialog, {
  // 务必传入store和router，否则Dialog内组件用到时会报错，因为不共享同一个Vue实例
  store,
  router,
  // 如果需要注册为组件，声明registerComponent并定义组件名
  registerComponent: 'CustomDialog'
})

使用示例：

1. 模板中使用

可直接复制文件 /node_modules/vue-dialog-yy/src/Dialog.vue 作为组件使用 也可以在Vue.use()时直接声明registerComponent并定义组件名作为全局组件使用

2. script中使用

this.$dialog(
  // Dialog标题
  'title',
  // 引入的组件模块、显示的内容
  import('components/dialog/testValidate'),
  // Dialog的配置项
  {
    // minimizable为true时需要指定唯一id
    id: 'testValidate', 
    // 最小化时如果有设置id，不会执行then和beforeClose的方法，只会执行onMinimized()
    minimizable: true,
    maximizable: true,
    // 使用方法调用Dialog时必须设置appendToBody为true，(默认为true)，否则不会弹出
    appendToBody: true, 
    // 使用方法调用Dialog时必须设置inline为false，(默认为false)，否则不会弹出
    inline: false,
    // 是否显示默认取消按钮
    showCancelButton: false,
    // 默认取消按钮文字
    cancelButtonText: '取消',
    // 是否显示默认确认按钮
    showConfirmButton: false,
    // 默认确认按钮文字
    confirmButtonText: '确认',
    // 自定义Dialogclass
    customClass: 'custom',
    // 自定义按钮
    customButtons: [
      {
        text: '立即创建',
        type: 'primary',
        loading: false,
        click: (child, done, button) => {
          button.loading = true
          // 调用子组件的方法
          child.resetForm()
          button.loading = false
          button.text = '完成'
        }
      }, {
        text: '充值',
        click: (child, done, button ) => {
          // 传入父组件的参数
          child.resetForm(this.data1)
        }
      }
    ],
    // Dialog打开时的钩子
    onOpen: child => {
      child.search()
    },
    // Dialog关闭前的钩子，可以控制Dialog是否要关闭
    onBeforeClose: (child, done, action) => {
      console.log(action)
      // 需要显示调用done()方法才会关闭Dialog, 方法可以传入任意参数，会做为then的action
      done()
    }
  },
  // 传入子组件的props，用on+小驼峰命名来区分事件和props
  {
    type: 'edit',
    // 子组件$emit('onSearch')触发
    onSearch: (data) => {
      console.log(data)
    }
  }
).then(action => {
  // Dialog关闭后的钩子
  console.log(action)
})

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---- | ---- | ---- | ---- | ---- | | id | 是否永久保存该Dialog实例，若有id则保存，默认不保存，需要整个项目唯一id | string、number | - | - | | showCancelButton | 是否显示默认取消按钮 | boolean | - | true | | cancelButtonText | 默认取消按钮文字 | string、number | - | '取消' | | cancelButtonSize | 默认取消按钮大小 | string | medium / small / mini | 'small' | | showConfirmButton | 是否显示默认确认按钮 | boolean | - | true | | confirmButtonText | 默认确认按钮文字 | string、number | - | '确认' | | confirmButtonSize | 默认确认按钮大小 | string | medium / small / mini | 'small' | | customClass | 自定义Dialog类名，样式可以直接写在style/index.scss里 | string | - | - | | customButtons | 自定义按钮，配置见使用示例 | Array | - | - | | title | 标题文字, 不传即不显示头部 | string | - | '' | | headerBackground | header背景, 可设置渐变 | string | - | '#e8f4ff' | | footerBackground | footer背景, 可设置渐变 | string | - | '#fff' | | icon | 标题旁边的图标样式名称 | string | element-ui的图标 | - | | width | Dialog宽度 | string | - | auto | | height | Dialog高度 | string | - | auto | | headerHeight | 头部高度 | string | - | '40px' | | footerHeight | 底部高度 | string | - | '40px' | | closable | 是否显示关闭按钮 | boolean | - | true | | maximizable | 是否显示最小化按钮 | boolean | - | false | | maximizable | 是否显示最大化按钮 | boolean | - | false | | closeOnClickModal | 是否可以通过点击 modal 关闭Dialog | boolean | - | true | | closeOnPressEscape | 是否可以通过按下 ESC 关闭Dialog | boolean | - | true | | modal | 是否显示遮罩层，inline为true是无效 | boolean | - | true | | draggable | 是否支持Dialog拖拽 | boolean | - | true | | resizable | 是否支持Dialog改变尺寸 | boolean | - | true | | zIndex | Dialog层级 | number | - | 1000 | | shadow | 是否显示Dialog阴影 | boolean | - | true | | inline | 是否以内联方式显示 | boolean | - | false | | left | Dialog左位置，inline为true时无效，left、top同时为null时，自动居中 | string | - | null | | top | Dialog顶位置，inline为true时无效，left、top同时为null时，自动居中 | string | - | null |

Hooks

| 钩子名称 | 说明 | 回调参数 | | ---- | ---- | ---- | | onOpen | Dialog打开时的钩子 | 子组件实例 | | onBeforeClose | Dialog关闭前的钩子，可以控制Dialog是否要关闭 | （子组件实例，关闭Dialog方法，关闭行为名称） | | onStartDrag | Dialog开始拖拽时的钩子 | （子组件实例，关闭Dialog方法，事件event） | | onStopDrag | Dialog结束拖拽时的钩子 | （子组件实例，关闭Dialog方法，事件event） | | onDrag | Dialog正在拖拽时的钩子 | （子组件实例，关闭Dialog方法，事件event） | | onStartResize | Dialog开始改变尺寸时的钩子 | （子组件实例，关闭Dialog方法，事件event） | | onStopResize | Dialog结束改变尺寸时的钩子 | （子组件实例，关闭Dialog方法，事件event） | | onResize | Dialog正在改变尺寸时的钩子 | （子组件实例，关闭Dialog方法，事件event） | | onMinimized | Dialog切换最小化时的钩子 | （子组件实例，关闭Dialog方法） | | onMaximized | Dialog切换最大化时的钩子 | （子组件实例，关闭Dialog方法，当前放大状态） | | onClick | Dialog被点击时的钩子 | （子组件实例，关闭Dialog方法，事件event） |

Slots（模板语法）

| name | 说明 | | ---- | ---- | | title | 定义标题内容，设置了改插槽，参数title将无效 | | tools | 定义操作按钮 | | default | Dialog内容 | | footer | 定义底部内容 |