# @deveodk/vue-toastr 中文文档

规范地址：https://npmcn.com/package/%40deveodk/vue-toastr/

版本：1\.1\.0
npm 元数据更新时间：2022-04-05T04:05:17.681Z
中文译文更新时间：2026-11-12T13:14:00.302Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40deveodk/vue-toastr
原文对照：https://npmcn.com/package/%40deveodk/vue-toastr/?lang=original
项目主页：https://github.com/deveodk/vue-toastr#readme
源码仓库：https://github.com/deveodk/vue-toastr

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：113 kB，14 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：vue ^2\.3\.0
- 首次发布：2017-05-30T13:43:21.148Z
- 最新版本发布：2019-08-20T20:41:09.846Z
- 近 30 天下载量：2421（2026-10-12 至 2026-11-10，npm 官方下载统计）
- 已发布版本数：8（近 12 个月 0 个）

## 中文简介

由 Code Seven/toastr 所启发的易用烤面包机插件

## 安装

```sh
npm install @deveodk/vue-toastr
```

也可以使用：`pnpm add @deveodk/vue-toastr`、`yarn add @deveodk/vue-toastr`、`bun add @deveodk/vue-toastr`

## README

# @Deveodk/vue-toastr (英语)

![](https://cloud.githubusercontent.com/assets/7561792/26641086/c3acfbd6-4629-11e7-8883-600f1cbb7b55.png)

[![npm](https://img.shields.io/npm/v/@deveodk/vue-toastr.svg)](https://www.npmjs.com/package/@deveodk/vue-toastr) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

> 由 Code Seven/toastr 所启发的易用烤面包机插件

# 演示

见功能演示 [deveo 演示网站](https://packages.deveo.io/packages/vue/vue-toastr)

## 安装

```bash
npm install --save @deveodk/vue-toastr
```

## 使用量

### Bundler (Webpack, Rollup) (英语)

```js
import Vue from 'vue'
import VueToastr from '@deveodk/vue-toastr'
// You need a specific loader for CSS files like https://github.com/webpack/css-loader
// If you would like custom styling of the toastr the css file can be replaced
import '@deveodk/vue-toastr/dist/@deveodk/vue-toastr.css'

Vue.use(VueToastr)
```

### 浏览器

```html
<!-- From CDN -->
<link rel="stylesheet" href="https://unpkg.com/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.min.css"></link>
<script src="https://unpkg.com/@deveodk/vue-toastr/dist/@deveodk/vue-toastr.min.js"></script>
```

## 配置

烤面包机默认配置如下:

可用职位:

```js
'toast-top-right'
'toast-bottom-right'
'toast-bottom-left'
'toast-top-left'
'toast-top-full-width'
'toast-bottom-full-width'
'toast-top-center'
'toast-bottom-center'
```

可用类型 :

```js
'success'
'error'
'info'
'warning'
```

```js
import VueToastr from '@deveodk/vue-toastr'
Vue.use(VueToastr, {
    defaultPosition: 'toast-bottom-left',
    defaultType: 'info',
    defaultTimeout: 1000
})
```

## 使用量

这个 `$toastr` 原型钩和如何使用.

```js
// Make a success toastr
this.$toastr('success', 'i am a toastr success', 'hello')
```

```js
// Make a error toastr
this.$toastr('error', 'i am a toastr error', 'hello')
```

```js
// Make a warning toastr
this.$toastr('warning', 'i am a toastr warning', 'hello')
```

```js
// Make a info toastr
this.$toastr('info', 'i am a toastr info', 'hello')
```

```js
// Make a toastr with custom properties
this.$toastr('add', {
  title: 'Heyy', // Toast Title
  msg: 'I am a custom property toastr' // Message
  timeout: 1000, // Timeout in ms
  position: 'toast-bottom-full-width', // Toastr position
  type: 'info', // Toastr type
  closeOnHover: true, // On mouse over stop timeout can be boolean; default true
  clickClose: false, // On click toast close can be boolean; default false
  // Available callbacks
  onCreated: () => console.log('toast was created'),
  onClicked: () => console.log('toast was clicked'),
  onClosed: () => console.log('toast was closed'),
  onMouseOver: () => console.log('toast was moused over'),
  onMouseOut: () => console.log('mouse left the toast')
})
```

## 实例

```js
// Using toastr in real world application
<link rel="stylesheet" href="/@deveodk/vue-toastr/dist/vue-toastr.css"></link>
<script src="/@deveodk/vue-toastr/dist/vue-toastr.js"></script>
<script>
new Vue({
  el: 'body',
  mounted: function () {
      this.showToastr()
   },
  methods: {
    showToastr: function () {
        this.$toastr('success', 'it works!', 'Yeahh')
    }
  }
})
</script>
```

## 特别谢谢

特别感谢 [s4l1小时](https://github.com/s4l1h) 用于创建原始软件包。 大约30%的源代码来自vue-toastr

## 许可证

[麻省理工学院](http://opensource.org/licenses/MIT)

[![Deveo](https://s3-eu-west-1.amazonaws.com/rk-solutions/github_footer.png)](https://deveo.dk/)

## 常见问题

### @deveodk/vue-toastr 是什么？

由 Code Seven/toastr 所启发的易用烤面包机插件

### 如何安装 @deveodk/vue-toastr？

在项目目录运行 npm install @deveodk/vue-toastr，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^2\.3\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @deveodk/vue-toastr 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/deveodk\_\_vue-toastr 是否存在。

### @deveodk/vue-toastr 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @deveodk/vue-toastr 可以商用吗？

@deveodk/vue-toastr 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @deveodk/vue-toastr 的下载量有多少？

根据 npm 官方下载统计，@deveodk/vue-toastr 在 2026/10/12 – 2026/11/10 这 30 天内被下载 2,421 次，日均约 81 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @deveodk/vue-toastr 还在维护吗？

最新版本 1\.1\.0 发布于 2019/08/21（7 年前）；至今共发布 8 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/05/30。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。