Installation

This guide explains how to install and use the @form-create/tdesign component library, including installation methods for browser environments and npm.

Install via npm

Installing via npm provides better integration with modern build tools (such as Webpack).

npm i @form-create/tdesign@^3
npm i tdesign-vue-next

Import and Mount

// Import form-create component library
import formCreate from '@form-create/tdesign';
import TDesign from 'tdesign-vue-next';
import 'tdesign-vue-next/es/style/index.css';
// Create Vue application
const app = Vue.createApp({});
app.use(formCreate);
app.use(TDesign);
app.mount('#app');

CDN Import

You can get the latest version resources from unpkg.com/@form-create/tdesign and use them by importing the JS on the page.

<script src="https://unpkg.com/vue"></script>
<link rel="stylesheet" href="https://unpkg.com/tdesign-vue-next/dist/tdesign.min.css" />
<script src="https://unpkg.com/tdesign-vue-next/dist/tdesign.min.js"></script>
<script src="https://unpkg.com/@form-create/tdesign@^3/dist/form-create.min.js"></script>

Component Mounting Methods

Create Form

<template>
    <form-create :rule="rule" v-model:api="api" :option="options" />
</template>
<script setup>
    import { ref } from 'vue';
    const api = ref({});
    const options = ref({
        onSubmit: (formData) => {
            alert(JSON.stringify(formData));
        },
        resetBtn: true,
    });
    const rule = ref([
        {
            type: 'input',
            field: 'goods_name',
            title: 'Product Name',
            value: 'form-create',
        },
        {
            type: 'checkbox',
            field: 'label',
            title: 'Label',
            value: [0, 1, 2, 3],
            options: [
                { label: 'Easy to Use', value: 0 },
                { label: 'Fast', value: 1 },
                { label: 'Efficient', value: 2 },
                { label: 'All-in-One', value: 3 },
            ],
        },
    ]);
</script>

Compatibility

• tdesign

Legend