Note: Write createApp instead of extend

Before Reading: The way vue2 and vue3 are written is a little different. Vue2 is extended, but vue3 no longer supports extend, and vue3 is createApp.

Vue3 custom instruction link small white perspective: vue3 custom instruction development, step by step that kind of, don’t understand hit me well

Wrong place everyone more understanding ha ~ xiaobian is small sprout new

Step 1: Create the toast.vue component

Create a.vue file and write out your Toast style. I won’t write it here, you can find it online (after all, the requirements are different).

Step 2: Create the TS file

Create a. Ts file as an export file.

Step 3: Mount and export

We need to introduce our toast. vue file, createApp method in the.ts file: here are some examples.

import toast from "./toast.vue"
import { createApp } from "vue";
Copy the code

We then define a default exported constructor instance to be exposed in Main for prototype mount, and then the square can be used globally.

class Toast {}export default new Toast();
Copy the code

CreateApp (createApp)

Create an app instance that is in the loitering phase, waiting to be mounted. The app instance at this point is part of the preparation phase of the Vue, preparing the functions needed for later operations such as mount.

Mount is the core, similar to vue2, but in any case it’s all about rendering the component

Next, write the code ~ (AnyScript understand)

  // This code can be mounted on el, convenient operation. But I tried it on the top and it worked
  const app = createApp(Loading);
  const instance:any = app.mount(document.createElement("div")); // You can also mount it in the global app, just give it to the DOM anyway
Copy the code

Then let’s briefly write down the logic of the internal implementation

// Step 1: Import the required components and methods
import {  createApp  } from "vue";
import toast from "./toast.vue";

// Step 2: Mount it to the dom you want
// Create app instance, now in loitering phase
const app = createApp(toast); 
// This will hang in the toast DOM (there is a public file in the project, which will be written to the DOM in index.html)
// Alternatively, you can create a DOM element like the following and attach it to the body and deal with it later.)
// const instant:any = app.mount("#toast"); 

// Of course you can try chain operation
const dom = document.createElement("div");
document.body.appendChild(dom)
// This is to get the component instance, so that you can manipulate the component variable dynamically
const instant:any = app.mount(dom); 

// Write the internal implementation method
class Toast {
  constructor(mes="No."){
    this.info(mes)
  }
  info(mes:string) {
    // Update configured messages by manipulating component methods
    instant.setLoading(mes)
  }
}

export default new Toast();
Copy the code

(Vue3 needs to be mounted in the following attributes, vue2 can be directly mounted on the vue prototype.)

import { createApp } from 'vue'
import App from './App.vue'
import Toast from "./toast/toast";

const app = createApp(App);
app.config.globalProperties.$Toast = Toast;
Copy the code

Vue2 is as follows:

// import Vue from "vue"
// vue.prototype.xxx = Toast
Copy the code

It can then be called directly where it is needed:

// import Vue from "vue"
// vue.prototype.xxx = Toast
Copy the code

$toast = this.toast = this.toast = this.toast = this.toast = this.toast = this.toast = this.toast = this.toast = this.toast = this.toast = this.toast

import { getCurrentInstance } from 'vue';

setup(){
      
    const instance:any = getCurrentInstance();
    instance.proxy.$Toast.info("There won't be any bugs.");
    
    return{}}Copy the code

Post a full picture:

**toast.vue **

<template>
   <div v-show="visible" class="loading-wrap">
		<div class="loading-box">{{loading}}</div>
	</div>
</template>

<script lang="ts">
import { reactive ,toRefs } from 'vue';
interface DataProps {
   loading:string,
   visible:boolean
}
export default ({
  name: 'App'.components:{
  },
  setup(){
    const data :DataProps = reactive({
      loading:"What you wrote may be wrong...".visible: true
    })
    const refData = toRefs(data);
    const setLoading = (val:string) = >{
      data.loading = val;
    }
    return {
      ...refData,setLoading
    }
  }
});
</script>

<style>
.loading-wrap {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: rgba(0.0.0.0.5);
}
.loading-box {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 100px;
	transform: translate(-50%, -50%);
}
</style>* * * * ts fileimport {  createApp  } from "vue";
import toast from "./toast.vue";

const app = createApp(toast);
const dom = document.createElement("div");
const instant:any = app.mount(dom); 
document.body.appendChild(dom)
class Toast {
  constructor(mes="No."){
    this.info(mes)
  }
  info(mes:string) {
    console.log("toast",instant);
    instant.setLoading(mes)
  }
}

export default new Toast();

**main.ts**

import { createApp } from 'vue'
import App from './App.vue'
import Toast from "./toast/toast";

const app = createApp(App);

app.config.globalProperties.$Toast = Toast;
app.mount('#app')

Copy the code

Wrong place we understand ha ~ xiaobian is small sprout new, welcome big guy guidance