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

kmodal

v1.2.4

Published

modal 支持vue plugin

Downloads

2

Readme

kmodal

这是vue使用的一个弹层消息全局组件

目前有5种已存在的消息模板

默认: default 信息: info 危险: danger 警告: warning 成功: success

安装

npm i kmodal

使用方式(目前只支持vue.use使用)

import vue from 'vue.js'
import kmodal from 'kmodal.js'

vue.use(kmodal)

使用组件
<k-modal ref="kmodal"></k-modal>

在App组件内加载完成后初始化一次
this.$kmodal.init(this.$refs.kmodal)

更新:

  1. show新增异步回调
  2. 默认主题样式 kmodal-theme-default 例:
<k-modal class="kmodal-theme-default"></k-modal>
  1. 切换效果自定义 通过animType配合@keyframes
  2. 自定义modal内容

打开kmodal

弹出消息

this.$kmodal.show({
    type: 'success',   // 消息类型
    duration: 500,     // 过渡时长(毫秒单位)
    timingFn: 'linear' // 速度曲线,可以使用所有css3 transition中的速度曲线
    message: 'message content' // 设置弹出消息的文字内容
    animType: 'fade' // 目前已定义过渡动画方式 fade
}).then(function (res) {
    // 取消 false 确定 true
})

关闭kmodal

隐藏消息

this.$kmodal.hide({
    duration: 500,     // 过渡时长(毫秒单位)
    timingFn: 'linear' // 过渡函数
})

提供slot自定义kmodal中的内容

<k-modal>
    <p>kmodal 自定义内容</p>
</k-modal>

切换效果自定义 通过animType配合@keyframes

/** 
可以定制的切换效果
fade为可变的值, 以传入的animType为准
animType: fade
**/

@keyframes kcoverFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes kcoverFadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, 80px)
    }
    100% {
        opacity: 1;
        transform: translate(-50%, 100px)
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translate(-50%, 100px)
    }
    100% {
        opacity: 0;
        transform: translate(-50%, 80px)
    }
}

演示地址 git地址