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

概述

现在低代码开发在企业太常见了,最近公司做的一个低代码平台使用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 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui