Vue.extend()的高级用法

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

然后就可以点击按钮出现一个正在加载... 的界面

最后编辑于：2020.02.23 15:03:19