vue-yy-window v0.1.0

安装：

npm i vue-yy-window

引入

import Vue from 'vue'
import YYWindow from 'vue-yy-window'

Vue.use(YYWindow, {
  // 务必传入store和router，否则对话框内组件用到时会报错，因为不共享同一个Vue实例
  store,
  router
})

使用示例：

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

Attributes

Hooks

Slots（模板语法）