Mint UI-基於 Vue.js 的移動端組件庫

標籤：body   sage   more   span   erro   上拉重新整理   port   efi   error   

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.vuethis.$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 currentIndexexport 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 => {            })    }  }}

 

Mint UI-基於 Vue.js 的移動端組件庫