通常情况使用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的通知组件
image
这个组件有着如下特点：
- 页面每个地方都可能使用到，不可能每个页面都写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组件就实现了，后续可自行优化！
