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

概述

现在低代码开发在企业太常见了,最近公司做的一个低代码平台使用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,都能找到对应的解析插件帮我处理这个复杂的过程,更多具体的配置,可以自己实时根据情况进行更改。

相关推荐
烛阴1 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python
千鼎数字孪生-可视化1 小时前
Web技术栈重塑HMI开发:HTML5+WebGL的轻量化实践路径
前端·html5·webgl
凌辰揽月1 小时前
7月10号总结 (1)
前端·css·css3
天天扭码1 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
EndingCoder1 小时前
搜索算法在前端的实践
前端·算法·性能优化·状态模式·搜索算法
sunbyte2 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
Favor_Yang2 小时前
SQL Server通过存储过程实现HTML页面生成
前端·信息可视化·sqlserver·存储过程
中微子3 小时前
JavaScript事件循环机制:面试官最爱问的10个问题详解
前端
Eighteen Z3 小时前
CSS揭秘:10.平行四边形
前端·css·css3
拾光拾趣录3 小时前
虚拟DOM
前端·vue.js·dom