low-code-components

Vue 3 低代码组件库，基于 TypeScript + Vite 构建。

安装

npm install low-code-components

快速开始

全量注册（一次注册所有组件）

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import LowCodeComponents from 'low-code-components';
import 'low-code-components/dist/index.css';

const app = createApp(App);
app.use(LowCodeComponents);
app.mount('#app');

<!-- 模板中直接使用，无需手动 import -->
<template>
  <l-text text="Hello World" fontSize="20px" color="#333" />
</template>

按需引入（Tree Shaking 友好，只打包用到的组件）

import { LText } from 'low-code-components';
import 'low-code-components/dist/index.css';

// 只注册 LText 一个组件
app.use(LText);

浏览器直接引入（CDN / UMD）

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/low-code-components/dist/index.js"></script>
<link rel="stylesheet" href="https://unpkg.com/low-code-components/dist/index.css" />
<script>
  const app = Vue.createApp({...});
  app.use(LowCodeComponents.default);
  app.mount('#app');
</script>

组件

LText — 文本组件

动态渲染文本内容，支持任意 HTML 标签和丰富的样式配置。

| Prop | 类型 | 默认值 | 说明 | |------|------|--------|------| | text | string | '请输入文本' | 文本内容 | | tag | string | 'div' | 渲染的 HTML 标签 | | fontSize | string | '16px' | 字体大小 | | color | string | '#000000' | 文字颜色 | | fontFamily | string | 'Microsoft YaHei, sans-serif' | 字体族 | | fontWeight | string | 'normal' | 字重 | | textAlign | string | 'left' | 文本对齐 | | backgroundColor | string | 'transparent' | 背景色 | | actionType | string | '' | 点击行为（'url' = 跳转链接） | | url | string | '' | 跳转链接（actionType 为 url 时生效） | | 更多... | | | 支持 width、height、padding、border、opacity、position 等 CSS 属性 |

开发

# 安装依赖
npm install

# 类型检查 + 打包
npm run build

# 代码检查 + 格式化
npm run lint
npm run format

License

MIT