npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-pups

v0.0.2

Published

实用的应用级弹窗开发工具

Downloads

10

Readme

vue-pups 文档

实用的应用级弹窗开发工具

  • 组件式开发,函数式调用
  • 让弹窗摆脱 Template/v-show/v-if 的限制
  • 异步函数回调,实现更加灵活可控的弹窗流程控制

简单上手

安装

npm install vue-pups

引入

import { VPups } from 'vue-pups'
import 'vue-pups/dist/style.css'

开发弹窗组件

# @/popups/instances/Popup1.vue
<template>
    <div class="Popup1">
        <div>Popup1</div>
        <button @click="$emit('close', 'confirm')">确认按钮</button>
        <button @click="$emit('close')">关闭按钮</button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
	name: 'Popup1',
})
</script>

<style scoped>
.Popup1 {
    background-color: #fff;
    padding: 12px;
}
</style>

实例化并挂载组件

// @/popups/index.ts
import Popup1 from '@/popups/instances/Popup1.vue'

const vPups = new VPups({
    Popup1,
})

export { vPups }

在页面中使用

# @/views/Home.vue
<template>
    <div class="Home">
        <button @click="onClick">打开弹窗</button>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { vPups } from '@/popups/index.ts'

export default defineComponent({
	name: 'Home',
    setup () {
        const onClick = async () => {
			const res = await vPups.show('Popup1')
            console.log(res) // close / confirm
        }

        return {
            onClick
        }
    }
})
</script>

<style scoped>
.Home {
    width: 100vw;
    height: 100vh;
}
</style>

API

VPups

类型

declare class VPups<T extends Record<string, any>> {
    /**
     * 构造函数
     * @param instances 弹窗实例集对象
     * @param id 弹窗 root元素的 id,一般用于需要创建多个 VPups 实例时使用,默认为 vue-poups
     */
    constructor(instances: T, id?: string);
    
    /** 弹窗状态切换监听器 */
    readonly toggleListener: {
        /** 任意弹窗被唤起时,此函数将被调用,可被覆写。默认函数设置了窗口不可滚动 */
        onShow(): void;
        /** 任意弹窗被关闭时,此函数将被调用,可被覆写。默认函数恢复了窗口滚动 */
        onHide(): void;
		/** 当 style.zIndex 被修改时,此函数将被调用,可被覆写。默认为空函数 */
        onDepthSet(zIndex: number): void;
    }
    
    readonly style: {
        // 设置弹窗层级
        // 当存在别的组件与本组件默认的 z-index 冲突时,可通过设置此属性进行修改
        get zIndex(): number;
        set zIndex(zIndex: number);
        
		// 设置遮罩层的可点击性,设置为 false,则不能通过点击遮罩关闭弹窗
        // 当需要阻止用户通过点击遮罩层关闭弹窗时,可通过设置此属性进行修改
        // 针对单个弹窗的需求,可以在对应弹窗组件的 onMounted 和 onUnmounted 生命周期函数中进行切换
        get clickable(): boolean;
        set clickable(clickable: boolean);
        
		// vue 内置组件 transition 的过渡类名
		// 内置了三种形式的过渡动画,弹跳/缩放/淡出淡入,
        // 亦可使用自定义的过渡类名,自定义默认类名不可内置于 scoped 组件样式中
        get transitionName(): 'vp-bounce' | 'vp-scale' | 'vp-fade' | string;
        set transitionName(name: 'vp-bounce' | 'vp-scale' | 'vp-fade' | string);
        
		// 弹窗盒子(.vue_poups_box)的内联样式
        get boxStyle(): Record<string, any>;
        set boxStyle(style: Record<string, any>);
    };

    /**
     * 弹出某个实例弹窗
     * @param name 实例弹窗名
     * @param props 实例弹窗属性, 作用于 vue 组件的 props
     */
    show(name: keyof T, props?: Record<string, any>): Promise<unknown>;
    
    /** 
     * 清除所有实例弹窗
     * 不会执行过渡动画,所有弹窗将直接消失
     */
    clear(): void;
    
    /** 
     * 挂载插件, 同 vue 的 createApp().use
     * vue-pups 实际上是创建一个平行于主程序的 vue app,因此,同样可以使用跟主程序一样的方式进行插件挂载
     * 如果你的弹窗需要用到跟主程序一样的第三方库/路由/vuex,则可以通过此方法进行挂载
     */
    use(plugin: Plugin, ...options: any[]): App<any>;
}

事件

vue-pups 监听了来自弹窗组件的 close事件,你可以在编写的弹窗实例中,触发close事件以关闭弹窗,同时传递回调参数,以供后续判断。

具体例子,可参考上方简单上手一节中,关于开发弹窗组件一目。

兼容性

  1. vue-pups 源码使用了部分 es6 高阶 API,如果你的程序与之不兼容,可以拉取源码,并将 vite.config.ts 中 @babel/plugin-transform-runtime 部分的注释打开,此后自行编译即可。此操作将增加包的体积。
  2. 或者在你自己的程序中,引入对应 polyfill 进行兼容。一般5/6年内的手机都没问题,就怕超级钉子户。
  3. 注意:本程序只兼容了vue3版本,请不要在vue2版本的程序中使用

仓库

gitee github

更新日志

  • 0.0.2
    • 修复 vite 将 rgba() 编译成 #RGBA 的问题
  • 0.0.1
    • 发布