# vue-zoey-toast

> A beautiful Toast component for Vue

Latest version **1.0.6** (published 2023-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-zoey-toast
pnpm add vue-zoey-toast
yarn add vue-zoey-toast
bun add vue-zoey-toast
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2023-08-16 |
| First published | 2023-08-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 80.9 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | zoey |
| Maintainers | zoeyz0000 |
| Keywords | vue, zoeytoast, component |

## Links

- npm: https://www.npmjs.com/package/vue-zoey-toast
- npm.io page: https://npm.io/package/vue-zoey-toast

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.6.14
- [core-js](https://npm.io/package/core-js.md) ^3.8.3

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.6 (latest) — 2023-08-16
- 1.0.5 — 2023-08-16
- 1.0.4 — 2023-08-16

## README

# vueZoeyToast使用指南

### 介绍:

vueZoeyToast是一个灵活、轻量级的Vue Toast通知组件。它可以用于展示不同类型的信息提示，包括，默认信息、成功、错误、警告和提示信息。你可以自定义它们的内容、显示位置、定时关闭和样式。

### 如何安装:

使用 npm 或者 yarn 进行安装，代码如下:

```bash
npm install vue-zoey-toast --save
# OR
yarn add vue-zoey-toast
```
这将会在你的项目中添加`vue-zoey-toast`。

### 如何使用:

在你的.vue文件中，你需要引入`vue-zoey-toast`组件：

```javascript
// 在你的组件中
import vueZoeyToast from 'vue-zoey-toast';

export default {
  components: {
    vueZoeyToast
  }
};
```

然后在你的模板中，你可以使用 vue-zoey-toast，像下面这样配置它的属性：

```html
<vue-zoey-toast 
  :show="show" 
  type="success" 
  message="这是一条成功的消息!"
  position="top-right"
  :duration="5000">
</vue-zoey-toast>
```

在这里，你需要将 `show` 属性设置为 `true` 来显示Toast通知。`type` 定义了Toast的类型，你可以选择 `default`, `success`, `error`, `warning`, `info` 中的一个。`message` 是你想要显示的消息文本。`position` 定义了Toast的位置，可以是 `top-right`, `top-left`, `bottom-right`, `bottom-left` 中的一个。 `duration` 是Toast显示的持续时间，单位是毫秒。

**注意:** 如果你希望在Toast显示后一段时间自动消失，你需要设置 `duration` 属性。如果你希望用户自行关闭Toast，你可以将 `duration` 设置为 0，并提供一个关闭按钮。

### 属性:

vueZoeyToast 组件支持以下属性:

- `show` (Boolean, 默认值: `false`): 控制Toast 是否显示。
- `type` (String, 默认值: `'default'`): 确定Toast的类型。选项包括 `default`, `success`, `error`, `warning`, `info`。
- `message` (String, 默认值: `''`): Toast的消息内容。
- `position` (String, 默认值: `'top-right'`): Toast的显示位置。选项包括 `top-right`, `top-left`, `bottom-right`, `bottom-left`。
- `duration` (Number, 默认值: `3000`):  Toast显示的持续时间（以毫秒为单位）。设置为0表示Toast不会自动关闭。

### 方法:

- `close()`: 可以在任何时候被调用以关闭 Toast。

### 事件:

vueZoeyToast 组件有一个 `close` 事件，在Toast关闭时会触发。你可以以下面的方式监听这个事件：

```javascript
this.$refs.vueZoeyToast.$on('close', () => {
  console.log('Toast has been closed!');
});
```


# vue-zoey-toast 使用步骤解读
- show 是否展示tips 【true/false】
- message 提示的具体消息，比如【消息已发送】
- duration 延迟删除tips，默认3000
- 根据type属性的不同，可以显示不同类型的Toast（成功、错误等），默认default
- type 的值分别为 warning default  success error  info
- position消息展示的位置，值为bottom-left、bottom-right、top-left、top-right

- close事件，关闭弹窗
- show、type、message、position和duration，分别用于控制Toast的显示、类型、消息内容、位置和持续时间

## 具体调用
- 下载依赖
```
npm install --save vue-zoey-toast
```
- 在您的Vue项目的入口文件（通常是main.js）中导入Vue和`vue-zoey-toast`
```js
// main.js
import Vue from 'vue';
import vueZoeyToast from 'vue-zoey-toast'


```
- 使用Vue.use()方法来全局注册`vue-zoey-toast`
```js
Vue.use(vueZoeyToast)
```

- 局部引入 使用组件的Vue文件（例如，App.vue或任何其他组件文件）
```js
// APP.vue
import vueZoeyToast from 'vue-zoey-toast';

export default {
  components: {
    vueZoeyToast
  },
  // 组件的其余部分
}
```
- 在需要使用Toast的组件中，直接在模板中使用<vueZoeyToast/ >标签来使用Toast组件
```vue
<template>
  <div id="app">
    <button @click="showToastHand">显示 Toast</button>
    <vueZoeyToast :show="showToast" :type="toastType" :message="toastMessage" :position="toastPosition" :duration="toastDuration" @close="onToastClose" />

  </div>
</template>

<script>
// import vueZoeyToast from 'vue-zoey-toast';
export default {
  name: 'App',
  // components: {
  //   vueZoeyToast
  // },
  data() {
    return {
      showToast: false,
      toastPosition:'top-right',
      toastType: 'info',//warning default  success error warning info
      toastMessage: '这是一个Toast消息',
      duration: 1000
    };
  },
  methods: {
    showToastHand() {
      this.showToast = true;
    },
    onToastClose() {
      this.showToast = false;
    }
  }
}
</script>

<style>
</style>

```
# 开发上传步骤
## 安装并配置发布相关的依赖项
npm install --save-dev rimraf

## 在package.json文件中添加构建和发布脚本
```json
{
  "name": "vue-toast-component",
  "version": "1.0.0",
  "description": "A beautiful Toast component for Vue",
  "main": "dist/vue-toast-component.js",
  "keywords": ["vue", "toast", "component"],
  "author": "Your Name",
  "license": "MIT",
  "scripts": {
    "build": "rimraf dist && vue-cli-service build --target lib --name vue-toast-component src/components/Toast.vue",
    "prepublishOnly": "npm run build"
  }
}

```

## 步骤
- 使用了rimraf工具来在构建之前删除dist文件夹。
- 使用vue-cli-service将Toast.vue构建为一个名为vue-toast-component.js的库文件
- 运行以下命令将组件发布到npm
```js
npm config get registry
npm config set registry https://registry.npmjs.org/ # 检查注册表并且更换为官网注册表

npm login # 按照提示输入用户名、密码和电子邮件地址以登录到npm账户

// npm login
// npm notice Log in on https://registry.npmjs.org/
// Username: zoeyz0000
// Password: 
// Email: (this IS public) 1291609705@qq.com
// npm notice Please check your email for a one-time password (OTP)
// Enter one-time password: 12417992
// Logged in as zoeyz0000 on https://registry.npmjs.org/.

```
- 运行发布命令
```
npm publish # 将组件上传到npm仓库中
 # 不允许私有包。所以需要package.json  "private": false,
```
- 删除
```js
npm unpublish <package-name> [--force] // <package-name> 替换为您要删除的包的名称 --force 标志以强制删除
//  npm unpublish xxx --force
```

- 下载安装
```
npm install vue-zoey-toast
```

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn serve
```

### Compiles and minifies for production
```
yarn build
```

### Lints and fixes files
```
yarn lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

---
_Source: https://npm.io/package/vue-zoey-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._