二、开发toast插件

2022-01-12 22:37:22 阅读：156 来源： 互联网

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,插件,vue,vm,开发,组件,my
来源： https://www.cnblogs.com/Strugglinggirl/p/15795614.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

二、开发toast插件