Skip to content

安装

CDN 引入

目前可以通过 unpkg.com/@form-create/tdesign 获取到最新版本的资源,在页面上引入 js 即可开始使用。

html
<script src="https://unpkg.com/vue@next"></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/dist/form-create.min.js"></script>
<script src="https://unpkg.com/vue@next"></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/dist/form-create.min.js"></script>

NPM

安装

推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用。

npm i @form-create/tdesign@next
npm i @form-create/tdesign@next

引入

js
import formCreate from '@form-create/tdesign'
import formCreate from '@form-create/tdesign'

挂载

js
app.use(formCreate)
app.use(formCreate)

组件挂载方式

创建表单

vue


<template>
  <form-create :rule="rule" v-model:api="fApi" :option="options"/>
</template>


<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        },
        resetBtn: true
      },
      rule: [
        {
          type: 'input',
          field: 'goods_name',
          title: '商品名称',
          value: 'form-create'
        },
        {
          type: 'checkbox',
          field: 'label',
          title: '标签',
          value: [0, 1, 2, 3],
          options: [
            {label: '好用', value: 0},
            {label: '快速', value: 1},
            {label: '高效', value: 2},
            {label: '全能', value: 3},
          ]
        }
      ]
    }
  }
}
</script>


<template>
  <form-create :rule="rule" v-model:api="fApi" :option="options"/>
</template>


<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        },
        resetBtn: true
      },
      rule: [
        {
          type: 'input',
          field: 'goods_name',
          title: '商品名称',
          value: 'form-create'
        },
        {
          type: 'checkbox',
          field: 'label',
          title: '标签',
          value: [0, 1, 2, 3],
          options: [
            {label: '好用', value: 0},
            {label: '快速', value: 1},
            {label: '高效', value: 2},
            {label: '全能', value: 3},
          ]
        }
      ]
    }
  }
}
</script>

兼容

  • tdesign ^0.17.3

图例

form-create 图例

Released under the MIT License.