Vue API - extend 开发消息弹窗组件

通常情况使用vue时都是挂在某个节点下，例如：
App.vue

<body>
    <div id="app"></div>
</body>
复制代码

main.js

import Vue from "vue";
import App from "./App.vue";
new Vue({
  render: h => h(App)
}).$mount("#app");
复制代码

借助webpack vue-loader App.vue将会导出成一个对象App,h函数将App数据渲染成节点再挂载到#app节点下。至此所有页面操作都在该节点下，包括路由跳转等等。
但是有时候我们也可能需要将节点挂载在其他位置，而非#app上,或者说需要多个可以挂载vue的节点。
例如我们需要开发一个类似element-ui的通知组件

这个组件有着如下特点：

页面每个地方都可能使用到，不可能每个页面都写alert组件

<!--这里假设组件名称为alert-->
<alert :show="isShow"></alert> 
复制代码

我们需要的是这样调用组件：

this.$Alert({content:'hello',duration:2})
复制代码

组件的位置需要fix定位，为避免这个组件被其他元素遮住，最理想的情况是这样的：

<body>
    <!-- vue渲染区域-->
    <div id="app"></div>
    <!--alert组件渲染区，并且为fixed定位-->
    <div class="alert"></div>
</body>
复制代码

所以我们需要第二个区域使用vue了，Vue提供了extend API 可以拓展vue实例。例如在main.js中

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

const Tips = Vue.extend({
    template: `<h1>{{message}}</h1>`,
       data() {
         return {
           message: "hello,world"
         };
       }
});
const comp = new Tips().$mount();
document.body.appendChild(comp.$el);
复制代码

上述代码即可在渲染出第二块区域h1，在h1内一样可以使用vue
所以开发思路如下：

this.$Alert({}) 调用时new一个Vue 并通过render函数渲染出一个alert组件。
通过Vue.extend和$mounted挂载上去

main.js 注册$Alert()

import { info } from "./components/alert.js";
Vue.prototype.$Alert = info;
复制代码

alert.js

import Vue from "vue";
import Alert from "./alert.vue";

// 向Alert组件传递data数据
export const info = options => {
  const Instance = new Vue({
    render(h) {
      return h(Alert, {
        props: options
      });
    }
  });
  const comp = Instance.$mount();
  document.body.appendChild(comp.$el);
  const alert = Instance.$children[0];
  alert.add(options);
};

复制代码

alert.vue

<template>
  <div class="alert">
    <div class="alert-main" v-for="item in notices" :key="item.name">
      <div class="alert-content">{{ item.content }}</div>
    </div>
  </div>
</template>
<script>
import { setTimeout } from "timers";
let seed = 0;
function getUuid() {
  return `alert_${seed++}`;
}
export default {
  data() {
    return {
      notices: []
    };
  },
  methods: {
    add(notice) {
      const uuid = getUuid();
      let _notice = Object.assign({ name: uuid }, notice);
      this.notices.push(_notice);
      const { duration } = _notice; 
      setTimeout(() => {
        this.remove(_notice.name);
      }, duration * 1000);
    },

    remove(name) {
      alert(name);
      const notices = this.notices;
      for (let i = 0; i < notices.length; i++) {
        if (notices[i].name === name) {
          this.notices.splice(i, 1);
          break;
        }
      }
    }
  }
};
</script>
<style>
.alert {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
}
.alert-content {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  margin-bottom: 8px;
}
</style>
复制代码

具体页面使用：

this.$Alert({
    content: "这是一条提示信息",
    duration: 3
});
复制代码

一个最原始的alert组件就实现了，后续可自行优化！

转载于:https://juejin.im/post/5d0ad886e51d4510a73280c8

Vue API - extend 开发消息弹窗组件

猜你喜欢