Loading插件
2020-01-19 本文已影响0人
零界梦忆
<!------------------------------------------------------------
文件名: ch3-4.html
第三章: Vue.extend 用法2
开发平台: VSCode 1.39.1
Vue 实战小慕读书中后台 By Sam
------------------------------------------------------------->
<html>
<head>
<title>Vue.extend 用法2</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
#loading-wrapper {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
}
</style>
</head>
<body>
<div id="root">
<button @click="showLoading">显示Loading</button>
</div>
<script>
const LoadingPlugin = {
install: (vm) => {
function Loading(msg) {
let loadingComponent = Vue.extend({
template: '<div id="loading-wrapper">{{msg}}</div>',
props: {
msg: {
type: String,
default: msg
}
}
});
let div = document.createElement("div");
div.setAttribute("id", "loading-wrapper");
document.body.append(div);
new loadingComponent().$mount("#loading-wrapper");
return () => {
document.body.removeChild(
document.getElementById("loading-wrapper")
);
};
}
vm.prototype.$loading = Loading
}
};
Vue.use(LoadingPlugin)
let vm = new Vue({
el: "#root",
data: {},
methods: {
showLoading() {
let hide = this.$loading("正在加载中，请稍后...");
setTimeout(() => {
hide();
}, 1000);
}
}
});
</script>
</body>
</html>
