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 :show="isShow">alert> 
复制代码

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

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

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

<body>
    
    <div id="app">div>
    
    <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: `{{message}}
`,
       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




复制代码

具体页面使用：

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

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

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

{{message}}

你可能感兴趣的:(javascript,webpack,ViewUI)