低代码平台自定义组件实现思路

概述

现在低代码开发在企业太常见了,最近公司做的一个低代码平台使用vue3作为技术栈,在需求给出的时候,明确提出提供默认的组件之外,要能够用户自定义组件(业务之内的),当然这个需求肯定是很常见的,以下为具体实现思路。

效果

效果

实现思路

在目前的前端工程化项目中,不管是vue还是react,我们平时开发所写的代码都是一个个.vue或者.tsx文件,然后打包的时候打包工具帮我直接编译了对应的组件,最后生成的函数生成dom,然后我们才能看到最后的页面,如果要实现用户自定义组件,我们的流程应该如下:

上面的重点就在于,如何把用户编写的自定义组件字符串转化成组件对象,然后注册了在页面能够使用

实现

前端工程化里面,我们不用操心这个事情,打包工具借助框架编译器就可以完成这个操作,但是在浏览器环境下我们就需要另外办法

vue3-sfc-loader

这个插件的可以帮我在浏览器环境下,将对应的sfc文件的字符串,编译生成对应的组件对象,因此,我们便可以实现自定义组件的注册。

具体代码

str测试文件如下,真实场景应该为后端获取的字符串

js 复制代码
export const str = `
<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)
</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>

<style scoped>
.read-the-docs {
  color: #888;
  background:red;
}
</style>


`
export const templateStr = `
<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Learn more about IDE Support for Vue in the
    <a
      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
      target="_blank"
      >Vue Docs Scaling up Guide</a
    >.
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
`

compileSfcToComponent.js

js 复制代码
import * as Vue from 'vue'
import * as vue3SfcLoader from "vue3-sfc-loader";
import { str } from "@/constant/index";

export async function compileSfcToComponent(sfcString: string, app: any) {
    return new Promise((resolve, reject) => {
        const { loadModule } = vue3SfcLoader
        loadModule('file.vue', {
        //必填
            moduleCache: {
                vue: Vue//对象就是vue全局暴露的对象
            },
            //必填
            async getFile(url) {
            //返回自定义组件文件,这里通过后端获取
                return sfcString
            },
            //必填(样式相关)
            addStyle(textContent) {
                const style = Object.assign(document.createElement('style'), { textContent });
                const ref = document.head.getElementsByTagName('style')[0] || null;
                document.head.insertBefore(style, ref);
            },
        }).then(res => {
            console.log('component---', res)
            console.log('app', app)
            app.component('SelfCom', res)
            resolve()
        })
    })
}
//注册组件
export async function registerApp(app: any) {
    await compileSfcToComponent(str, app)
}

mian.js

js 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import { registerApp } from './utils'
const app = createApp(App)
//注意:自定义组件加载完成后,挂载,不然页面不会实时更新
registerApp(app).then(()=>{
    app.mount('#app')
})

App.vue

js 复制代码
<template>
  <div>测试自定义组件</div>
  <SelfCom></SelfCom>
  </div>
</template>

总结

如上操作后,即可实现任意组件自定义,交给用户去操作,当前上面只是其中自定义组件实现的一种方式,还可以直接通过远程加载组件包的形式做也是可以的,对于对应的单文件解析,不管是vue,react,都能找到对应的解析插件帮我处理这个复杂的过程,更多具体的配置,可以自己实时根据情况进行更改。

相关推荐
云水边3 分钟前
前端网络性能优化
前端
用户51681661458417 分钟前
[微前端 qiankun] 加载报错:Target container with #child-container not existed while devi
前端
东北南西18 分钟前
设计模式-工厂模式
前端·设计模式
HANK24 分钟前
ECharts高效实现复杂图表指南
前端·vue.js
入秋27 分钟前
Linux服务器安装部署 Nginx、Redis、PostgreSQL、Docker
linux·前端
acocosum29 分钟前
毫米波雷达基础知识学习报告
前端
程序员鱼皮30 分钟前
这套 Java 监控系统太香了!我连夜给项目加上了
java·前端·ai·程序员·开发·软件开发
Juchecar33 分钟前
Vue3 响应式 ref 和 reactive 原理详解及选择建议
前端·vue.js
拾光拾趣录36 分钟前
JavaScript 究竟怎么跑
前端·javascript
Aotman_38 分钟前
el-input 重写带图标密码框(点击小眼睛显示、隐藏密码)
前端·javascript·vue.js