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

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

npm 安裝：npm i mint-ui -S

// 一、完整引入
import Vue from 'vue'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

// 二、引入部分組件
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)

// 三、提示框例子
// 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)
  }
)

 四、上拉刷新例子

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