Mint UI-基于 Vue.js 的移动端组件库
npm 安装：npm i mint-ui -S
// 1、完整引入
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
// 2、引入部分组件
import { MessageBox } from 'mint-ui' // 弹出式提示框(错误提示)
import { Toast } from 'mint-ui'; // 简短的消息提示框(信息提示)
import 'mint-ui/lib/style.css'
Object.defineProperty(Vue.prototype, '$messageBox', { value: MessageBox })
Object.defineProperty(Vue.prototype, '$toast', { value: Toast })
import { Loadmore } from 'mint-ui' //下拉/上拉刷新
Vue.component(Loadmore.name, Loadmore)
// 3、提示框例子
// xxx.vue
this.$toast('点赞成功')
this.$messageBox.alert('亲，活动已结束')
// request.js(向服务端发请求)
import { Indicator, MessageBox } from 'mint-ui'
service.interceptors.request.use(config => {// request拦截器
Indicator.open('加载中...')// 显示加载提示框
return config
})
service.interceptors.response.use(// respone拦截器
response => {
Indicator.close()// 关闭加载提示框
const res = response.data
if (res.ReturnCode !== '000000') {
} else {
return res
}
},
error => {
Indicator.close()
MessageBox.alert('太火爆了吧，稍安勿躁，亲，再试试')
return Promise.reject(error)
}
)
4、上拉刷新例子
<div class="page-container">
<mt-loadmore class="detail-box" :class="{'all-loaded': allLoaded}"
:bottom-method="loadMoreDetail" <!-- 上拉刷新执行的方法 -->
:bottom-all-loaded="allLoaded" <!-- 若为真，则 bottomMethod 不会被再次触发 -->
:auto-fill="false" <!-- loadmore 在初始化时会自动检测它的高度是否能够撑满其容器，如果不能则会调用 bottom-method，直到撑满容器为止。如果不希望使用这一机制，可以将 auto-fill 设为 false -->
ref="loadmore">
<ul class="detail-list">
<li class="item" v-for="(item,index) in beanDetailList" :key="index">
<!-- ... -->
</li>
</ul>
</mt-loadmore>
</div>
import { qryBeanDetail } from '@/api'
let currentIndex
export default {
data () {
return {
beanDetailList: [],
allLoaded: false
}
},
mounted() {
qryBeanDetail({ CurrentIndex: 0 }).then(response => {
const beanDetailList = response.List
this.beanDetailList = beanDetailList
currentIndex = parseInt(response.PageSize)
if (beanDetailList.length == response.TotalNum) {
this.allLoaded = true
}
}).catch(error => {
})
},
methods: {
// 加载更多金豆明细
loadMoreDetail() {
qryBeanDetail({ CurrentIndex: currentIndex }).then(response => {
const beanDetailList = this.beanDetailList.concat(response.List)
this.beanDetailList = beanDetailList
currentIndex += parseInt(response.PageSize)
if (beanDetailList.length == response.TotalNum) {
this.allLoaded = true
}
this.$refs.loadmore.onBottomLoaded()
// 最后需要手动调用 loadmore 的 onBottomLoaded 事件。这是因为在加载数据后需要对组件进行一些重新定位的操作
}).catch(error => {
})
}
}
}