Mint UI-基于 Vue.js 的移动端组件库

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

以上是 Mint UI-基于 Vue.js 的移动端组件库 的全部内容， 来源链接： utcz.com/z/375522.html

回到顶部