1、无法覆盖原生组件,如tabbar等
2、使用不方便,需要在需要使用的页面引入组件,然后再通过$refs等方法控制其隐藏显示等。
还好H5+提供了对应的原生方法,并支持非常多的自定义样式,下面是自定义的方法:
// 自定义加载 const showLoading = (title="加载中...", modal=true) => { plus.nativeUI.showWaiting(title, { background: 'rgba(0, 0, 0, .8)', modal: modal, round: 5, padding: '1%', loading: { display: 'inline', height: '16px', }, back: 'close' }); } // 关闭加载框 const closeLoading = () => { plus.nativeUI.closeWaiting(); } // 自定义toast const showToast = (title="加载中...", duration=2000, align='center', verticalAlign='bottom') => { plus.nativeUI.toast('<font color="#ffffff">'+title+'</font>', { type: 'richtext', background: 'rgba(0, 0, 0, .8)', duration: duration, align: align, verticalAlign: verticalAlign, }); } // 导出方法 export default { showLoading, closeLoading, showToast };更多自定义参数可以访问:https://www.html5plus.org/doc/zh_cn/webview.html
上面的方法放在tools.js中,然后在main.js中引入:
// 引入工具函数 import tools from "./common/tools"; Vue.prototype.$app = tools;然后,在需要的地方,如公共ajax方法里,直接调用就可以了:
this.$app.showLoading() this.$app.closeLoading() this.$app.showToast()非常的方便。