Yummi

使用方法

安装yummi。

npm install yummi --save

引入

import { defineYummi } from 'yummi';

一些yummiUse

import { useDialog, defineYummi } from 'yummi';

export default defineYummi({
	useHook() {
	return new uesDialog().create()
	}
})
// useDialog依赖于elementui，需要先下载elementui

.useDialog

new useDialog().create().use(指定组件).config(指定配置).open(传入props).on('confirm', () => {}).on('cancel', () => {});

new useDialog(options)

函数支持链式调用

new useDialog(options).create(options).use(component).open(id).config(id2).load().get();

预备useDialog 构建options

• options<Object>
  • destroyable<boolean> dialog是否会被自动销毁
  • isCacheComponents<boolean> dialog是否缓存use的组件 还在开发阶段

create(options)

初始化dialog组件 这时候将在全局产生一个dialog组件

• options<Object>
  • id<string> 如果传递了id，dialog组件将被缓存，下次同id的useDialog将从缓存中获取

use(VueComponent, options)

使用组件

• VueComponent<VueComponent> 传递一个需要被用到的Vue组件 let VueComponent = { render: (h) => h() };

• options<Object> 定义被使用组件的唯一标识，use后，id将被缓存，后续方法name无需再传递 比如config(name, options)/open(name, info)等 dialog.use(Demo, { id: 'demo' }).config({ title: 'demo弹窗' }).open({ info: {} })

  • id 同 config(name, options) options

config(name, options)

设置dialog的options

• name <Null|string>
• options<Object>

  • confirmText

  • cancelText

  • class

  • title

  • noOperation

  • action <Array> eq: ['confirm', 'cancel']| ['cancel']|['confirm']

  • renderFooter <(h, ctx):vNode> 当设置该参数时，footer将被自定义，与默认footer相关的(confirmText/cancelText,action...)参数将无效 - h - ctx - getComponent 获取当前组件 - load 同dialog load - loadend - close - openId 同options的id - nextTick vue nextTick - updateProps 更新组件的props - componentName 当前组件ref名 - emit 组件发送事件 在on方法可监听

open(name, info, options)

打开dialog

• name <Null|string>
• info<Object>
• options<Object>
  • 同config(name, options)的options

on(eventName, callback)

监听事件

• eventName <string>
• callback(ctx, params) <function> 组件对象(非实例)
  • ctx <Object> 获取当前组件 返回当前弹窗use的组件
    • getComponent <function>

get(name)

根据name返回指定use组件的参数

load()

使dialog的操作按钮变为loading

loadend()

使dialog的操作按钮取消loading

close()

关闭dialog

confirm(callback, options)

dialog的confirm按钮的操作回调

cancel(callback, options)

dialog的cancel按钮的操作回调

shut(callback, options)

dialog的右上角close按钮的操作回调

destroy(vm)

销毁dialog

• vm