使用过Mint-ui组件库的小伙伴都应该知道Toast这个玩意。小编刚刚用的时候，觉得一切的逻辑都是十分完美，但是就是不出来。下面看看具体的使用步骤
1.安装并引入mint-ui
① 安装方式
npm i mint-ui -S
② 引入方式
引入的方式主要有两种，一种是全局引入，一种是按需引入。一般推荐按需引入。因为全局引入时会引入很多不必要的代码，使性能降低。
import { Toast } from 'mint-ui';
Vue.use(Toast)
2.引入Toast
尽管在前面的main.js文件引入了一次Toast之后，在使用的组件中也需要再次引用Toast，并且为了和用户实现交互，需要引入index.js文件和style.css文件
<script>
import { Toast } from 'mint-ui';
import '../../assets/js/index.js'
</script>
<style>
@import '../../assets/css/book/style.css';
</style>
3.使用Toast
① 绑定事件
为触发Toast显示消息提示框，需要通过 @click 增加点击事件
② 配置Toast参数
Toast的参数主要有三个：
message：消息提示框提示的内容
position：消息提示框出现的位置
duration：消息提示框存在的时间，一般以毫秒为单位。
① 在html结构中绑定点击事件
<button @click="showToast">加入购物车</button>
② 在组件的methods中配置Toast的参数
methods:{
showToast(){
Toast({
message: "加入购物车成功",
position: 'center',
duration: 1000
})
}
}
实现的效果图如下所示：
以下也是本人的博客~请多多指教哈
原文链接：https://blog.csdn.net/weixin_43332684/article/details/107516379
