博客
关于我
封装vue的弹窗组件
阅读量:328 次
发布时间:2019-03-04

本文共 998 字,大约阅读时间需要 3 分钟。

先写一个工具函数,创建组件实例

// 创建指定组件实例并挂载于body上import Vue from 'vue';export default function create(Component, props) {       // 0. 先创建vue实例    const vm = new Vue({           render(h) {               // render方法提供给我们一个h函数,它可以渲染VNode            return h(Component, {   props})        }    }).$mount(); // 更新操作        // 1. 上面vm帮我们创建组件实例    // 2. 通过$children获取该组件实例    console.log(vm.$root);        const comp = vm.$children[0];    // 3. 追加至body    document.body.appendChild(vm.$el);    // 4. 清理函数    comp.remove = () => {           document.body.removeChild(vm.$el);        vm.$destroy();    }    // 5. 返回组件实例    return comp;}

Notice组件

使用组件的地方

methods: {       onLogin() {         // 创建弹窗实例      let notice;      this.$refs.loginForm.validate(isValid => {           notice = create(Notice, {             title: "xxx",          message: isValid ? "登录!!!" : "有错!!!",          duration: 10000        });        notice.show();      });    }  }

转载地址:http://tvsh.baihongyu.com/

你可能感兴趣的文章
mysql 前缀索引 命令_11 | Mysql怎么给字符串字段加索引?
查看>>
MySQL 加锁处理分析
查看>>
mysql 协议的退出命令包及解析
查看>>
mysql 参数 innodb_flush_log_at_trx_commit
查看>>
mysql 取表中分组之后最新一条数据 分组最新数据 分组取最新数据 分组数据 获取每个分类的最新数据
查看>>
MySQL 命令和内置函数
查看>>
mysql 四种存储引擎
查看>>
MySQL 在并发场景下的问题及解决思路
查看>>
MySQL 基础架构
查看>>
MySQL 基础模块的面试题总结
查看>>
MySQL 备份 Xtrabackup
查看>>
mYSQL 外键约束
查看>>
mysql 多个表关联查询查询时间长的问题
查看>>
mySQL 多个表求多个count
查看>>
mysql 多字段删除重复数据,保留最小id数据
查看>>
MySQL 多表联合查询:UNION 和 JOIN 分析
查看>>
MySQL 大数据量快速插入方法和语句优化
查看>>
mysql 如何给SQL添加索引
查看>>
mysql 字段区分大小写
查看>>
mysql 字段合并问题(group_concat)
查看>>