通用js渲染组件

​ 咳咳，书接上文，通过vue.extend方法封装弹窗组建后，又趁空闲时间修改了两个常用的组件（为了有更多的空闲时间，有些必要的工作还是要做的），废话不多说，先上代码。

信息提示封装

模板文件：src/extend/message/rec/main.vue

<template>
  <div class="message-box">
    <p>{{message}}</p>
  </div>
</template>

<script>
  export default {
    name: 'Tips',
    data() {
      return {
        message: '测试信息'
      }
    },
    mounted() {
      setTimeout(() => {
        this.$destroy(true);
        this.$el.parentNode.removeChild(this.$el);
      }, 2000)
    },
    
  }
</script>

<style lang="stylus" scoped>
.message-box
  display: flex
  justify-content: center
  align-items: center
  position: fixed
  top 0px
  left 0px
  z-index: 9999
  background transparent
  height: 100vh
  width: 100vw
  background-color: rgba(17,17,17,.3)
  p
    padding 12px 20px
    font-size: 18px
    border-radius: 4px
    color #fff
    background-color: rgba(17,17,17,.7)
</style>

js:src/extend/message/src/main.js

import Vue from 'vue';
import Tips from './main.vue';

let tipsConstructor = Vue.extend(Tips);
let instance;

const TipsBox = function(options = {}) {
  instance = new tipsConstructor({
    data: options
  }).$mount();  // 渲染组件
  document.body.appendChild(instance.$el);
}

export default TipsBox;

挂载：src/extend/message/index.js

import Vue from "vue";
import TipsBox from './src/main'

Vue.prototype.$tips = TipsBox

关联： main.js

import './extend/message';

使用：

  handleClickMsg() {
      this.$tips({
        message: 'hello word!!!'
      })
  }

loading封装

​ 封装loading状态，怎么说呢，原来的代码中的loading是另一个同事写的组件，不是说不好用，就是不太符合我的使用习惯，比如我要使用他的组件，要先引入，然后设置v-if关联组件的显示状态，一来二去就产生了一堆其实根本没有必要存在的冗余数据。额外增加不少代码量，作为一个爱划水的人，才不会像某修仙传的作者一样水文字呢（狗头保命！）；

模板：

<template>
  <div class="loading-box" ref="loadingDom" v-if="isShow">
    <div class="loading-content">
      <img class="icon" src="https://img-blog.csdnimg.cn/2022010620043419861.png" alt="loading">
      <div class="tips">加载中。。。</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isShow: true,
      }
    },

    methods: {
      close() {
        this.closeLoading();
      },
      closeLoading() {
        this.isShow = false;
        if(this.$refs.loadingDom) this.$refs.loadingDom.remove()
      },
    }
  }
</script>

<style lang="stylus" scoped>
.loading-box
  position: fixed
  top 0px
  left 0px
  display: flex
  justify-content: center
  align-items: center
  width: 100vw
  height: 100vh
  user-select: none
  background-color rgba(14,14,14,.3)
  .loading-content
    display: flex
    flex-direction column
    align-items: center
    justify-content: center
    color: #7bed9f
    .icon 
      display: block
      width: 60px
      height: 60px
      animation rorated 1.5s linear infinite
    .tips
      margin-top: 20px
    

@keyframes rorated {
  0% {
    transform: rotate(0deg)
  }

  50% {
    transform: rotate(180deg)
  }

  100% {
    transform: rotate(360deg)
  }
}

</style>

js:

​ 注意，这里我导出了两个方法，提供loading状态的打开和关闭；

所以在使用的时候，应该是$yioks_loading.open()

import Vue from "vue";
import loading from './loading.vue';

let LoadingConstructor = Vue.extend(loading);
let instance;

const Loading = function(options = {}) {
    instance = new LoadingConstructor({
      el: document.createElement('div'),
      data: options,
    }).$mount();
    document.body.appendChild(instance.$el);
    instance.content = options;
}

const open = function() {
  Loading();
}

const close = function () {
  if(instance) {
    instance.close();
  }
}


export default {
  open,
  close
};

挂载：

import Vue from "vue";
import Loading from './src/loading';

Vue.prototype.$yioks_loading = Loading;

别忘了关联下：

import './extend/loading';

使用：

 handleClickLoading() {
      this.$yioks_loading.open();	// 打开loading
      setTimeout(() => {
        console.log('components is ready for close loading')
        this.$yioks_loading.close();	// 关闭loading
      }, 5000);
    }