vue-create-root
🍭 不到1kb的小工具, 把任意vue组件插入到任意dom位置, 默认<body>
尾部.
实际意义
把一些"大尺寸的组件"放到<body>
尾部, 防止父元素使用overflow:hidden
而导致组件显示不全.
安装
npm i -S vue-create-root
cdn
https://unpkg.com/vue-create-root/dist/vue-create-root.umd.js
快速开始
下面把Test组件插入到<body>
尾部.
main.js
;Vue;
Test.vue
props:'value' template: `<h1>{{value}}</h1>`
App.vue
; { // 默认组件会被插入到<body>尾部 this; }
API
$createRoot(tag, data, child, options)
第3,4个参数选填, options的默认值为:{ target = 'body', insertPosition = 'append' }
$createRoot的核心代码依赖于Vue.prototype.$createElement, 所以tag, data, child
参数就是$createElement
的参数, 具体使用方法可以参考Vue文档
target
是目标元素的选择器, insertPosition
有4个值, append
代表插入到元素(<body>)尾部, 其他参数:
- beforebegin: 在该元素本身的前面.
- afterbegin:只在该元素当中, 在该元素第一个子孩子前面.
- beforeend:只在该元素当中, 在该元素最后一个子孩子后面.
- afterend: 在该元素本身的后面.
简写
如果$createRoot
的第2个参数只传入props
属性, 那么可以简写:
this;// 完整写法this;
返回值
$createRoot(Test)
返回一个vue根实例(非Test实例), VueCreateRoot在根实例上定义了2个方法:$update
和$destroy
.
$update(data,child)
$update用来更新Test组件(传入的组件), data,child
同$createRoot
的data,child
.
const i = this;i;
$destroy
$destroy用来销毁$createRoot
创建的根实例, 如:
const i = this; i;
进阶使用
this.$alert
自定义你可以定义任意命令类似饿了么UI, 比如this.$alert
/ this.$Message.success
// main.js// 初始化插件, 把createRootClass方法挂到Vue上Vue; // 包装组件const C = Vue; // 定义this.$alert命令// props对应组件的props属性Vueprototype props;
// xxx.vuethis;
注意: 这里设计Vue.createRootClass(UCom)
的意图是为了实现单/多例2种API, 比如上面的C的多例用法就是new C()
, 而单例就是C.init()
.