vue 移动端UI组件/项目 (mint-ui;mui)

最新推荐文章于 2024-11-20 09:45:55 发布

qq_31749421

最新推荐文章于 2024-11-20 09:45:55 发布

阅读量688

点赞数

分类专栏：移动端web开发

本文链接：https://blog.youkuaiyun.com/qq_31749421/article/details/88042460

版权

移动端web开发专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍Mint-UI库的使用，包括如何通过Mint-UI实现自定义样式的Toast弹窗效果，以及如何应用LazyLoad组件进行图片懒加载，优化页面性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Mint-UI—Toast

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/mint-ui/lib/index.js"></script>
  <style type="text/css">
      .mytoast{
      color:#e4393c;         /*红色文字*/
      background-color: #fff;/*白色背景*/
      font-size:12px;          /*字体*/
      border:1px solid #aaa; /*边框*/
    }
  </style>
</head>
<body>
  <div id="app">
    <mt-button @click.native="handleClick">Button</mt-button>
  </div>
</body>
  <!-- import Vue before Mint UI -->
  
  <script>
    new Vue({
      el: '#app',
      //点击出现弹框
      methods: {
        handleClick: function() {
          this.$toast({
          message: 'Upload Complete',
          position: 'bottom',
          duration: 5000,
           className:"mytoast"  

          });
        }
      },
      //直接出现弹框
      //   created(){
      //  let instance= this.$toast({
      //   message: 'Upload Complete',
      //   position: 'bottom',
      //   duration: -1
      // });
        
      //   setTimeout(() => {
      //     instance.close();
      //   }, 2000);
      // }

      //   }
    })
  </script>
</html>

在这里插入图片描述

Mint-UI—LazyLoad

知识点
懒加载图片组件

img[lazy=loading]{ width:40px; height:100px; margin:auto; } #### 实际的应用： ``` Document

<script>
  new Vue({
    el:"#app",
    data:function(){
      return {
        list:
          ["img/01.jpg",
          "img/02.jpg",
          "img/03.jpg",
          "img/04.jpg"
          ]
      }
    }
  });
</script>

```