二、开发toast插件

本文主要是介绍二、开发toast插件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、在src》components》创建文件夹my-button(用来存放组件和插件)》创建文件button.vue(用来存放my-button组件)》（1）在模板中，创建一个带有默认插槽值的button按钮

<button class="btn"><slot>按钮</slot></button>

（2）默认导出一个组件名，值为“my-button”

export default{
        name:'my-button'
}

（3）给模板中的按钮设置样式

.btn{
    padding: 3px 15px;
    border: 0 none;
    outline: none;
    background-color: #FF0000;
    font-size:14px;
    color: #FFFFFF;
}

View Code 2、在src》components》my-button》创建文件index.js(用来存放my-button插件)》（1）导入my-button组件

import MyButton from "./button"

（2）在默认导出的方法中，全局注册导入的组件。

export default{
    install(Vue){
        Vue.component("my-button",MyButton);
    }
}

3、在src》App.vue》（1）导入Vue组件

import Vue from "vue"

（2）导入插件

import MyButton from "./components/my-button"

（3）启用插件

Vue.use(MyButton);

（4）在模板中引用插件

<my-button @click="submit()">提交</my-button>

【npm run serve】 4、在src》components》my-button》button.vue》（1）在模板中，给button按钮添加click事件。

@click="handleClick()"

（2）在click事件的处理函数中，传递一个click事件的别名（click）给父组件：this.$emit("click")。

methods:{
    handleClick(){
        this.$emit("click")
}

5、在src》App.vue》（1）在模板中，给插件设置（别名）事件。

<my-button @click="submit()">提交</my-button>

（2）在methods对象中，在（别名）事件的处理函数中,做逻辑》调用Vue实例的toast方法（该方法是在后续插件中定义的），传入一个对象（自己模拟数据创建出来的对象）。 { message:"请输入姓名", duration:3000, onClose:()=>{ console.log("已关闭"); } }

methods:{
    submit(){
      this.$toast({   //出现this.$XXX的形式，说明XXX是挂载在原型链上的一个自定义方法或者自定义属性。
        message:"请输入姓名",//出现的属性，说明自定义方法会把它赋值给vm实例对应的属性中
        duration:3000,
        onClose:()=>{  //出现这种方法，说明自定义方法XXX需要设置一个时间延迟函数，来调用这个方法。
          console.log("已关闭");
        }
      })
    }
  }

【npm run serve】 -------------------------------------------------------------------------------------------------- 总结：toast插件的开发， 1、在App.vue中，（在某个事件处理函数中）调用一个（后续在toast插件会自定义的）vue实例方法，并且给该实例方法传递一个对象字面量（模拟多组自己想要的key和value）。 2、在toast插件中，在Vue的原型链上创建一个自定义方法（供App.vue调用）。 3、在toast插件中，手动创建标签挂载到vue组件上，创建出vue组件实例vm。 4、把创建的标签，追加到页面上。 5、在自定义方法中，把调用这个方法时传进来的参数对象，一一赋值给实例vm对应属性上。 6、设置时间延迟函数，在回调函数中，把创建的标签，从页面上删除。 -------------------------------------------------------------------------------------------------- 1、在src》components》创建文件夹my-toast(用来存放组件和插件)》创建文件toast.vue(用来存放组件)》（1）在模板中，创建标签元素

<div class="toast-wrap"></div>

（2）默认导出一个组件名，值为“my-toast“

export default{
        name:'my-toast'
    }

（3）设置标签样式

.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;
}

View Code 【在src》App.vue》注册组件，引用组件，npm run serve 测试组件是否有效。】 2、在src》components》my-toast》创建文件index.js(用来存放插件)》（1）导入my-toast组件

import MyToast from "./toast"

（2）在默认导出的方法中，全局extend导入的组件：let VueComp = Vue.extend(MyToast);

export default {
    install(Vue) {
        let VueComp = Vue.extend(MyToast); 
        //(3)...
    }
}

/*ƒ VueComponent (options) { //返回一个组件对象的初始化方法或构造方法。 this._init(options); }*/
（3）在默认导出的方法中，在Vue的原型链上创建一个toast方法，有参数opts，在方法中打印出参数：Vue.prototype.$toast = function (opts) {...}

Vue.prototype.$toast = function (opts) {
            //4(1)(2)...

 }

3、在src》App.vue》（1）导入Vue组件（2）导入插件（3）启用插件（4）在模板中引用插件【npm run serve，点击按钮，查看控制台是否打印出自己的模拟数据】 4、在src》components》my-toast》index.js》（1）在toast方法中，动态创建一个标签元素挂载到组件实例上：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"));//创建一个标签元素挂载组件。
console.log(vm);

（2）在toast方法中，把创建的标签，追加到页面上：document.body.appendChild(vm.$el);

document.body.appendChild(vm.$el);

【npm run serve，点击按钮，出现提示框】 5、在src》components》my-toast》toast.vue》（1）在模板中做动态数据：{{message}}

<div class="toast-wrap">{{message}}</div>

（2）在data数据对象中，添加：message:""

data(){
    return{
        message:""
    }
}

【npm run serve，点击按钮，出现空白提示框】 /*VueComponent {_uid: 7, _isVue: true, $options: {…}, _renderProxy: Proxy, _self: VueComponent, …} vm.message:""*/ 6、在src》components》my-toast》index.js》（1）在toast方法中，把参数opts对象里面的属性值赋值给组件实例vm：

vm.message=opts.message;
let duration=opts.duration||2000;
setTimeout(()=>{
      document.body.removeChild(vm.$el);
              if(opts.onClose){
                  opts.onClose();
               }
 },duration)

（2）解决重复点击出现提示框问题：

let isToast=false;  
if(!isToast){
     isToast=true;
     //...
     isToast=false;
}

src》components》my-toast》toast.vue》代码

View Code src》components》my-toast》index.js》代码

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)供App.vue调用
            if(!isToast){  //6(2)
                isToast=true;  //6(2)
                console.log(opts);
                
                let vm = new VueComp().$mount(document.createElement("div"));//4(1)创建出vue组件实例vm
                console.log(vm);  
                document.body.appendChild(vm.$el);//4(2)把创建的标签，追加到页面上

                vm.message=opts.message;//6(1)赋值给实例vm对应属性
                
                let duration=opts.duration||2000;
                setTimeout(()=>{  //设置时间延迟函数
                    isToast=false;   //6(2)
                    document.body.removeChild(vm.$el);//把创建的标签，从页面上删除。
                    if(opts.onClose){
                        opts.onClose();
                    }
                },duration)
            }
        }
    }
}

这篇关于二、开发toast插件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程

二、开发toast插件

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯