Vue 全局方法封装

Vue 自定义全局方法

最近一个项目，做移动端页面，对于移动端的接触比较少，所以在项目开始的时候选的ui有点不理想，选择了weui,虽然weui有jquery版本的，但是由于不太想用jquery，所以就选择了weui；结果就有点尴尬了，不知道是我刚刚接触没有发现还是weui本来就没有$loading、$message等这种全局的方法；只在weui的官网找到了样式，没有逻辑；没办法，只能自己写了；

$loading 全局方法

Vue.prototype.$loading = function(){
      console.log("加载中");
      let str = `<div id="loadingToast">
                    <div class="weui-mask_transparent"></div>
                    <div class="weui-toast">
                      <i class="weui-loading weui-icon_toast"></i>
                      <p class="weui-toast__content">数据加载中</p>
                    </div>
                  </div>`
      let Div=document.createElement("div");
      Div.innerHTML=str
      document.body.appendChild(Div);
      return ()=>{
        document.body.removeChild(Div)
      }
    };

这样就可以在组件中直接使用

let hide=this.$loading()
setTimeout(()=>{
    hide()
},1000)

同理 $message 以及模态框等这些全局方法都能实现封装