Vue.extend( options )
--参数：
{Object} options
--用法：
使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数
接下来看看官方文档的用法
<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
data: function () {
return {
firstName: 'Walter',
lastName: 'White',
alias: 'Heisenberg'
}
}
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')
结果如下：
<p>Walter White aka Heisenberg</p>
由此看出extend()可以创建一个构造函数。创建一个实例对象可以用来添加一个dom元素。那么也可以用它来创建一个过场的loading效果。
首先，创建一个Vue实例，在其中添加一个点击 开始loading 的方法 btnClick
<div id="root">
<button @click='btnClick'>开始loading</button>
</div>
new Vue({
el: "#root",
data(){
return {
message: "正在加载..."
}
},
methods: {
btnClick() {
}
}
})
利用Vue.extend()创建一个模板构造函数
const Loadingcomponent = Vue.extend({
template: "<div id='loading'>{{msg}}</div>",
props: {
msg: {
type: String,
default: "loading..."
}
}
})
声明一个 loading 方法
function loading( msg ) {
let div = document.createElement("div")
div.setAttribute("id" , "loading-temp")
document.body.appendChild(div) // 创建一个dom元素，将其添加到body中，后面loading渲染后将其替换。
new Loadingcomponent({ // 这里传入的对象会替换掉模板里面相同的内容（props , msg ）
props: {
msg: {
type: String,
default: msg // 将默认值改变成传入的 msg
}
}
}).$mount("#loading-wrapper") // 渲染loading ， 并将 loading-temp 替换成 loading
return () => { // 这里会返回一个函数，过场动画完成之后就可以清除loading
document.body.removeChild(document.querySelector("#loading"))
}
}
Vue.prototype.$loading = loading // 将loading函数添加到vue的原型对象，方便以后的vue实例调用
写入 loading 的默认样式
<style>
#loading{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,.5);
color: #fff;
line-height: 100vh;
text-align: center;
}
</style>
在vue实例中添加具体的实现逻辑
new Vue({
el: "#root",
data(){
return {
message: "正在加载..."
}
},
methods: {
btnClick() {
let hide = this.$loading("正在加载...") // 点击按钮调用之前创建的 loading 函数，返回一个清除过场的回调函数
setTimeout(() => {
hide() // 设定等待时间，清除过场
} , 2000)
}
}
})
然后就可以点击按钮出现一个 正在加载... 的界面
