Vue 项目中实现在所有页面固定一个全局对话栏组件

1、创建对话栏组件

<template>
  <el-drawer
    title="我是标题"
    :visible.sync="drawerVisible"
    direction="rtl"
    size="30%"
    :withHeader="true">
    <span>我是全局对话栏内容...</span>  
  </el-drawer>
</template>

<script>
export default {
  data() {
    return {
      drawerVisible: true
    }
  }  
}
</script>

2. 在主应用中全局注册组件

// main.js

import Drawer from './Drawer.vue'

Vue.component('Drawer', Drawer)

3. 在路由的全局前置守卫中动态渲染

// router.js

router.beforeEach((to, from, next) => {
  const app = document.querySelector('#app')
  
  const drawer = document.createRange().createContextualFragment('<Drawer></Drawer>')
  app.appendChild(drawer)
  
  next()
})

4. 所有页面都会显示对话栏了

<template>
 <div>
   <h1>This is About Page</h1>
 </div>  
</template>