VUE-Day06 vue-ui

1.vue 最开始是针对pc用户

pc端 和 移动端 区别：

①屏幕宽度：pc > 992px   

②操作方式：pc 鼠标事件 移动端 触碰操作

-饿了么：基于Vue框架开发移动端组件库 Mint-UI

-MUI：开源团队 MUI

-滴滴：

 

2.vue-ui 组件 组件 mint-ui 安装与使用

方式一：学习环境下载安装

             下载 mint-ui js/css/font　　

方式二：生产环境下载安装(即脚手架中如何使用)　　

             下载 npm i mint-ui  配置　　

 

3.vue ui 组件 mint-ui组件分类

-css Components 组件 （外观）

-js Components 组件

-Form Components 组件

 

4.vue ui 组件 mint-ui组件 Toast 提示框

-下载 mint-ui js/mint css　　

-下载 vue.js

#html 加载文件顺序 先加载vue.js 再加载mint.js　　　　 

this.$toast("提示消息")；　　

this.$toast（{ }）；

 

5.vue ui 组件 mint-ui 组件 lazyLoad

<ul>

   <li>

          <img v-lazy="x.png" />  

   </li>

    ...

</ul>

#懒加载图片显示样式

img[lazy=loading]{

     width:150px;

     height:40px;

     margin:auto;

}

 

6.vue ui 组件 mint-ui 组件 轮播图

<mt-swipe :auto="4000" :show-indicators="true">

   <mt-swipe-item>

         <img src="x.jpg" />

   </mt-swipe-item>

</mt-swipe>

#注意：mint-ui 组件轮播图默认高度0