关于MintUI的介绍以及安装可以参考官网：http://mint-ui.github.io/#!/zh-cn，我们在这就不做更多的介绍，这篇文章主要介绍MintUI框架中各个组件的应用，关于各个组件的效果也不会再此文章中展示效果，各组件的效果可以参考：http://elemefe.github.io/mint-ui/#/。这篇文章只讲组件的用法,在vue-cli搭建的项目中去测试。
JS Component
Toast
作用：简短的消息提示框，支持自定义位置、持续时间和样式。
在HelloWord中引入:
<template>
<button @click="btn">按钮</button>
</template>
<script>
import { Toast } from 'mint-ui';
Toast('Upload Complete');
export default(){
methods:{
btn(){
let a=Toast({
message: '操作成功',
iconClass: 'icon icon-success'
})
}
}
}
</script>
Swipe
作用：轮播图，可自定义轮播时间间隔、动画时长等。
首先在入口文件中引入相关的内容
import { Swipe, SwipeItem } from 'mint-ui';
Vue.component(Swipe.name, Swipe);
Vue.component(SwipeItem.name, SwipeItem);
<template>
<div class="swiper">
<mt-swipe :auto="4000">
<mt-swipe-item>
<img src="/static/1.jpg" alt="">
</mt-swipe-item>
<mt-swipe-item>
<img src="/static/2.jpg" alt="">
</mt-swipe-item>
<mt-swipe-item>
<img src="/static/3.jpg" alt="">
</mt-swipe-item>
</mt-swipe>
</div>
</template>
<style>
.swiper{
height:200px;//要设置一个高度，要不看不到在哪
}
.swiper img{
width:100%;
}
</style>
效果展示如下：
2020-07-10_230201.png
Indicator
作用:加载提示框，支持自定义文本和加载图标。
<template>
<div>
<button @click="show">点击显示加载</button>
</div>
</template>
<script>
import { Indicator } from 'mint-ui';
export default{
name:"HelloWord",
data(){
return{
}
},
methods:{
show(){
this.load();
setTimeout(()=>{
Indicator.close(); //使用定时器，3s后结束加载动画
},3000)
},
load(){
let loading= Indicator.open({
text: '加载中...',
spinnerType: 'fading-circle'
});
}
}
}
</script>
Infinite scroll
作用:无限滚动指令。
在入口文件main.js中引入如下代码
import { InfiniteScroll } from 'mint-ui';
Vue.use(InfiniteScroll);
<template>
<div>
<ul
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="5">
<li v-for="item in list">{{ item }}</li>
</ul>
<!-- 加载中...... -->
<mt-spinner type="fading-circle"></mt-spinner>
</div>
</template>
<style>
li{
list-style:none;
height:30px;
line-height:30px;
border:1px soldi #f4f4f4;
}
</style>
<script>
export default{
name:"HelloWord",
data(){
return{
list:[1,2,3,4,5,6,7,8,9,10,11,12,13,14],
isLoading: false, // 加载中....spinner组件
}
},
methods:{
loadMore() {
this.loading = true;
setTimeout(() => {
let last = this.list[this.list.length - 1];
for (let i = 1; i <= 10; i++) {
this.list.push(last + i);
}
this.loading = false;
}, 2500);
}
}
}
如果我们只是把按照官网上把Infinite scroll中的代码直接拷贝过来，我们发现是实现不了的，第一个我们要加的是list数据，加上list之后就可以加载了，但是我么发现没有加载图标，所以我们还需要借助另一个组件Spinner(加载动画，可指定显示类型、尺寸和颜色。),直接从官网找即可
Message box
弹出式提示框，有多种交互形式。
<template>
<div>
<button @click="show">点击</button>
</div>
</template>
<style>
</style>
<script>
import { MessageBox } from 'mint-ui';
export default{
name:"HelloWord",
methods:{
show(){
MessageBox({
title: '提示',
message: '确定执行此操作?',
showCancelButton: true
});
},
// prompt提示框
show(){
MessageBox.prompt('请输入姓名').then(({ value, action }) => {
});
}
}
}
</script>
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);
<template>
<!--tab-container-->
<div>
<mt-tab-container v-model="active">
<mt-tab-container-item id="tab-container1">
<mt-cell v-for="n in 10" title="tab-container 1"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container2">
<mt-cell v-for="n in 5" title="tab-container 2"></mt-cell>
</mt-tab-container-item>
<mt-tab-container-item id="tab-container3">
<mt-cell v-for="n in 7" title="tab-container 3"></mt-cell>
</mt-tab-container-item>
</mt-tab-container>
<!--Tabbar-->
<mt-tabbar v-model="selected">
<mt-tab-item id="tab-container1">
<!-- <img slot="icon" src="../assets/100x100.png"> -->
外卖
</mt-tab-item>
<mt-tab-item id="tab-container2">
<!-- <img slot="icon" src="../assets/100x100.png"> -->
订单
</mt-tab-item>
<mt-tab-item id="tab-container3">
<!-- <img slot="icon" src="../assets/100x100.png"> -->
发现
</mt-tab-item>
</mt-tabbar>
</div>
</template>
以上是官网上的代码，但我们发现如果只是把官网上的复制上来，是实现不了切换效果的，而且Tabbar也没有颜色显示，所以我们还需要自己做一些操作,在上面对应组件的script中，我们加上以下代码：
<script>
export default{
name:"HelloWord",
data(){
return{
active:"tab-container3",
selected:""
}
},
watch:{
selected(){
console.log(this.selected);
this.active=this.selected;
}
}
}
</script>
网友评论