1.0.6 • Published 9 months ago
vue-zoey-toast v1.0.6
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) 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,
- 删除
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