FormModal 组件

FormModal 是一个动态表单窗口组件，用于创建不同类型的表单输入。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

<template>
	<t-page class="p.30" title="动态表单-窗口模式">
		<t-card class="mb.30" title="FormModal 动态表单-窗口模式" sub-title="JSON配置,弹出编辑框的一种形式"></t-card>
		<t-card class="mb.30" title="JSON attrs字段配置说明" sub-title="attrs可绑定事件和ref,实现表单各组件的关联控制"></t-card>
		<t-button class="mb.30" @click="showStepper" type="p">步进器(stepper)</t-button>
		<t-button class="mb.30" @click="showDate" type="p">日期(picker-date)</t-button>
		<t-button class="mb.30" @click="showPca" type="p">省市区(picker-pca)</t-button>
		<t-button class="mb.30" @click="showRadio" type="p">单选(radio)</t-button>
		<t-button class="mb.30" @click="showCheckbox" type="p">多选(checkbox)</t-button>
		<t-button class="mb.30" @click="showInput" type="p">输入框(input)</t-button>
		<t-button class="mb.30" @click="showRate" type="p">评分(rate)</t-button>
		<t-button class="mb.30" @click="showCode" type="p">验证码(code)</t-button>
		<t-button class="mb.30" @click="showSwitch" type="p">开关(switch)</t-button>
		<t-button class="mb.30" @click="showUpload" type="p">上传(upload)</t-button>
		<t-button class="mb.30" @click="showSelect" type="p">下拉选择(select)</t-button>
		<t-button class="mb.30" @click="showSlider" type="p">滑块(slider)</t-button>
		<t-button class="mb.30" @click="showTextarea" type="p">文本域(textarea)json配置attrs input事件</t-button>
		<t-button class="mb.30" @click="showPickerColor" type="p">色彩选择(picker-color)</t-button>
		<t-form-modal ref="formedit" @confirm="onConfirm"></t-form-modal>
	</t-page>
</template>

<script setup>
	import { TuipickerDateRange, TuiUploadOptions } from '@/uni_modules/t-ui'
	import { TuiApi } from '@/api/uriApi.uts'
	const list = ref<UTSJSONObject[]>([])
	const dateRange = {
		year: [2020, 2028]
	} as TuipickerDateRange
	const formedit = ref<TFormModalComponentPublicInstance | null>(null)
	const images = [
		{ url: '/static/image/6527ae979850d.jpg' }
	] as TuiUploadOptions[]
	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": "步进器",
			"name": "primarynormal",
			"type": "stepper",
			"attrs": { min: 3, max: 99 },
			"value": stepperValue,
			"describe": ""
		})
	}
	function showSlider() {
		// <t-slider class="tdr-tdb-h.260-mb.30" direction="horizontal" :min="0" :max="500" type="p" blockSize="60"
		// 	:disabled="false" :showValue="true" trackSize="20" v-model="sliderValue" showMode="after" />
		const edit = formedit.value as TFormModalComponentPublicInstance
		edit.show({
			"title": "滑块",
			"name": "primarynormal",
			"type": "slider",
			"attrs": { direction: 'horizontal', min: 0, max: 500, blockSize: '60', disabled: false, showValue: true, trackSize: '20', showMode: 'after' },
			"value": sliderValue,
			"describe": ""
		})
	}
	function showSelect() {
		// <t-select class="mb.30" v - model="val" : options = "options" > </t-select>
		const edit = formedit.value as TFormModalComponentPublicInstance
		edit.show({
			"title": "下拉选择",
			"name": "primarynormal",
			"type": "select",
			"attrs": { options: options },
			"value": selectVal,
			"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="p" 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
		edit.show({
			"title": "评分",
			"name": "primarynormal",
			"type": "rate",
			"attrs": { "size": "large", "class": "s.65" },
			"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
			},
			"value": "",
			"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({
			type: 'date',
			value: '',
			attrs: {
				mode: ['year', 'month', 'day'],
				range: dateRange
			}
		})
	}
	function showTextarea() {
		const edit = formedit.value as TFormModalComponentPublicInstance
		edit.show({
			title: '文本域标题',
			type: 'textarea',
			theme: 'p',
			name: 'field',
			value: '文本内容',
			attrs: {
				placeholder: "欢迎使用Tui", onInput: (e : UniInputEvent) => {
					uni.showToast({
						title: e.detail.value
					})
				}
			}, //可以绑定事件
			describe: '好友们可以在我的个人资料页看到，方便认出我'
		})
	}
	function showCheckbox() {
		const edit = formedit.value as TFormModalComponentPublicInstance
		edit.show({
			list: [
				{
					value: '1',
					label: '男'
				},
				{
					value: '2',
					label: '女'
				}, {
					value: '3',
					label: '保密'
				}
			],
			title: '性别 ',
			type: 'checkbox',
			theme: 'p',
			name: 'Gender',
			value: ['3'],
			describe: '好友们可以在我的个人资料页看到，方便认出我'
		})

	}
	function showRadio() {
		const edit = formedit.value as TFormModalComponentPublicInstance
		edit.show({
			list: [
				{
					value: '1',
					label: '男'
				},
				{
					value: '2',
					label: '女'
				}, {
					value: '3',
					label: '保密'
				}
			],
			title: '性别 ',
			type: 'radio',
			theme: 'p',
			name: 'Gender',
			value: '2',
			describe: '好友们可以在我的个人资料页看到，方便认出我'
		})
	}
	function showPca() {
		const edit = formedit.value as TFormModalComponentPublicInstance
		edit.show({
			type: 'city',
			theme: 'error',
			name: 'city',
			attrs: {
				value: ['130000', '130500', '130502'] as string[],
				list: list.value
			}
		})

	}
	function showInput() {
		const edit = formedit.value as TFormModalComponentPublicInstance
		edit.show({
			title: '手机号',
			type: 'input',
			theme: 'p',
			name: 'phone',
			value: '456789',
			attrs: {
				mode: 'number',
				maxlength: 11,
				placeholder: "请输入手机号"
			},
			describe: '好友们可以在我的个人资料页看到，方便认出我'
		})
	}
	function onConfirm(e : UTSJSONObject) {
		console.log(e['updateValue'])
	}
	onLoad((_) => {
		const datalist = uni.getStorageSync('citydata')
		if (`${datalist}` == '') {
			TuiApi('citydata').then(res => {
				list.value = res.getArray('data') as UTSJSONObject[]
				uni.setStorageSync('citydata', list.value)
			})
		} else {
			list.value = datalist as UTSJSONObject[]
		}
	})
</script>

Props

名称	描述	类型	默认值
type	表单类型	String	'p'
theme	主题样式	String	'p'

Events

事件名	描述	参数
confirm	确认事件	UTSJSONObject
cancel	取消事件	-

Methods

方法名	描述	参数
show	显示表单窗口	UTSJSONObject
close	关闭表单窗口	-

Slots

名称	描述
default	默认插槽，用于自定义表单内容