包说明

此包提供了一些vue组件：

• Popup（弹窗组件）

维护： github

Install

npm install @charyliu/pack-vue

Usage

import {
  Popup, showPop, hidePop
} from '@charyliu/pack-vue'

Popup组件说明

Popup.props

| 属性 | 类型 | 必填 | 默认 | 描述 | |----------------|--------------|------|---------|--------------| | isCenter | boolean | false | true | 弹窗是否居中显示 | | maskOpacity | number | false | 0.7 | 弹窗蒙层（黑色）透明度 | | clickMaskHide | boolean | false | false | 点击弹窗蒙层关闭弹窗 | | maskClickThrough | boolean | false | false | 弹窗蒙层是否点击穿透 | | contentClassName | string | false | '' | 弹窗内容样式类名 |

showPop

/** 弹窗配置 */
interface PopOptions {
    /** 弹窗层级（打开高层级弹窗将自动隐藏低层级弹窗，关闭高层级弹窗后低层级弹窗将自动显示），默认0 */
    zIndex?: number;
    /** 弹窗是否居中显示，默认true */
    isCenter?: boolean;
    /** 弹窗蒙层（黑色）透明度, 默认0.7 */
    maskOpacity?: number;
    /** 点击弹窗蒙层关闭弹窗，默认false */
    clickMaskHide?: boolean;
    /** 点击弹窗蒙层回调 */
    onClickMask?: Function;
    /** 弹窗蒙层是否点击穿透, 默认false */
    maskClickThrough?: boolean;
    /** 弹窗内容样式类名 */
    contentClassName?: string;
    /** 自定义传入参数，会注入到弹出组件的props */
    [keyName: string]: any;
}
/**
 * 展示弹窗
 * @param popComp 弹窗组件
 * @param options 弹窗配置
 * @returns 弹窗id
 */
declare const showPop: (popComp: Vue.Component, options?: PopOptions) => string;

hidePop

/**
 * 隐藏弹窗
 * @param options 弹窗关闭配置
 */
declare function hidePop(options?: {
    /** 关闭全部 */
    isHideAll?: boolean;
    /** 要隐藏的弹窗的id，未传默认隐藏最上层弹窗 */
    id?: string;
    /** 弹窗内容样式类名 */
    contentClassName?: string;
    /** 延迟关闭弹窗的时间（ms），默认0 */
    delay?: number;
}): void;

使用示范

• App.vue引入Popup组件

<script setup>
import { Popup } from '@charyliu/pack-vue'
import Index from 'index.vue'
</script>

<template>
  <div style="position: absolute; width: 100%; height: 100%">
    <Popup/>
    <Index></Index>
  </div>
</template>

<style scoped></style>

• 其它组件（如index.vue）使用showPop/hidePop显隐弹窗

<script setup>
import { showPop, hidePop } from '@charyliu/pack-vue'
import Rank from 'rank.vue'
// 打开排行榜弹窗
const showRank = () => {
  showPop(Rank);
  setTimeout(() => {
    // 隐藏排行榜弹窗
    hidePop(Rank);
  }, 2000);
};
</script>

<template>
  <div style="position: absolute; width: 100%; height: 100%;">
    <Popup />
    <button @click="showRank">showRank</button>
  </div>
</template>

<style scoped></style>