Build a method instance of the message prompt component with Vue.extend

Summary time you do the Vue practicing project, you need a common message prompt component, but the message prompts that this component I want to use the way, not Add a component on each page (which feels very troublesome, severe lazy patients), so on the Internet is found, and the Elementui’s Message source code is studied. I have made a simple message reminder component

What is Vue.Extend?

According to the official document, he is a class The constructor is used to create a subclass VUE and return the constructor, and the Vue.Component has the task to associate a given constructor with a string ID so that Vue.js can receive it in the template. 用Vue.extend构建消息提示组件的方法实例 After understanding this, we started to be our message prompt component.


First we create a template for our prompt component

   {{Message}} 
Export Default {name: 'v-message' MOUNTED () {this.starttime ();}, data () {return {message: '123', show: false, timer: null}}, methods: {starttime () {this.show = true; if ( tHis.timer) {cleaTimeout (this.timer)} else {this.timer = settimeout (() => {this.show = false}, 3000);}}}}

After we need to pass message.Vue to Vue.Extend ()
Import Vue from ‘Vue’; Let MessageBox = VUE. Extend (‘./ message.vue’); let instance; var message = function (options) {if (typeof options === ‘string’) {Options = {message: options}} // Generate Component Instance = New MessageBox ({DATA: OPTIONS}) // Components need to be mounted on the DOM element on instance.vm = instance. $ mount (); // Set the background color IF (options.type) of different messages according to different types {Instance.vm. $ el.children [0] .classname + = `icon __ $ {Options.Type}`;} Document.body.Appendchild (instance.vm. $ EL); returnin instance.vm;} constlyPE = [‘Success’, ‘Info’, ‘Warning’, ‘Error’]; Type.ForeAach ((TYPE) => {Message [type] = Options => {if (typeof options === ‘String’) {Options = {Message: Options}} Options.Type = Type; Return Message (options);}})}}) EXPORT DEFAULT Message;

After the hooking in global method After that, it is then called
   Vue.Prototype; $ Message = Message; 

The final renderings
The above is all the content of this article, I hope to help everyone, I hope everyone supports Tumi Cloud.
                     
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment