9102你的vue项目可能需要这个toast插件（附带插件核心代码）

vue-toast-show

基于vue的toast 插件。git地址

使用

安装:

npm install vue-toast-show -S
复制代码

引入:

import Toast from 'vue-toast-show';
import 'vue-toast-show/lib/style/index.css';
Vue.use(Toast);
复制代码

或者使用配置

import Toast from 'vue-toast-show';
import 'vue-toast-show/lib/style/index.css';
Vue.use(Toast, {
    type: 'info',
    duration: 3000
});
复制代码

在组件中使用:

<template>
  <div>
    <button @click="handleOpen1">默认提示</button>
    <button @click="handleOpen2">成功提示</button>
    <button @click="handleOpen3">设置时间</button>
    <button @click="handleOpen4">不自动关闭</button>
    <button @click="handleOpen5">设置类型</button>
    <button @click="handleOpen6">loading提示</button>
    <button @click="clear">清空提示</button>
  </div>
</template>
<script>
  export default {
    methods: {
      handleOpen1() {
        this.$toast('默认提示')
      },

      handleOpen2() {
        this.$toast.success('成功提示')
      },
      handleOpen3() {
        this.$toast('定时3秒', {
          duration: 3000,
          type: 'danger'
        })
      },
      handleOpen4() {
        this.$toast('不自动关闭', {
          duration: 0
        })
      },
      handleOpen5() {
        this.$toast('设置类型', {
          duration: '1000',
          type: 'info'
        })
      },
      handleOpen6() {
        this.$toast('loading提示', {
          type: 'loading提示'
        })
      },
      clear() {
        // 清空toast
        this.$toast.clear()
      }
    }
  }
</script>
复制代码

配置

Vue.use(Toast, [options])
复制代码

• type : Toast 的类型. | String | 默认: 'primary' | 可选值 "success", "primary", "warining", "danger", "info", "loading"
• duration : Number | 默认 1500ms

演示

注意事项

vue-cli3项目使用需要在vue.config.js中做以下设置：

module.exports = {
  runtimeCompiler: true
}
复制代码

插件核心代码

const Toast = {};
Toast.install = function(Vue, options) {
  let TOAST_ID = 0;
  let TOAST_LIST = [];
  let tplIntance;
  let opt = {
    type: "primary",
    duration: "1500" // 持续时间
  };

  Object.assign(opt, options);

  if (!tplIntance) {
    const wrapperTpl = Vue.extend({
      data() {
        return {
          notices: TOAST_LIST
        };
      },
      methods: {
        clear() {
          TOAST_LIST = [];
          this.notices = TOAST_LIST;
        }
      },
      template: `<div id="toast-plugin-wrapper">
                    <transition-group name="fade">
                      <div v-for="item in notices" :key="item.id" :style="{zIndex:item.id + 1000}" :class="['alert-main', item.type]">
                        <div class="alert-content">
                          <span v-if="item.icon" :class="[item.icon, 'iconfont']"></span>
                          {{ item.content }}
                        </div>
                      </div>
                    </transition-group>
                   </div>`
    });
    tplIntance = new wrapperTpl().$mount();
    const tpl = tplIntance.$el;
    document.body.appendChild(tpl);
  }

  Vue.prototype.$toast = (tips, { type, duration } = opt) => {
    let icon;
    switch (type) {
      case "success":
        icon = "icon-okl";
        break;
      case "danger":
        icon = "icon-close";
        break;
      case "info":
        icon = "icon-info";
        break;
      case "loading":
        icon = "icon-loading";
        break;
      default:
        icon = "";
        break;
    }
    TOAST_LIST.unshift({
      content: tips,
      id: ++TOAST_ID,
      type,
      icon
    });

    function remove(id) {
      setTimeout(function() {
        for (let i = 0; i < TOAST_LIST.length; i++) {
          if (TOAST_LIST[i].id === id) {
            TOAST_LIST.splice(i, 1);
            break;
          }
        }
      }, duration);
    }

    duration && remove(TOAST_ID);

  };

  ["success", "primary", "warining", "danger", "info", 'loading'].forEach(type => {
    Vue.prototype.$toast[type] = (tips, duration = opt.duration) => {
      return Vue.prototype.$toast(tips, { type, duration });
    };
  });

  Vue.prototype.$toast.clear = () => {
    tplIntance.clear();
  };
};
export default Toast;
复制代码