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

@_nu/js-dialog

v0.0.1

Published

nu-system dialog component pure js version

Downloads

9

Readme

js-dialog

npm package

NU 「 no-ui 」 组件库系统 nu-system,弹窗组件 原生 JS 实现。

做了什么?

@_nu/js-dialog 只做了以下两件事情。

  1. 弹窗显示和隐藏的时候切换了一个,控制状态的 class _open;
  2. 弹窗显示和隐藏的时候切换了 body 的滚动状态;

@_nu/js-dialog 本身不会输出任何样式,对应的 Dom 结构和相应的 class 均来自于 vanilla-dialog

怎么用?

$ npm i @_nu/js-dialog @_nu/css-dialog
  1. @_nu/js-dialog 为逻辑组件
  2. @_nu/css-dialog 为样式组件
<!doctype html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="node_modules/@_nu/css-dialog/css/core.css">
        <!-- 弹窗居中显示 -->
        <link rel="stylesheet" href="node_modules/@_nu/css-dialog/css/position/middle.css">
        <!-- 
            <link rel="stylesheet" href="node_modules/@_nu/css-dialog/css/position/top.css">
            <link rel="stylesheet" href="node_modules/@_nu/css-dialog/css/position/right.css">
            <link rel="stylesheet" href="node_modules/@_nu/css-dialog/css/position/bottom.css">
            <link rel="stylesheet" href="node_modules/@_nu/css-dialog/css/position/left.css"> 
        -->
    </head>
    <body>

        <button class="j_dialog_trigger button" type="button">显示弹窗</button>

        <!-- 弹窗主体 start -->

        <!-- _middle 对应上面顶部的位置的CSS -->
        <div id="dialogHello" class="nu_dialog_wrap _middle">
            <label class="nu_dialog_mask j_close" title="mask"></label>
            <div class="nu_dialog">
                <label class="nu_dialog_close j_close" title="close">&times;</label>
                <div class="dialog-body">
                    <!-- 弹窗内容 -->
                </div>
            </div>
        </div>
        <!-- 弹窗主体 end -->

       <script src="./dialog/index.js"></script>
        <script>
            (function () {
                const $btn = document.querySelector('.j_dialog_trigger');

                // 点击按钮显示弹窗
                $btn.addEventListener("click", function (e) {
                    e.preventDefault();
                    new NuDialog({
                        sel: '#dialogHello'
                    });
                });
            })();
        </script>
    </body>
</html>

Api

var _api= new NuDialog({
    // [string] dom 对象选择器,内部选择器为 document.querySelector
    sel: null,  
    // [string] 用于控制弹窗的显示隐藏
    openClass: '_open', 
    // [string] 弹窗内部有这个clas,点击会触发弹窗关闭逻辑
    closeClass: 'j_close',
    // [boolean] 初始化的时候是否显示弹窗
    defaultShow: true,
    // 是否控制 body 滚动条
    isLockScroll: true,
    // [function] 当弹窗显示时触发,
    onShow: function (_api, done) {
        // _api 是整个弹窗对象,可以获取所有方法和事件
        // done() 表示显示弹窗,一些异步的状况的时候可以用到

        // 这里返回 true 才会显示,等价于done(),其它状况弹窗不会显示
        return true;
    },
    // 弹窗显示之后执行的事
    onAfterShow: function (_api) {
        // _api 是整个弹窗对象,可以获取所有方法和事件
    },
    // 关闭弹窗,如果用户设置了这个属性,需要手动触发弹窗关闭逻辑
    onClose: function (_api, done) {
        // _api 是整个弹窗对象,可以获取所有方法和事件

        // done() 表示关闭弹窗,一些异步的状况的时候可以用到

        // 这里返回 true 才会关闭,等价于done(),其它状况弹窗不会关闭
        return true;
    }
});