# t-form-modal
FormModal 表单弹窗
t-form-modal 组件介绍
动态表单模态框组件，通过JSON配置弹出编辑框，支持多种表单组件类型，attrs可绑定事件和ref，实现表单各组件的关联控制。
t-form-modal 平台兼容
| Harmony | H5 | Android | iOS | 小程序 | UTS |
|---|---|---|---|---|---|
| ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
t-form-modal 基础用法
vue
<template>
<view class="p-15">
<tui-theme-switch></tui-theme-switch>
<t-card class="mb-15"
title="FormModal 动态表单-窗口模式"
sub-title="JSON配置,弹出编辑框的一种形式"></t-card>
<t-card class="mb-15"
title="后端 JSON attrs字段配置说明"
sub-title="attrs可绑定事件和ref,实现表单各组件的关联控制"></t-card>
<t-button class="mb-15"
@click="showStepper"
type="primary">步进器(stepper)</t-button>
<t-button class="mb-15"
@click="showDate"
type="primary">日期(picker-date)</t-button>
<t-button class="mb-15"
@click="showPca"
type="primary">省市区(picker-pca)</t-button>
<t-button class="mb-15"
@click="showRadio"
type="primary">单选(radio)</t-button>
<t-button class="mb-15"
@click="showCheckbox"
type="primary">多选(checkbox)</t-button>
<t-button class="mb-15"
@click="showInput"
type="primary">输入框(input)</t-button>
<t-button class="mb-15"
@click="showRate"
type="primary">评分(rate)</t-button>
<t-button class="mb-15"
@click="showCode"
type="primary">验证码(code)</t-button>
<t-button class="mb-15"
@click="showSwitch"
type="primary">开关(switch)</t-button>
<t-button class="mb-15"
@click="showUpload"
type="primary">上传(upload)</t-button>
<t-button class="mb-15"
@click="showSelect1"
type="primary">下拉选择(select-适用于移动端)</t-button>
<t-button class="mb-15"
@click="showSlider"
type="primary">滑块(slider)</t-button>
<t-button class="mb-15"
@click="showTextarea"
type="primary">文本域(textarea)json配置attrs input事件</t-button>
<t-button class="mb-15"
@click="showPickerColor"
type="primary">色彩选择(picker-color)</t-button>
<t-button class="mb-15"
@click="showCalendar"
type="primary">日历(calendar)</t-button>
<t-button class="mb-15"
@click="showCascader"
type="primary">级联(cascader)</t-button>
<t-form-modal ref="formedit"
@confirm="onConfirm"
type="primary"></t-form-modal>
</view>
</template>
<script setup>
import { TuiApi } from '@/api'
const list = ref<UTSJSONObject[]>([])
const formedit = ref<TFormModalComponentPublicInstance | null>(null)
const images = [
{ url: '/static/image/6527ae979850d.jpg' }
] as UTSJSONObject[]
const sliderValue : number[] = [0, 105, 500]
const stepperValue : number = 15
const selectVal = '选项1'
const options = [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶',
disabled: true
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}]
function showStepper() {
// <t-stepper class="mb-25" v-model="vala" :min="3" :max="99"></t-stepper>
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
"title": "步进器",
"contentClass": "r-20", //弹出内容最外层标签的样式
"name": "primarynormal",
"type": "stepper",
"attrs": { min: 3, max: 99, size: "medium" },
"value": stepperValue,
"describe": "好友们可以在我的个人资料页看到，方便认出我"
})
}
function showSlider() {
// <t-slider class="tdr-tdb-h.260-mb.30" direction="horizontal" :min="0" :max="500" type="primary" blockSize="60"
// :disabled="false" :showValue="true" trackSize="20" v-model="sliderValue" showMode="after" />
// @tui-autocss-include
const sty1 = 'w-80%!'
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
"title": "滑块",
"name": "primarynormal",
"type": "slider",
"attrs": { class: sty1, direction: 'horizontal', min: 0, max: 500, blockSize: '30', disabled: false, showValue: true, trackSize: '10', showMode: 'after', effect: 'normal' },
"value": sliderValue,
"describe": ""
})
}
function showSelect1() {
const edit = formedit.value as TFormModalComponentPublicInstance
// @tui-autocss-include
const sty1 = 'h-175!'
// @tui-autocss-include
const sty2 = 'w-95%! ov'
edit.show({
"title": "下拉选择",
"name": "primarynormal",
"type": "pickerSelect",
"value": selectVal,
"attrs": { embeddable: true, "list": options, contentClass: sty1, class: sty2 },
"describe": ""
})
}
function showUpload() {
// <t-upload v - model="images" : count = "3" > </t-upload>
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
"title": "上传",
"name": "primarynormal",
"type": "upload",
"attrs": {},
"value": images,
"describe": ""
})
}
function showSwitch() {
// <t-switch v-model="switch5" type="primary" activeIcon="volume-up" inactiveIcon="volume-off"></t-switch>
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
"title": "开关",
"name": "primarynormal",
"type": "switch",
"attrs": { activeIcon: 'volume-up', inactiveIcon: 'volume-off' },
"value": true,
"describe": ""
})
}
function showRate() {
const edit = formedit.value as TFormModalComponentPublicInstance
// @tui-autocss-include
const sty = 's-32! mtb-20'
edit.show({
"title": "评分",
"name": "primarynormal",
"type": "rate",
"attrs": { "size": "large", "icon-class": sty },
"value": 3,
"describe": ""
})
}
function showCode() {
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
"title": "验证码",
"name": "primarynormal",
"type": "code",
"attrs": {
dot: true, dotSymbol: "*", autoFocus: true, maxlength: 4, inputType: 'number'
},
"value": "",
"describe": ""
})
}
function showCalendar() {
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
title: "日历",
name: "calendar",
type: "calendar",
attrs: {},
value: [] as string[],
describe: ""
})
}
function showCascader() {
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
title: "级联选择器",
name: "cascader",
type: "cascader",
attrs: {
option: [{
"value": "zhinan",
"label": "指南",
"children": [
{
"value": "shejiyuanze",
"label": "设计原则",
"children": [
{
"value": "yizhi",
"label": "一致",
"disabled": true
},
{
"value": "fankui",
"label": "反馈"
},
{
"value": "xiaolv",
"label": "效率"
},
{
"value": "kekong",
"label": "可控"
}
]
},
{
"value": "daohang",
"label": "导航",
"children": [
{
"value": "cexiangdaohang",
"label": "侧向导航"
},
{
"value": "dingbudaohang",
"label": "顶部导航"
}
]
}
]
},
{
"value": "zujian",
"label": "组件",
"children": [
{
"value": "basic",
"label": "Basic",
"children": [
{
"value": "layout",
"label": "Layout 布局"
},
{
"value": "color",
"label": "Color 色彩"
},
{
"value": "typography",
"label": "Typography 字体"
},
{
"value": "icon",
"label": "Icon 图标"
},
{
"value": "button",
"label": "Button 按钮"
}
]
},
{
"value": "form",
"label": "Form",
"children": [
{
"value": "radio",
"label": "Radio 单选框"
},
{
"value": "checkbox",
"label": "Checkbox 多选框"
},
{
"value": "input",
"label": "Input 输入框"
},
{
"value": "input-number",
"label": "InputNumber 计数器"
},
{
"value": "select",
"label": "Select 选择器"
},
{
"value": "cascader",
"label": "Cascader 级联选择器"
},
{
"value": "switch",
"label": "Switch 开关"
},
{
"value": "slider",
"label": "Slider 滑块"
},
{
"value": "time-picker",
"label": "TimePicker 时间选择器"
},
{
"value": "date-picker",
"label": "DatePicker 日期选择器"
},
{
"value": "datetime-picker",
"label": "DateTimePicker 日期时间选择器"
},
{
"value": "upload",
"label": "Upload 上传"
},
{
"value": "rate",
"label": "Rate 评分"
},
{
"value": "form",
"label": "Form 表单"
}
]
},
{
"value": "data",
"label": "Data",
"children": [
{
"value": "table",
"label": "Table 表格"
},
{
"value": "tag",
"label": "Tag 标签"
},
{
"value": "progress",
"label": "Progress 进度条"
},
{
"value": "tree",
"label": "Tree 树形控件"
},
{
"value": "pagination",
"label": "Pagination 分页"
},
{
"value": "badge",
"label": "Badge 标记"
}
]
},
{
"value": "notice",
"label": "Notice",
"children": [
{
"value": "alert",
"label": "Alert 警告"
},
{
"value": "loading",
"label": "Loading 加载"
},
{
"value": "message",
"label": "Message 消息提示"
},
{
"value": "message-box",
"label": "MessageBox 弹框"
},
{
"value": "notification",
"label": "Notification 通知"
}
]
},
{
"value": "navigation",
"label": "Navigation",
"children": [
{
"value": "menu",
"label": "NavMenu 导航菜单"
},
{
"value": "tabs",
"label": "Tabs 标签页"
},
{
"value": "breadcrumb",
"label": "Breadcrumb 面包屑"
},
{
"value": "dropdown",
"label": "Dropdown 下拉菜单"
},
{
"value": "steps",
"label": "Steps 步骤条"
}
]
},
{
"value": "others",
"label": "Others",
"children": [
{
"value": "dialog",
"label": "Dialog 对话框"
},
{
"value": "tooltip",
"label": "Tooltip 文字提示"
},
{
"value": "popover",
"label": "Popover 弹出框"
},
{
"value": "card",
"label": "Card 卡片"
},
{
"value": "carousel",
"label": "Carousel 走马灯"
},
{
"value": "collapse",
"label": "Collapse 折叠面板"
}
]
}
]
},
{
"value": "ziyuan",
"label": "资源",
"children": [
{
"value": "axure",
"label": "Axure Components"
},
{
"value": "sketch",
"label": "Sketch Templates"
},
{
"value": "jiaohu",
"label": "组件交互文档"
}
]
}
]
},
value: [] as string[],
describe: ""
})
}
function showPickerColor() {
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
title: "颜色设置",
name: "primarynormal",
type: "color",
attrs: {},
value: "#2979ff",
describe: ""
})
}
function showDate() {
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
title: "输入日期",
name: "date",
type: "date",
attrs: {
format: "yyyy-mm-dd", range: [
{ type: 'year', name: '年', start: 1900, end: 2999 },
{ type: 'month', name: '月', start: 1, end: 12 },
{ type: 'date', name: '日', start: 1, end: 31 },
]
},
value: "2024-12-11",
describe: "",
})
}
function showTextarea() {
const edit = formedit.value as TFormModalComponentPublicInstance
// @tui-autocss-include
const sty = 'r-10 plr-10 b-2px,s,#2979ff w-250!'
edit.show({
title: '文本域标题',
type: 'textarea',
name: 'field',
value: '文本内容',
attrs: {
class: sty,
type: 'info',
mode: 'number',
maxlength: 11,
placeholder: "欢迎使用Tui", onInput: (e : UniInputEvent) => {
uni.showToast({
title: e.detail.value
})
}
},
describe: '好友们可以在我的个人资料页看到，方便认出我'
})
}
function showCheckbox() {
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
title: '性别 ',
type: 'checkbox',
name: 'Gender',
value: ['3'],
describe: '好友们可以在我的个人资料页看到，方便认出我',
attrs: {
childClass: "p-0 ml-15",
transition: false
},
list: [
{
value: '1',
label: '男'
},
{
value: '2',
label: '女'
}, {
value: '3',
label: '保密'
}
]
})
}
function showRadio() {
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
title: '性别 ',
type: 'radio',
name: 'Gender',
value: '2',
describe: '好友们可以在我的个人资料页看到，方便认出我',
attrs: { childClass: "p-0 ml-15" },
list: [
{
value: '1',
label: '男'
},
{
value: '2',
label: '女'
}, {
value: '3',
label: '保密'
}
]
})
}
function showPca() {
const edit = formedit.value as TFormModalComponentPublicInstance
edit.show({
title: '城市选择 ',
type: 'city',
name: 'city',
value: [] as string[],
describe: "",
attrs: {
list: list.value
}
})
}
function showInput() {
const edit = formedit.value as TFormModalComponentPublicInstance
// @tui-autocss-include
const sty = 'r-10 plr-10 b-2px,s,#2979ff w-250!'
edit.show({
title: '手机号',
type: 'input',
name: 'phone',
value: '456789',
attrs: {
class: sty,
type: 'info',
mode: 'number',
maxlength: 11,
placeholder: "请输入手机号"
},
describe: '好友们可以在我的个人资料页看到，方便认出我'
})
}
function onConfirm(e : UTSJSONObject) {
console.log(e)
}
onLoad((_) => {
TuiApi('citydata', {}, true).then(res => {
list.value = res.getArray('data') as UTSJSONObject[]
})
})
</script>
<style>
.tui-border-test {
border: 1px solid #e3e3e3;
width: 80%;
border-radius: 10px;
}
</style>t-form-modal Props
| 属性名 | 类型 | 默认值 | 说明 | 可选值 |
|---|---|---|---|---|
| size | String | "" | 组件尺寸 | large, medium, small, mini |
| type | String | "" | 组件类型 | info, primary, error, warning, success |
| disabled | Boolean | false | 组件是否禁用 | true, false |
| hover | Boolean | false | 是否有点击效果 | true, false |
| path | String | "" | 点击组件后跳转的页面路径 | - |
| effect | String | "" | 组件显示主题 | normal, dark, light, plain |
| confirmText | String | "确认" | 提示框确认按钮的文本 | - |
t-form-modal Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| confirm | 点击确认按钮时触发 | { name, value } |
| cancel | 取消填写 | - |
| transitionend | 动画结束时触发 | boolean |
Methods
| 方法名 | 说明 | 参数 | 返回值 |
|---|---|---|---|
| show | 显示模态框 | option: UTSJSONObject | 无 |
支持的表单类型
| 类型 | 说明 | 对应组件 |
|---|---|---|
| input | 文本输入框 | t-input |
| select | 下拉选择器 | t-select |
| pickerSelect | 选择器 | t-picker-select |
| radio | 单选框组 | t-radio-group |
| checkbox | 复选框组 | t-checkbox-group |
| stepper | 步进器 | t-stepper |
| slider | 滑块组件 | t-slider |
| rate | 评分组件 | t-rate |
| code | 验证码输入框 | t-code-input |
| switch | 开关组件 | t-switch |
| upload | 文件上传 | t-upload |
| textarea | 文本域 | t-textarea |
| color | 颜色选择器 | t-color |
| calendar | 日历组件 | t-calendar |
| cascader | 级联选择器 | t-cascader |
| fileManager | 文件管理器 | t-file-manager |
| date | 日期选择器 | t-select-date |
| city | 城市选择器 | t-picker-city |