toast

功能描述

轻量级的消息弹窗提示

依赖的插件

快速使用

1.引用js和css文件

2.api方法

  toast({
     message:'参数'
  })

3.使用例子
普通
  function showToast() {
     toast({
            message:'我是toast'
     });
  }


 自定义
 function showCustomToast() {
          toast({
            message:'<font color="red">我是toast</font>'
          });
       } 

 带图
 function showImageToast() {
          toast({
            message:'<img style="width:30px;heigth:30px" src="xx.png"></img><font color="white">我是toast</font>'
          });


 ## 具体html
 <!DOCTYPE html>
    <html lang="zh">
       <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <link href="toast.css" rel="stylesheet" type="text/css">
          <title>toast</title>
    
       </head>
       <body>
           <div>
             <button onclick="showToast()">普通toast</button>
             <button onclick="showCustomToast()">自定义toast</button>
             <button onclick="showImageToast()">带图toast</button>
           </div>
    
    
        <script type="text/javascript" src="toast.js"></script>
        <script type="text/javascript">
          function showToast() {
                  toast({
                    message:'我是toast'
                  });
               }
               function showCustomToast() {
                  toast({
                    message:'<font color="red">我是toast</font>'
                  });
               }
               function showImageToast() {
                  toast({
                    message:'<img style="width:30px;heigth:30px" src="data:image/png;base64,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"></img><font color="white">我是toast</font>'
                  });
               }
        </script>
       </body>
    </html>         

特别说明

toast中message参数支持html标签内容

是否仍需要帮助? 请保持联络!
最后更新于 2024/04/24