@szlx/easy-popup

uview-easy-popup

Installtion

npm i @szlx/easy-popup

Usage

<easy-popup ref="popup">
  <template v-slot:children="{ component }">
    <!--
      调用show的时候, 传入的component参数将在这里获取到
      用于判断当前popup需要打开渲染的组件是哪个
      这么做是考虑到不用每需要弹窗打开一个组件就写一个popup标签
    -->
    <TestComponent v-if="component === 'TestComponent'" />
    <TestComponent1 v-if="component === 'TestComponent1'" />
  </template>
</easy-popup>

import Vue from 'vue'
import EasyPopup from '@szlx/easy-popup'
Vue.component('easy-popup', EasyPopup)

const instance = this.$refs.popup.show({
  component: 'TestComponent',
  data: 'hello world',
  emits: ['test'],
  onTest: () => {}
})

// 第二种事件交互方式也是可用的, 不需要手动处理off
instance.on('test', () => {})

Props

在组件内可以调用$emit('update-property', { property, value })修改下面任意参数

参数名	说明	类型	必填	默认值
component	渲染组件的 name 值	string	是	true
padding	popup 默认 padding	boolean	否	false
mode	popup 弹出方向	string	否	bottom
height	popup 高度	string	否	70vh
background	popup 背景色	string	否	#ffffff
expandable	开启收缩功能	boolean	否	false
zIndex	popup 层级	number	否	10075
onInit	组件初始化函数名, 打开弹窗后会被调用(如果有)	string	否	popupLoad
data	传递给 onInit 方法的数据	any	否	-
emits	组绑定的事件名(用法参考示例)	string[]	否	-
onXxxx	组绑定的事件回调函数, 例: { emits: ['click'], onClick: () => {} }	function	否	-
onClose	popup 关闭回调, 同时会调用 @close	function	否	-
onOpen	popup 打开回调, 同时会调用 @open	function	否	-
nextTick	popup 的 nextTick 回调, 入参是 component	function	否	-

show 方法返回值

参数名	说明	类型
close	关闭 popup	function
on	绑定组件事件函数	function