Vue uses JS to invoke a component

In reference to third-party libraries, there will generally be a correct prompt or error prompt popover through JS, if the development of the project to have their own unique style, you can implement a.

First of all, there is a component library for popovers.

<template>
 <div v-if="isDialog" class="dialog">
   <div class="content">
     <div class="content-inset">
       <img @click="isDialog=false" class="close" src="@/assets/dialog_close_icon.png" alt="">
       <div class="content-inset-text color-3A1">
         <img src="@/assets/remind_icon.png" alt="">
         <span class="font-size-16">{{ text }}</span>
       </div>
       <div @click="isDialog=false" class="content-inset-bottom">
         <img src="@/assets/confirm_icon.png" alt="">
       </div>
     </div>

   </div>
 </div>
</template>
<script>
export default {
 data () {
   return {
     isDialog: false.text: ' '}},methods: {
   show (text) {
     this.text = text
     this.isDialog = true
   },
   hide () {
     this.text = ' '
     this.isDialog = false}}}</script>
<style lang="scss" scoped>
.dialog{
   .content{
   width: 272px;
   height: 144px;
   background: #fff;
   padding: 2px;
   border-radius: 5px;
   margin-top: 115px;
   .content-inset{
     border: 2px solid #B77F29;
     position: relative;
     width: 100%;
     height: 100%;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     border-radius: 5px;
     box-shadow: 0 0 4px #ECCDA5 inset;
     background: #FFD98D;
     .close{
       width: 24px;
       height: 24px;
       position: absolute;
       right: 6px;
       top: 6px;
     }
     .content-inset-text{
         display: flex;
         margin: 32px 16px 16px;
         img{
             width: 24px;
             height: 24px;
             margin-right: 8px;
         }
         span{
           flex: 1; }}.content-inset-bottom{
       display: flex;
       justify-content: center;
       img{
         width: 80px;
         height: 50px;
       }
     }
   }
 }
}
</style>

Copy the code

Then put the component library into Vue and create a new index.js

// instance.js

import Vue from 'vue'
import ErrorMsg from './index.vue'

const MsgConstructor = Vue.extend(ErrorMsg)

const instance = new MsgConstructor()

instance.$mount()

document.body.appendChild(instance.$el)

export default instance

Copy the code

It is referenced in main.js

import ErrorMsg from '@/components/errorDialog/instance'
Vue.prototype.$errorMsg = instance
Copy the code

There are two cases, one is a Vue component reference, one is a JS file reference

Vue components used

this.$errorMsg.show('I was wrong')
Copy the code

Js use

import ErrorMsg from '@/components/errorDialog/instance'
ErrorMsg.show('I was wrong')
Copy the code