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

@huteming/ui-message

v4.0.0

Published

> 弹出式提示框,有多种交互形式。

Downloads

4

Readme

弹出式提示框,有多种交互形式。


全局引入

import { Message } from '@huteming/ui'
Vue.use(Message)

this.$message(options)
this.$message(message, options)
this.$message(message, title, options)

单独使用

import { Message } from '@huteming/ui'

Message(options)
Message(message, options)
Message(message, title, options)

便捷方式(推荐)

这里定义了三种常用类型各自的方法。要注意的是,因为从外部表现来看,调用类型是无关紧要的,所以 Message 配置对象并没有提供类似 type 的参数去定义类型,内部会根据传参的种类进行判断。 例如:有输入框 (showInput),代表 prompt; 显示取消按钮 (showCancelButton),代表 confirm;其余代表 alertalert 类型时,会禁用 closeOnClickModal

Message.alert(options)
Message.confirm(options)
Message.prompt(options)

注册回调

Message 方法返回的是 Promise, resolve 状态代表确定,reject 状态代表取消

Message(options)
    // 确定
    .then(res => {
        const { inputValue, action } = res
    })
    // 取消
    .catch(res => {
        const { inputValue, action } = res
    })

API

| 参数 | 说明 | 类型 | 可选值 | 默认值 | |------|-------|---------|-------|--------| | title | 提示框的标题 | String | | | | message | 提示框的内容 | String | | | | confirmButtonText | 确认按钮的文本 | String | | 确定 | | confirmButtonHighlight | 是否将确认按钮的文本加粗显示 | Boolean | | false | | showCancelButton | 是否显示取消按钮 | Boolean | | false | | cancelButtonText | 取消按钮的文本 | String | | 取消 | | cancelButtonHighlight | 是否将取消按钮的文本加粗显示 | Boolean | | false | | showInput | 是否显示一个输入框 | Boolean | | false | | inputType | 输入框的类型 | String | | text | | inputValue | 输入框的值 | String | | | | inputPlaceholder | 输入框的占位符 | String | | 请输入 | | beforeConfirm | 确定前的回调,会暂停 message 的关闭。done 用于关闭 message | Function(done, res) | | | | beforeCancel | 取消前的回调,会暂停 message 的关闭。done 用于关闭 message | Function(done, res) | | | | beforeClose | 关闭前的回调,会暂停 message 的关闭。done 用于关闭 message | Function(done, res) | | | | closeOnClickModal | 是否在点击遮罩时关闭提示框(alert 为 false) | Boolean | | true |