vue 的toast组件

直接使用第三方库：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