vue.js+iview 實現全局加載的公用方法

main.js 爲入口js文件，在main.js 文件加入如下的代碼（引入iview的 Spin 組件，暴露全局公用方法）：

iview的 Spin組件的地址：www.iviewui.com/components/…

import { Spin  } from iview;
Vue.prototype.$Spin = Spin;
/**
 * @TODO 加載loading的方法，在頁面直接調用 this.showSpinLoading(message);
 * @param message 加載提示的文字
 */
Vue.prototype.showSpinLoading = function (message){
	this.$Spin.show({
		render: (h) => {
			return h('div', [
				h('Icon', {
					'class': 'demo-spin-icon-load',
					props: {
						type: 'ios-loop-strong',
						size: 50
					}
				}),
				h('div', {
					style: {
						fontSize: '20px',
					},
				},message)
			])
		}
	});
}
/**
 * @TODO 隱藏loading的方法，在頁面直接調用 this.hideSpinLoading();
 */
Vue.prototype.hideSpinLoading = function (){
	this.$Spin.hide();
}
複製代碼

上一篇：docker安裝18.03.0+rancher1.6.17 的容器虛擬化部署，歡迎留言評論學習