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 => { }) } } }