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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzgxgd.html