VueCreateDM

# 使用

# 创建抽屉

# $createAntdDrawer、$createViewDrawer、$createEleDrawer

this.$createAntdDrawer(options, arg1, arg2);
this.$createViewDrawer(options, arg1, arg2);
this.$createEleDrawer(options, arg1, arg2);

提示

title 和 content 子组件内会被传入一个名为 close 的回调函数，在子组件内使用 this.$emit('close', payload) 触发关闭行为。

提示

如果传入 payloadSlot 参数，并且相应的子组件存在 providePayload 方法，在抽屉关闭时，会先调用此函数获取返回值，然后作为 beforeClose 和 afterClose 方法的参数传入。

# options参数介绍

参数 说明 类型
drawerProps Drawer 组件的所有 props
Antd Drawer Props
iView Drawer props
ElementUI Drawer props		 Object
payloadSlot 是否需要和获取子组件的返回值，子组件需要在methods中提供providePayload方法。
  • 不传或者传false，不调用；
  • 传'title'调用标题子组件的providePayload方法；
  • 传true或者'default'调用内容子组件的providePayload方法
 true | false | 'title' | 'default'
title 标题自定义组件
  • 如果注册了全局头部，优先使用全局头部组件。此时此项可直接传 String 类型；如果此项不传，那就使用drawerProps.title作为标题。如果传对象，那就不使用全局头部组件，走自定义头部的逻辑。
  • 如果未注册全局头部，title需要传对象，其中title.template必填，类型是一个vue组件，title对象的其他参数可参考vue官方文档深入数据对象。如果 drawerProps.title 和 title 同时存在的话，优先使用 title。
 Object | String
content 内容自定义组件。其中content.template必填，类型是一个vue组件，content对象的其他参数可参考vue官方文档深入数据对象。 Object
beforeClose 抽屉关闭之前触发。其中payload代表调用子组件内调用$eimt('close', params)时携带的第二个参数；slotPayload表示从子组件中约定好的方法里获取到的返回值 function({ payload, slotPayload })
afterClose 抽屉关闭之前触发。 function({ payload, slotPayload })
stopPropagation 是否阻止原生click事件冒泡 Boolean
onClick 原生click事件 function(event)

# 代码示例

this.$createAntdDrawer({
  drawerProps: {
    title: '标题',
    width: '500px',
    mask: false,
  },
  content: {
    template: HelloWorld,
    props: {
      msg: 'Welcome to Your Vue.js App',
    },
  },
  beforeClose: function() {
    console.log('我要关闭了');
  },
  afterClose: function() {
    console.log('我已经关闭了');
  },
});

# 创建弹框

# $createAntdModal、$createViewModal、$createEleModal

this.$createAntdModal(options, arg1, arg2);
this.$createViewModal(options, arg1, arg2);
this.$createEleModal(options, arg1, arg2);

提示

title、content和foter子组件内会被传入close和ok两个回调函数和 一个名为confirmLoading的 props

  • 在子组件内使用 this.$emit('close', payload) 触发关闭动作
  • 使用 this.$emit('ok', payload) 触发 onOk 回调
  • 子组件内可以使用 confirmLoading 来管理确定按钮的 loading 状态
    • antd的modal组件可以使用默认footer，iview需要自定义footer

提示

如果传入 payloadSlot 参数，并且相应的子组件如果存在 providePayload 方法，在点击确定按钮时，会先调用此函数获取返回值，然后作为 onOk 方法的一个参数传入

提示

如果onOk函数返回false，并且是 antd 的 Modal 组件，会阻止关闭弹框；iView需要自定义 footer 组件来实现。

# options参数介绍

和上面说过的创建抽屉时传的差不多，只介绍以下几个不同的地方

参数 说明 类型
modalProps Modal 的所有props
Antd Modal
iView Modal
ElementUI Dialog		 Object
payloadSlot 同Drawer，多了一个 'footer' 选项 true | false | 'title' | 'footer' | 'default'
footer footer自定义组件 Object
onOk 点击确认按钮的回调。
如果onOk函数返回false，并且是antd的Modal组件，会阻止关闭弹框；iView需要自定义footer组件来实现。		 function({ payload, slotPayload })

# 代码示例

this.$createAntdModal({
  modalProps: {
    title: '标题',
    width: '500px',
    mask: false,
  },
  content: {
    template: HelloWorld,
    props: {
      msg: 'Welcome to Your Vue.js App',
    },
  },
  beforeClose: function() {
    console.log('我要关闭了');
  },
  afterClose: function() {
    console.log('我已经关闭了');
  },
  async onOk() {
    const res = await new Promise((resolve) => {
      setTimeout(() => {
        console.log('点了确定');
        resolve(false);
      }, 3000);
    });
    return res;
  },
});

← 类型签名 →