SOURCE

console 命令行工具 X clear

                    
>
console
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/izitoast/1.4.0/css/iziToast.min.css">
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      body {
        font-size: 14px;
        font-family: -apple-system, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Arial, sans-serif;
        color: #27282b;
        background: #fff;
      }
      a {
        text-decoration: none;
        color: #27282b;
      }
      *,
      *::before,
      *::after {
        outline: none;
        box-sizing: border-box;
      }
      html,
      body {
        height: 100%;
      }
      .d1 {
        width: 80%;
        height: 100px;
        background: #eee;
        user-select: none;
        position: relative;
        display: flex;
        align-items: center;
        margin: 0 auto 50px auto;
      }
      .d1 a {
        margin-right: 20px;
      }
      
    </style>
  </head>

  <body>
    <div class="wrapper" id="app">
      <div class="d1">
        <a href="javascript:;" @click="success()">成功</a>
        <a href="javascript:;" @click="error()">失败</a>
        <a href="javascript:;" @click="warn()">警告</a>
        <a href="javascript:;" @click="info()">默认</a>
      </div>
    </div>
    
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/izitoast/1.4.0/js/iziToast.min.js"></script>
    <script>
    
// 引入css和js再复制这段就完了----------
// -- start ------------------
const iToast = {
  info(msg='', bgColor='#455471', icon, timeout=4e3) {
    iziToast.show({
      title: '',
      message: msg,
      position: 'topCenter',
      backgroundColor: bgColor,
      theme: 'dark',
      messageColor: '#fff',
      progressBar: false,
      timeout,
      icon,
    })
  },
  success(msg, timeout) {
    return this.info(msg, '#0c6', 'ico-success', timeout)
  },
  warn(msg, timeout) {
    return this.info(msg, '#ffa931', 'ico-warning', timeout)
  },
  error(msg, timeout) {
    return this.info(msg, '#e55', 'ico-error', timeout)
  },
}

// -- end ---------

      
      const vm = new Vue({
        el: '#app',
        methods: {
          success() {
            iToast.success('成功', 800)
          },
          error() {
            iToast.error('失败')
          },
          warn() {
            iToast.warn('警告')
          },
          info() {
            iToast.info('默认')
          },
        },
      })
      
    </script>
  </body>
</html>