1.0.5 • Published 10 months ago
@szlx/easy-popup v1.0.5
uview-easy-popup
Installtion
npm i @szlx/easy-popupUsage
<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 |