All Projects → any86 → Vue Create Root

any86 / Vue Create Root

Licence: mit
🍭 不到1kb的小工具, 把组件变成this.$xxx命令.

Programming Languages

typescript
32286 projects
ts
41 projects

Projects that are alternatives of or similar to Vue Create Root

Vue Api Request
Control your API calls by using an amazing component which supports axios and vue-resource
Stars: ✭ 116 (-5.69%)
Mutual labels:  component
Lbox
Stars: ✭ 116 (-5.69%)
Mutual labels:  utils
Container Query
A PostCSS plugin and Javascript runtime combination, which allows you to write container queries in your CSS the same way you would write media queries.
Stars: ✭ 119 (-3.25%)
Mutual labels:  component
Vue Range Slider
Simple slider component of Vue.js
Stars: ✭ 117 (-4.88%)
Mutual labels:  component
React Timer Hook
React timer hook
Stars: ✭ 118 (-4.07%)
Mutual labels:  component
Vue Datatables Net
Vue jQuery DataTables.net wrapper component
Stars: ✭ 119 (-3.25%)
Mutual labels:  component
Aura.ui
A Library with a lot of Controls for AvaloniaUI
Stars: ✭ 114 (-7.32%)
Mutual labels:  component
Androidcommon
🔥 一个简单的开源Android工具类库,提供许多常用的类帮助我们开发程序
Stars: ✭ 121 (-1.63%)
Mutual labels:  utils
Rebirth Ng
rebirth-ng is a ui framework for Angular & bootstrap.
Stars: ✭ 118 (-4.07%)
Mutual labels:  component
Verte
🎨 A Color picker component. Built from the bottom to work with Vue.js.
Stars: ✭ 117 (-4.88%)
Mutual labels:  component
Zoid
Cross domain components
Stars: ✭ 1,672 (+1259.35%)
Mutual labels:  component
Ka Table
Lightweight MIT React Table component for both TS and JS with Sorting, Filtering, Grouping, Virtualization, Editing and many more
Stars: ✭ 117 (-4.88%)
Mutual labels:  component
Polyfill Iconv
This component provides a native PHP implementation of the php.net/iconv functions.
Stars: ✭ 1,621 (+1217.89%)
Mutual labels:  component
Vcomponents
VComponents is a SwiftUI framework that contains 40+ customizable UI components
Stars: ✭ 117 (-4.88%)
Mutual labels:  component
Cypress React Selector
⚡️ cypress plugin to locate react elements by component, props and state
Stars: ✭ 121 (-1.63%)
Mutual labels:  component
React Magnifier
🔍 React image zoom component
Stars: ✭ 116 (-5.69%)
Mutual labels:  component
Calendar
📆 calendar 日历
Stars: ✭ 119 (-3.25%)
Mutual labels:  component
Bash Utils
Miscellaneous small utils, mainly for the Bash shell.
Stars: ✭ 121 (-1.63%)
Mutual labels:  utils
Utils.js
Useful JavaScript Functions Collection 一些很实用的JavaScript函数封装集合
Stars: ✭ 121 (-1.63%)
Mutual labels:  utils
Vue Calendar Heatmap
A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph
Stars: ✭ 120 (-2.44%)
Mutual labels:  component

vue-create-root NPM Version NPM Downloads npm bundle size (minified + gzip) codecov CircleCI

🍭 不到1kb的小工具, 把vue组件变成this.$xxx命令, 支持插入组件到任意dom位置.

安装

npm i -S vue-create-root

cdn

https://unpkg.com/vue-create-root/dist/vue-create-root.umd.js

快速开始

初始化后,组件内可以直接使用 this.$createRoot 渲染任意组件.

import createRoot from 'vue-create-root';
// main.js
Vue.use(createRoot);

// xxx.vue
import UCom from '../UCom.vue';
{
    mounted(){
        // 默认组件被插入到<body>尾部
        this.$createRoot(UCom, {props: {value:'hello vue!'}});
        // 或者简写为:
        this.$createRoot(UCom, {value:'hello vue!'});
    }
}

自定义命令: this.$xxx

你可以定义任意命令类似饿了么UI, 比如this.$alert / this.$Message.success

// main.js
// 初始化插件, 把createRootClass方法挂到Vue上
Vue.use(createRoot);

// 包装组件
const C = Vue.createRootClass(UCom);

// 定义this.$alert命令
// props对应组件的props属性
Vue.prototype.$alert = (props) => new C(props);
// xxx.vue
this.$alert({isShow:true, content: "你好vue !"});

注意: 这里设计Vue.createRootClass(UCom)的意图是为了实现单/多例2种API, 比如上面的C的多例用法就是new C(), 而单例就是C.init().

更多

API

更多示例

为什么 Vue.createRootClass 要返回构造函数, 而不是直接生成组件?

🚀返回顶部

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].