vue 的toast组件

2022-05-20 01:00:07 阅读：280 来源： 互联网

标签：toast vue container center 50% 组件 options

直接使用第三方库：https://github.com/Maronato/vue-toastification

1.npm install --save vue-toastification@next

2.在main.js导入和使用

import Toast from "vue-toastification";
// Import the CSS or use your own!
import "vue-toastification/dist/index.css";

const options = {
    // You can set your default options here
};

app.use(Toast, options);

3.option 常用设置：
{

containerClassName: "my-container-class",  //container使用自己的样式，不使用自己的则不用配置
transition: false, //不使用出现特效
maxToasts: 10,
newestOnTop: true

}

在vue文件的使用
setup方法

   setup() {
      // Get toast interface
      const toast = useToast();

      // These options will override the options defined in the "app.use" plugin registration for this specific toast
      // Make it available inside methods
      return { toast }
    },

调用

  methods:{
    btn_click(){
      console.log('aaa')
      this.toast.error("待开发中...",{
         position: "top-center", //出现的位置
        timeout: 2000,
        closeOnClick: false,
        closeButton: false,
        hideProgressBar: true,
        icon:false,

      });
    }
  }

当然可以对默认的样式修改

  /* When setting CSS, remember that priority increases with specificity, so don't forget to select the existing classes as well */

    /* This will only affect the top-right container */
    .Vue-Toastification__container.top-center.my-container-class{
        /*top: 10em;*/

      align-items: center;
          position: absolute;
        left: 50%;
          top: 50%;
          transform: translate(-50%,-50%);
      justify-content: center;
    /*width: 100%;*/

    }

    /* This will affect all 6 containers */
    .Vue-Toastification__toast{
        /*position: fixed;*/
      background-color: #c0c0c0;
      opacity: 0.8;
      max-width: 50%;
      min-width: 10%;
      align-items: center;
      color: black;

    }
    .Vue-Toastification__toast-body{

    /*!*width: 100%;*!*/
     text-align: center;
    /* justify-content: center;*/
    align-items: center;

      line-height: 24px;
    font-size: 16px;
    word-break: break-word;
    white-space: pre-wrap;
    }

标签：toast,vue,container,center,50%,组件,options
来源： https://www.cnblogs.com/BillBie/p/16290916.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 的toast组件