欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

用vue编写带动画效果的toast

程序员文章站 2024-01-04 12:40:16
...

Aniamted

为了方便快速的使用动画,我们可以使用现成的*–

npm install animate.css

Start

vue官方文档给我们指出了编写插件的步骤和一些参数,这里提供给一个编写toast的模板:

import animated from 'animate.css'

let Toast = {};
Toast.install = function(Vue,options){
    let opt ={
      type:"text",
      text:"这是一条默认的toast",
      position:"middle",
      duration:"2500"
    };

    if(options){
      Object.keys(options).forEach(key =>{
        opt[key] = options[key];
      });
    }

    Vue.prototype.$toast = op=>{

      if(typeof op ==='string'){
        opt.text = op;
      }else if(typeof op ==='object'){
        Object.keys(op).forEach(key =>{
          opt[key] = op[key];
        });//会保存上次使用toast的text
      }


      if(document.getElementsByClassName("ys-toast").length){
        return;
      }

      let toastTemplate = Vue.extend({
        template: `<div class="ys-toast animated fadeIn">
                        <p>${opt.text}</p>
                    </div>`
      });
      let toastEle = new toastTemplate().$mount().$el;
      document.body.appendChild(toastEle);
      setTimeout(function () {
        document.body.removeChild(toastEle);
      },opt.duration);
    }

};

export{
  Toast
}

How to use ?

在main.js中引用:

import {Toast} from './plugins/toast/toast'
Vue.use(Toast);//需要在new Vue({})之前调用

When will it be called?

toast一般是用来提示网络信息的,所以一般可以配合vuex的异步action来使用。
所以我们需要在调用action的时候将this通过context参数传进去,否则无法调用toast!毕竟插件是install在vue原型上的==

  setSwiper({commit,state},context){
    _get({
      url:`${GET.Slides}${state.storeId}`
    }).then(res=>res.json()).then(data=>{
      let list = [];
      if(data['data'].length){
        data['data'].forEach((item,index)=>{
          list.push({
            id:index,
            src:item["slideUrl"],
            alt:item['slideId']
          });
        });
        commit(SET_SWIPER_LIST,list);
      }else{
        context.$toast(`can't get the swiper data! data is null!`);
        console.warn("swiper list is null!");
      }
    }).catch(err=>{
       context.$toast(`Failed get swiperList! err: ${err}`);
       console.error("Failed get swiperList!",err)
    });

上一篇:

下一篇: