如何用HTML和TypeScript实现Angular自定义组件及拖拽区按钮生成

下面是一套完整的HTML + TypeScript实现方案，完全覆盖你提出的需求：

1. HTML 结构 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>组件编辑器</title>
    <style>
        .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); padding-top: 50px; }
        .modal-content { background: white; width: 600px; margin: 0 auto; padding: 20px; border-radius: 8px; }
        .property-item { display: flex; gap: 10px; margin: 10px 0; align-items: center; }
        .drag-area { margin-top: 20px; padding: 20px; border: 2px dashed #ccc; border-radius: 8px; }
        .component-btn { padding: 10px 15px; margin: 10px; background: #42b983; color: white; border: none; border-radius: 4px; cursor: grab; }
    </style>
</head>
<body>
    <!-- 新建组件按钮 -->
    <button id="createComponentBtn">新建组件</button>

    <!-- 新建组件模态框 -->
    <div id="componentModal" class="modal">
        <div class="modal-content">
            <h3>创建新组件</h3>
            <div>
                <label>组件名称：</label>
                <input type="text" id="componentName" required>
            </div>
            <div style="margin: 10px 0;">
                <label>组件描述：</label>
                <textarea id="componentDesc" rows="3"></textarea>
            </div>
            <div style="margin: 10px 0;">
                <label>组件类型：</label>
                <select id="componentType">
                    <option value="button">按钮</option>
                    <option value="input">输入框</option>
                    <option value="card">卡片</option>
                </select>
            </div>
            
            <!-- 属性区域 -->
            <div style="margin: 20px 0;">
                <h4>组件属性</h4>
                <button id="addPropertyBtn">添加属性</button>
                <div id="propertiesContainer"></div>
            </div>

            <button id="saveComponentBtn">保存组件</button>
            <button id="closeModalBtn">取消</button>
        </div>
    </div>

    <!-- 拖拽区域 -->
    <div id="dragArea" class="drag-area">
        <h4>拖拽组件区域</h4>
    </div>

    <script src="app.js"></script>
</body>
</html>

2. TypeScript 逻辑 #

// 定义属性类型
interface ComponentProperty {
    name: string;
    type: 'string' | 'number' | 'boolean';
    defaultValue: string | number | boolean;
}

// 定义组件类型
interface CustomComponent {
    id: string;
    name: string;
    desc: string;
    type: string;
    properties: ComponentProperty[];
}

// 获取DOM元素
const createBtn = document.getElementById('createComponentBtn') as HTMLButtonElement;
const modal = document.getElementById('componentModal') as HTMLDivElement;
const closeModalBtn = document.getElementById('closeModalBtn') as HTMLButtonElement;
const saveBtn = document.getElementById('saveComponentBtn') as HTMLButtonElement;
const addPropertyBtn = document.getElementById('addPropertyBtn') as HTMLButtonElement;
const propertiesContainer = document.getElementById('propertiesContainer') as HTMLDivElement;
const dragArea = document.getElementById('dragArea') as HTMLDivElement;

// 存储所有自定义组件
let customComponents: CustomComponent[] = [];

// 打开模态框
createBtn.addEventListener('click', () => {
    modal.style.display = 'block';
    // 重置表单
    resetForm();
});

// 关闭模态框
closeModalBtn.addEventListener('click', () => {
    modal.style.display = 'none';
});

// 添加属性项
addPropertyBtn.addEventListener('click', () => {
    const propertyItem = document.createElement('div');
    propertyItem.className = 'property-item';
    propertyItem.innerHTML = `
        <input type="text" placeholder="属性名" class="prop-name" required>
        <select class="prop-type">
            <option value="string">字符串</option>
            <option value="number">数字</option>
            <option value="boolean">布尔值</option>
        </select>
        <input type="text" placeholder="默认值" class="prop-default" required>
        <button class="remove-prop-btn">删除</button>
    `;
    // 绑定删除按钮事件
    propertyItem.querySelector('.remove-prop-btn')?.addEventListener('click', () => {
        propertyItem.remove();
    });
    propertiesContainer.appendChild(propertyItem);
});

// 保存组件
saveBtn.addEventListener('click', () => {
    // 获取基础信息
    const nameInput = document.getElementById('componentName') as HTMLInputElement;
    const descInput = document.getElementById('componentDesc') as HTMLTextAreaElement;
    const typeSelect = document.getElementById('componentType') as HTMLSelectElement;

    const name = nameInput.value.trim();
    const desc = descInput.value.trim();
    const type = typeSelect.value;

    if (!name) {
        alert('请输入组件名称');
        return;
    }

    // 收集属性
    const propertyItems = document.querySelectorAll('.property-item');
    const properties: ComponentProperty[] = [];
    propertyItems.forEach(item => {
        const propName = (item.querySelector('.prop-name') as HTMLInputElement).value.trim();
        const propType = (item.querySelector('.prop-type') as HTMLSelectElement).value as 'string' | 'number' | 'boolean';
        const propDefault = (item.querySelector('.prop-default') as HTMLInputElement).value.trim();

        if (!propName) {
            alert('请填写属性名');
            return;
        }

        // 转换默认值类型
        let defaultValue: string | number | boolean;
        switch (propType) {
            case 'number':
                defaultValue = Number(propDefault);
                break;
            case 'boolean':
                defaultValue = propDefault.toLowerCase() === 'true';
                break;
            default:
                defaultValue = propDefault;
        }

        properties.push({ name: propName, type: propType, defaultValue });
    });

    // 创建新组件
    const newComponent: CustomComponent = {
        id: `component-${Date.now()}`,
        name,
        desc,
        type,
        properties
    };

    // 保存到数组
    customComponents.push(newComponent);

    // 渲染到拖拽区域
    renderComponentToDragArea(newComponent);

    // 关闭模态框
    modal.style.display = 'none';
});

// 将组件渲染到拖拽区域
function renderComponentToDragArea(component: CustomComponent) {
    const componentBtn = document.createElement('button');
    componentBtn.className = 'component-btn';
    componentBtn.textContent = component.name;
    // 原生拖放基础支持
    componentBtn.draggable = true;
    componentBtn.addEventListener('dragstart', (e) => {
        e.dataTransfer?.setData('componentId', component.id);
    });
    dragArea.appendChild(componentBtn);
}

// 重置表单
function resetForm() {
    (document.getElementById('componentName') as HTMLInputElement).value = '';
    (document.getElementById('componentDesc') as HTMLTextAreaElement).value = '';
    (document.getElementById('componentType') as HTMLSelectElement).value = 'button';
    propertiesContainer.innerHTML = '';
}

// 点击模态框外部关闭
window.addEventListener('click', (e) => {
    if (e.target === modal) {
        modal.style.display = 'none';
    }
});

关键功能说明 #

• 模态框控制：点击新建按钮弹出表单，支持关闭和表单重置
• 动态属性添加：点击「添加属性」按钮生成属性输入项，支持删除单个属性
• 类型转换：根据选择的属性类型自动转换默认值的类型（比如数字类型转成Number，布尔值转成Boolean）
• 组件渲染：保存后自动在拖拽区域生成组件按钮，并且添加了原生拖放的基础支持（可扩展成完整拖拽功能）
• 数据存储：用数组存储所有自定义组件，实际项目中可替换成localStorage或者后端接口

内容的提问来源于stack exchange，提问作者Ahd