The plug-in

js

Import Vue from 'Vue' import Pop from './index.vue' // Creating a Dialog constructor Let PopConstrutor = vue.extend (Pop) let instance const Pop = function(options = {}) {// Set the default argument to object. If (typeof options === 'string') {options = {content: options, onOk: () => {}, onCancel: () => {}}} // Creating an instance instance = New Poptor Construtor({data: The options}) / / the instance mounted to the document under the body. The body. The appendChild (instance. $mount (). $el)} export default popCopy the code

Vue file

Export default {name: 'pop', data() {return {// Display the title, default is "prompt" title: "prompt", // display the content: // The left button displays text, default is "cancel" left_buttton: "cancel", // the right button displays text, default is "OK" right_buttton: "OK"}}, methods: {/ / click on the cancel button to cancel () {enclosing onCancel () / / click cancel callback function enclosing $destroy (true) / / destruction of component enclosing $el. ParentNode. RemoveChild (enclosing $el) // Remove the dom element from the parent ($el is the component instance)}, / / click ok button ok () {enclosing onOk () / / click ok in the callback function enclosing $destroy (true) / / destroyed component enclosing $el. ParentNode. RemoveChild (enclosing $el) // Remove the DOM element from the parent element ($el = component instance)}}}Copy the code

mount

Import component name from './ address '// usually placed under./ SRC /components 2. Export exports default {install (app) {/ / this parameter is the main use js file () method of the automatic incoming Vue instance app.com ponent (' custom components, consistent with the name within the components' best, Import {createApp} from 'Vue' import App from './ app. Vue '//vue3 imports Vue instance import Use (Component) createApp(App).use(component).mount('# App ')  4. Use < custom component name />Copy the code

call

$pop({title: 'prompt ', content:' this is a prompt ', left_buttton: 'cancel ', right_buttton:' confirm ', onOk: () => { console.log('ok'); }, onCancel: () => { console.log('cancel'); }}) // This.$pop(' this is a prompt ') // This.Copy the code

instruction

El: parent element object, binding: child element object, vnode: virtual node

Import Vue from 'Vue' import loading from '@/components/loading' const loadingDireives = {/** * is called * @param when the element is inserted into the parent {dom element} el * @param {dom element binding information} binding */ inserted(el, Binding) {const loadingCor = vue.extend (loading) const loadingComp = new loadingCor().$mount() // El.inserted = loadingComp // If (binding.value) {// Insert element appEnd (el)}}, * @param {dom element} el * @param {dom element binding information} binding */ update(el, Binding) {// The new value does not equal the old value if(binding.value! = binding.oldValue) { binding.value ? append(el) : remove(el) } } } function append(el) { el.appendChild(el.inserted.$el) } function remove(el) { el.removeChild(el.inserted.$el) } export default loadingDireivesCopy the code
Export default {install(app){app.directive(' customize directive name ',{// Install (app){// Mounted (el,binding){// el For dom nodes carrying custom directives // binding for parameters carried after directives through. Value Fetch function}})}} 2. Main.js file to register import direction from './directives' createApp(App).use(directive).mount('#app') 3. Global use <div v- custom directive name ='... '></div>Copy the code

  • Bind: called once, when the directive is first bound to an element. Use this hook function to define an initialization action that will be performed once on the binding.

  • Inserted: Called when the bound element is inserted into its parent (the parent is called if it exists, not in the document).

  • Update: Called when the template to which the element is bound is updated, regardless of whether the binding value changes. Unnecessary template updates can be ignored by comparing the binding values before and after the update.

  • ComponentUpdated: Called when the template to which the bound element belongs completes an update cycle.

  • Unbind: Called only once, when an instruction is unbound from an element.