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

@ophiuchus/toast

v1.0.2

Published

### 介绍

Downloads

1

Readme

Toast 轻提示

介绍

在页面中间弹出黑色半透明提示,用于消息通知、加载提示、操作结果提示等场景。

引入

import Vue from 'vue';
import Toast from '@ophiuchus/toast';

Vue.use(Toast);

代码演示

文字提示

Toast('提示内容');

加载提示

使用 Toast.loading 方法展示加载提示,通过 forbidClick 属性可以禁用背景点击。

Toast.loading({
  message: '加载中...',
  forbidClick: true,
});

成功/失败提示

使用 Toast.success 方法展示成功提示,使用 Toast.fail 方法展示失败提示。

Toast.success('成功文案');
Toast.fail('失败文案');

自定义图标

通过 icon 选项可以自定义图标,支持传入图标名称或图片链接,通过loadingType 属性可以自定义加载图标类型。

Toast({
  message: '自定义图标',
  icon: 'like-o',
});

Toast({
  message: '自定义图片',
  icon: 'https://img01.yzcdn.cn/vant/logo.png',
});

// 自定义加载图标
Toast.loading({
  message: '加载中...',
  forbidClick: true,
  loadingType: 'spinner',
});

自定义位置

Toast 默认渲染在屏幕正中位置,通过 position 属性可以控制 Toast 展示的位置。

Toast({
  message: '顶部展示',
  position: 'top',
});

Toast({
  message: '底部展示',
  position: 'bottom',
});

动态更新提示

执行 Toast 方法时会返回对应的 Toast 实例,通过修改实例上的 message 属性可以实现动态更新提示的效果。

const toast = Toast.loading({
  duration: 0, // 持续展示 toast
  forbidClick: true,
  message: '倒计时 3 秒',
});

let second = 3;
const timer = setInterval(() => {
  second--;
  if (second) {
    toast.message = `倒计时 ${second} 秒`;
  } else {
    clearInterval(timer);
    // 手动清除 Toast
    Toast.clear();
  }
}, 1000);

全局方法

引入 Toast 组件后,会自动在 Vue 的 prototype 上挂载 $toast 方法,便于在组件内调用。

export default {
  mounted() {
    this.$toast('提示文案');
  },
};

单例模式

Toast 默认采用单例模式,即同一时间只会存在一个 Toast,如果需要在同一时间弹出多个 Toast,可以参考下面的示例:

Toast.allowMultiple();

const toast1 = Toast('第一个 Toast');
const toast2 = Toast.success('第二个 Toast');

toast1.clear();
toast2.clear();

修改默认配置

通过 Toast.setDefaultOptions 函数可以全局修改 Toast 的默认配置。

// 将所有 Toast 的展示时长设置为 2000 毫秒
Toast.setDefaultOptions({ duration: 2000 });

// 将所有 loading Toast 设置为背景不可点击
Toast.setDefaultOptions('loading', { forbidClick: true });

// 重置所有 Toast 的默认配置
Toast.resetDefaultOptions();

// 重置 loading Toast 的默认配置
Toast.resetDefaultOptions('loading');

API

方法

| 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | | Toast | 展示提示 | options | message | toast 实例 | | Toast.loading | 展示加载提示 | options | message | toast 实例 | | Toast.success | 展示成功提示 | options | message | toast 实例 | | Toast.fail | 展示失败提示 | options | message | toast 实例 | | Toast.clear | 关闭提示 | clearAll: boolean | void | | Toast.allowMultiple | 允许同时存在多个 Toast | - | void | | Toast.setDefaultOptions | 修改默认配置,对所有 Toast 生效。传入 type 可以修改指定类型的默认配置 | type | options | void | | Toast.resetDefaultOptions | 重置默认配置,对所有 Toast 生效。传入 type 可以重置指定类型的默认配置 | type | void |

Options

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | type | 提示类型,可选值为 loading successfail html | string | text | | position | 位置,可选值为 top bottom | string | middle | | message | 文本内容,支持通过\n换行 | string | '' | - | | icon | 自定义图标,支持传入图标名称或图片链接 | string | - | | iconPrefix | 图标类名前缀,同 Icon 组件的 class-prefix 属性 | string | sf-icon | | overlay | 是否显示背景遮罩层 | boolean | false | | forbidClick | 是否禁止背景点击 | boolean | false | | closeOnClick | 是否在点击后关闭 | boolean | false | | closeOnClickOverlay | 是否在点击遮罩层后关闭 | boolean | false | | loadingType | 加载图标类型, 可选值为 spinner | string | circular | | duration | 展示时长(ms),值为 0 时,toast 不会消失 | number | 2000 | | className | 自定义类名 | any | - | | onOpened | 完全展示后的回调函数 | Function | - | | onClose | 关闭时的回调函数 | Function | - | | transition | 动画类名,等价于 transtionname属性 | string | sf-fade | | getContainer | 指定挂载的节点,用法示例 | string | () => Element | body |

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考主题定制

| 名称 | 默认值 | 描述 | | ------------------------------- | ------------------------- | ---- | | @toast-max-width | 70% | - | | @toast-font-size | @font-size-md | - | | @toast-text-color | @white | - | | @toast-loading-icon-color | @white | - | | @toast-line-height | @line-height-md | - | | @toast-border-radius | @border-radius-lg | - | | @toast-background-color | fade(@black, 70%) | - | | @toast-icon-size | 36px | - | | @toast-text-min-width | 96px | - | | @toast-text-padding | @padding-xs @padding-sm | - | | @toast-default-padding | @padding-md | - | | @toast-default-width | 88px | - | | @toast-default-min-height | 88px | - | | @toast-position-top-distance | 20% | - | | @toast-position-bottom-distance | 20% | - |