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 |