1. Create a folder my button (used to store components and plug-ins) in src components and create a file button Vue (used to store my button components)
(1) in the template, create a button with the default slot value
<button class="btn"><slot>Button</slot></button>
(2) a component name is exported by default, and the value is "my button"
export default{ name:'my-button' }
(3) set the style for the buttons in the template
.btn{ padding: 3px 15px; border: 0 none; outline: none; background-color: #FF0000; font-size:14px; color: #FFFFFF; }
2. Create the file index. In src "components" and "my button" JS (used to store my button plug-in)
(1) import my button component
import MyButton from "./button"
(2) in the default export method, the imported components are registered globally.
export default{ install(Vue){ Vue.component("my-button",MyButton); } }
3. In src app vue>
(1) import Vue components
import Vue from "vue"
(2) import plug-ins
import MyButton from "./components/my-button"
(3) enable plug-in
Vue.use(MyButton);
(4) reference the plug-in in the template
<my-button @click="submit()">Submit</my-button>
[npm run serve]
4. In src "components" and "my button" vue>
(1) in the template, add a click event to the button button.
@click="handleClick()"
(2) in the click event handler, pass an alias (click) of the click event to the parent component: this$ emit("click").
methods:{ handleClick(){ this.$emit("click")
}
5. In src app vue>
(1) in the template, set (alias) events for the plug-in.
<my-button @click="submit()">Submit</my-button>
(2) in the methods object, in the (alias) event handling function, do the logic
Call the toast method of the Vue instance (this method is defined in subsequent plug-ins) and pass in an object (an object created by simulating its own data).
{
message: "please enter your name",
duration:3000,
onClose:()=>{
console.log("closed");
}
}
methods:{ submit(){ this.$toast({ //This appears$ XXX indicates that XXX is a custom method or custom attribute attached to the prototype chain. message:"Please enter your name",//The attribute that appears indicates that the custom method will assign it to the attribute corresponding to the vm instance duration:3000, onClose:()=>{ //This method shows that the custom method XXX needs to set a time delay function to call this method. console.log("Closed"); } }) } }
[npm run serve]
--------------------------------------------------------------------------------------------------
Summary: toast plug-in development,
1. On app In vue, a vue instance method (which will be customized later in toast plug-in) is called (in an event handler function),
And pass an object literal to the instance method (simulate multiple groups of key s and value s you want).
2. In the toast plug-in, create a custom method (called by App.vue) on the prototype chain of Vue.
3. In the toast plug-in, manually create a tag and mount it on the vue component to create the vue component instance vm.
4. Add the created tag to the page.
5. In the user-defined method, the parameter objects passed in when calling this method are assigned to the corresponding properties of the instance vm one by one.
6. Set the time delay function. In the callback function, delete the created tag from the page.
--------------------------------------------------------------------------------------------------
1. Create the file toast. In the src "components" folder "my toast (used to store components and plug-ins)" Vue (used to store components)
(1) in the template, create a label element
<div class="toast-wrap"></div>
(2) a component name is exported by default, and the value is "my toast"“
export default{ name:'my-toast' }
(3) set label style
.toast-wrap{ padding: 8px 15px; background-color: rgba(0,0,0,0.8); font-size: 14px; color:#FFFFFF; text-align: center; position: fixed; z-index: 99; left:50%; top:50%; transform: translate(-50%,-50%); border-radius: 5px; }
[register the component in src App.vue, reference the component, and npm run serve to test whether the component is valid.]
2. Create the file index. In src "components" and "my toast" JS (used to store plug-ins)
(1) import my toast component
import MyToast from "./toast"
(2) in the default export method, the components imported by global extend: let vuecomp = Vue extend(MyToast);
export default { install(Vue) { let VueComp = Vue.extend(MyToast); //(3)... } }
/ * VueComponent (options) {/ / returns the initialization method or construction method of a component object.
this._init(options);
}*/
(3) in the default export method, create a toast method on the prototype chain of Vue, with the parameter opts, and print the parameter Vue prototype.$ toast = function (opts) {...}
Vue.prototype.$toast = function (opts) { //4(1)(2)...
}
3. In src app vue>
(1) import Vue components
(2) import plug-ins
(3) enable plug-in
(4) reference the plug-in in the template
[npm run serve, click the button to check whether the console prints its own simulation data]
4. In src "components" my toast "index js>
(1) in the toast method, dynamically create a label element and mount it on the component instance: let VM = new vuecomp()$ mount(document.createElement("div"));
/*VueComponent {_uid: 7, _isVue: true, $options: {...}, _renderProxy: Proxy, _self: VueComponent, ...}
vm.$el: div.toast-wrap*/
let vm = new VueComp().$mount(document.createElement("div"));//Create a tag element mount component. console.log(vm);
(2) in the toast method, append the created tag to the page: document body. appendChild(vm.$el);
document.body.appendChild(vm.$el);
[npm run serve, click the button and a prompt box will appear]
5. In src "components" and "my toast" vue>
(1) make dynamic data in the template: {message}}
<div class="toast-wrap">{{message}}</div>
(2) in the data object, add: message: ""
data(){ return{ message:"" } }
[npm run serve, click the button, and a blank prompt box will appear]
/*VueComponent {_uid: 7, _isVue: true, $options: {...}, _renderProxy: Proxy, _self: VueComponent, ...}
vm.message:""*/
6. In src "components" my toast "index js>
(1) in the toast method, assign the attribute value in the parameter opts object to the component instance vm:
vm.message=opts.message; let duration=opts.duration||2000; setTimeout(()=>{ document.body.removeChild(vm.$el); if(opts.onClose){ opts.onClose(); } },duration)
(2) solve the problem of prompt box after repeated clicking:
let isToast=false; if(!isToast){ isToast=true; //... isToast=false; }
src>components>my-toast>toast.vue code
View Code
src>components>my-toast>index.js code
import MyToast from "./toast" //2(1) export default { install(Vue) { let VueComp = Vue.extend(MyToast); //2(2) let isToast=false; //6(2) Vue.prototype.$toast = function (opts) { //2(3)Supply App.vue call if(!isToast){ //6(2) isToast=true; //6(2) console.log(opts); let vm = new VueComp().$mount(document.createElement("div"));//4(1)Create vue Component instance vm console.log(vm); document.body.appendChild(vm.$el);//4(2)Add the created tag to the page vm.message=opts.message;//6(1)Assign to instance vm Corresponding attribute let duration=opts.duration||2000; setTimeout(()=>{ //Set time delay function isToast=false; //6(2) document.body.removeChild(vm.$el);//Delete the created tag from the page. if(opts.onClose){ opts.onClose(); } },duration) } } } }