vue-zoey-toast

v1.0.6

Published

3 years ago

A beautiful Toast component for Vue

0High
0Medium
0Low

zoeyz0000

vue zoeytoast component

vueZoeyToast使用指南

介绍:

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

如何安装:

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

npm install vue-zoey-toast --save
# OR
yarn add vue-zoey-toast

这将会在你的项目中添加vue-zoey-toast。

如何使用:

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

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

export default {
  components: {
    vueZoeyToast
  }
};

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

<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关闭时会触发。你可以以下面的方式监听这个事件：

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

// main.js
import Vue from 'vue';
import vueZoeyToast from 'vue-zoey-toast'

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

Vue.use(vueZoeyToast)

局部引入使用组件的Vue文件（例如，App.vue或任何其他组件文件）

// APP.vue
import vueZoeyToast from 'vue-zoey-toast';

export default {
  components: {
    vueZoeyToast
  },
  // 组件的其余部分
}

在需要使用Toast的组件中，直接在模板中使用<vueZoeyToast/ >标签来使用Toast组件

<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文件中添加构建和发布脚本

{
  "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

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) [email protected]
// 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,

删除

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.