Vue移动端框架之MintUI

关于MintUI的介绍以及安装可以参考官网：http://mint-ui.github.io/#!/zh-cn，我们在这就不做更多的介绍，这篇文章主要介绍MintUI框架中各个组件的应用，关于各个组件的效果也不会再此文章中展示效果，各组件的效果可以参考：http://elemefe.github.io/mint-ui/#/。这篇文章只讲组件的用法,在vue-cli搭建的项目中去测试。

JS Component

Toast

作用：简短的消息提示框，支持自定义位置、持续时间和样式。

在HelloWord中引入:

Swipe

作用：轮播图，可自定义轮播时间间隔、动画时长等。
首先在入口文件中引入相关的内容

import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);

效果展示如下：

2020-07-10_230201.png

Indicator

作用:加载提示框，支持自定义文本和加载图标。

Infinite scroll

作用:无限滚动指令。
在入口文件main.js中引入如下代码

import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);

Css Component

Tabbar

作用:底部选项卡，点击 tab 会切换显示的页面。依赖 tab-item 组件。

2020-07-10_220349.png

Tabbar是指图片中蓝色的区域，官网上也强调了，Tabbar需要搭配搭配 tab-container 组件使用，tab-container指的是图片中的红色区域
首先在入口文件main.js引入相关的内容，这个参考官网即可

import { Tabbar, TabItem } from 'mint-ui';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

import { Tabbar, TabItem } from 'mint-ui';
Vue.component(Tabbar.name, Tabbar);
Vue.component(TabItem.name, TabItem);

以上是官网上的代码，但我们发现如果只是把官网上的复制上来，是实现不了切换效果的，而且Tabbar也没有颜色显示，所以我们还需要自己做一些操作,在上面对应组件的script中，我们加上以下代码：