-
Notifications
You must be signed in to change notification settings - Fork 0
/
tmp.txt
1 lines (1 loc) · 56.8 KB
/
tmp.txt
1
[{"pageContent":"({\"典型表单\":{\"description\":[\"一个典型表单组件包含各种表单项，比如输入框、选择器、单选框、多选框、开关、文本输入等。\"],\"code\":\"<template>\\n <t-form ref=\\\"form\\\" :rules=\\\"FORM_RULES\\\" :data=\\\"formData\\\" :colon=\\\"true\\\" @reset=\\\"onReset\\\" @submit=\\\"onSubmit\\\">\\n <t-form-item label=\\\"姓名\\\" name=\\\"name\\\">\\n <t-input v-model=\\\"formData.name\\\" placeholder=\\\"请输入内容\\\" @enter=\\\"onEnter\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"手机号码\\\" name=\\\"tel\\\">\\n <t-input v-model=\\\"formData.tel\\\" placeholder=\\\"请输入内容\\\" @enter=\\\"onEnter\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"接收短信\\\" name=\\\"status\\\">\\n <t-switch v-model=\\\"formData.status\\\"></t-switch>\\n </t-form-item>\\n\\n <t-form-item label=\\\"性别\\\" name=\\\"gender\\\">\\n <t-radio-group v-model=\\\"formData.gender\\\">\\n <t-radio value=\\\"1\\\">男</t-radio>\\n <t-radio value=\\\"2\\\">女</t-radio>\\n </t-radio-group>\\n </t-form-item>\\n\\n <t-form-item label=\\\"课程\\\" name=\\\"course\\\">\\n <t-checkbox-group v-model=\\\"formData.course\\\" :options=\\\"courseOptions\\\"></t-checkbox-group>\\n </t-form-item>\\n\\n <t-form-item>\\n <t-space size=\\\"small\\\">\\n <t-button","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"theme=\\\"primary\\\" type=\\\"submit\\\">提交</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\">重置</t-button>\\n <!-- 下方示例代码，有效，勿删 -->\\n <!--<t-button theme=\\\"default\\\" @click=\\\"submitForm\\\">实例方法提交</t-button>-->\\n <!--<t-button theme=\\\"default\\\" variant=\\\"base\\\" @click=\\\"resetForm\\\">实例方法重置</t-button>-->\\n <!--<t-button theme=\\\"default\\\" variant=\\\"base\\\" @click=\\\"validateOnly\\\">仅校验</t-button>-->\\n </t-space>\\n </t-form-item>\\n </t-form>\\n</template>\\n<script setup>\\nimport { ref, reactive } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst FORM_RULES = { name: [{ required: true, message: '姓名必填' }] };\\n\\nconst formData = reactive({\\n name: '',\\n tel: '',\\n gender: '',\\n course: [],\\n status: false,\\n});\\nconst form = ref(null);\\n\\nconst courseOptions = [\\n { label: '语文', value: '1' },\\n { label: '数学', value: '2' },\\n { label: '英语', value: '3' },\\n];\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"console.log('Validate Errors: ', firstError, validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n\\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\\nconst submitForm = async () => {\\n form.value.submit();\\n form.value.submit({ showErrorMessage: false });\\n\\n // 校验数据，代码有效，勿删\\n // form.value.validate();\\n\\n // 校验数据：只提交和校验，不在表单中显示错误文本信息。下方代码有效，勿删\\n // form.value.validate({ showErrorMessage: false }).then((validateResult) => {\\n // if (validateResult && Object.keys(validateResult).length) {\\n // const firstError = Object.values(validateResult)[0]?.[0]?.message;\\n // MessagePlugin.warning(firstError);\\n // }\\n // });\\n};\\n\\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\\nconst resetForm = () => {\\n form.value.reset();\\n // 下方为示例代码，有效，勿删\\n // form.value.reset({ type: 'initial' });\\n // form.value.reset({ type: 'empty' });\\n // form.value.reset({ type: 'initial', fields: ['name'] });\\n // form.value.reset({ type: 'empty', fields: ['name'] });\\n};\\n\\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\\nconst validateOnly = async ()","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"=> {\\n const result = await form.value.validateOnly();\\n MessagePlugin.success('打开控制台查看校验结果');\\n console.log('validateOnly', result);\\n};\\n\\n// 禁用 Input 组件，按下 Enter 键时，触发 submit 事件\\nconst onEnter = (_, { e }) => {\\n e.preventDefault();\\n};\\n</script>\\n\"},\"登录表单\":{\"description\":[\"专门适用于登录页面的账号和密码输入的表单。\"],\"code\":\"<template>\\n <div style=\\\"width: 350px\\\">\\n <t-form ref=\\\"form\\\" :data=\\\"formData\\\" :colon=\\\"true\\\" :label-width=\\\"0\\\" @reset=\\\"onReset\\\" @submit=\\\"onSubmit\\\">\\n <t-form-item name=\\\"account\\\">\\n <t-input v-model=\\\"formData.account\\\" clearable placeholder=\\\"请输入账户名\\\">\\n <template #prefix-icon>\\n <desktop-icon />\\n </template>\\n </t-input>\\n </t-form-item>\\n\\n <t-form-item name=\\\"password\\\">\\n <t-input v-model=\\\"formData.password\\\" type=\\\"password\\\" clearable placeholder=\\\"请输入密码\\\">\\n <template #prefix-icon>\\n <lock-on-icon />\\n </template>\\n </t-input>\\n </t-form-item>\\n\\n <t-form-item>\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\" block>登录</t-button>\\n </t-form-item>\\n </t-form>\\n </div>\\n</template>\\n<script setup>\\nimport { reactive } from 'vue';\\nimport","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"{ MessagePlugin } from 'tdesign-vue-next';\\nimport { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next';\\n\\nconst formData = reactive({\\n account: '',\\n password: '',\\n});\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Validate Errors: ', firstError, validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n</script>\\n\"},\"不同对齐方式的表单\":{\"description\":[\"根据具体目标和制约因素，选择最佳的标签对齐方式，默认对齐方式为右对齐。\"],\"code\":\"<template>\\n <t-space direction=\\\"vertical\\\" size=\\\"large\\\">\\n <t-radio-group v-model=\\\"formData.labelAlign\\\" variant=\\\"default-filled\\\">\\n <t-radio-button value=\\\"left\\\">左对齐</t-radio-button>\\n <t-radio-button value=\\\"right\\\">右对齐</t-radio-button>\\n <t-radio-button value=\\\"top\\\">顶部对齐</t-radio-button>\\n </t-radio-group>\\n\\n <t-form :data=\\\"formData\\\" :label-align=\\\"formData.labelAlign\\\" :label-width=\\\"60\\\">\\n <t-form-item label=\\\"姓名\\\" name=\\\"name\\\">\\n <t-input","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"v-model=\\\"formData.name\\\"></t-input>\\n </t-form-item>\\n <t-form-item label=\\\"密码\\\" name=\\\"password\\\">\\n <t-input v-model=\\\"formData.password\\\" type=\\\"password\\\"></t-input>\\n </t-form-item>\\n <t-form-item>\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\">登录</t-button>\\n </t-form-item>\\n </t-form>\\n </t-space>\\n</template>\\n<script setup>\\nimport { reactive } from 'vue';\\n\\nconst formData = reactive({\\n labelAlign: 'right',\\n name: '',\\n password: '',\\n});\\n</script>\\n\"},\"不同布局类型的表单\":{\"description\":[],\"code\":\"<template>\\n <t-space direction=\\\"vertical\\\" size=\\\"large\\\">\\n <t-radio-group v-model=\\\"formData.layout\\\" variant=\\\"default-filled\\\">\\n <t-radio-button value=\\\"vertical\\\">纵向布局</t-radio-button>\\n <t-radio-button value=\\\"inline\\\">行内布局</t-radio-button>\\n </t-radio-group>\\n\\n <t-form\\n ref=\\\"form\\\"\\n :data=\\\"formData\\\"\\n label-width=\\\"calc(2em + 24px)\\\"\\n :layout=\\\"formData.layout\\\"\\n scroll-to-first-error=\\\"smooth\\\"\\n @reset=\\\"onReset\\\"\\n @submit=\\\"onSubmit\\\"\\n >\\n <t-form-item label=\\\"名字\\\" name=\\\"name\\\">\\n <t-input","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"v-model=\\\"formData.name\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"密码\\\" name=\\\"password\\\">\\n <t-input v-model=\\\"formData.password\\\" type=\\\"password\\\"></t-input>\\n </t-form-item>\\n </t-form>\\n </t-space>\\n</template>\\n<script setup>\\nimport { reactive } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst formData = reactive({\\n layout: 'inline',\\n name: '',\\n password: '',\\n});\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Validate Errors: ', firstError, validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n</script>\\n\"},\"不同重置功能的表单\":{\"description\":[\"表单重置分三类：全部数据重置为空、全部数据重置为初始值、重置任意数据为任意值。\"],\"code\":\"<template>\\n <t-space direction=\\\"vertical\\\" size=\\\"large\\\">\\n <t-radio-group v-model=\\\"resetType\\\" variant=\\\"default-filled\\\">\\n <t-radio-button value=\\\"empty\\\">重置为空</t-radio-button>\\n <t-radio-button value=\\\"initial\\\">\\n <t-popup","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"content=\\\"改变表单数据后，点击重置按钮，观察数据重置情况\\\"> 重置为初始值 </t-popup>\\n </t-radio-button>\\n </t-radio-group>\\n\\n <!-- colon 表示，是否统一显示 label 冒号 -->\\n <t-form ref=\\\"form\\\" :data=\\\"formData\\\" :reset-type=\\\"resetType\\\" colon @reset=\\\"onReset\\\" @submit=\\\"onSubmit\\\">\\n <t-form-item label=\\\"姓名\\\" name=\\\"name\\\">\\n <t-input v-model=\\\"formData.name\\\" placeholder=\\\"请输入内容\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"手机号码\\\" name=\\\"tel\\\">\\n <t-input v-model=\\\"formData.tel\\\" placeholder=\\\"请输入内容\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"课程\\\" name=\\\"course\\\">\\n <t-checkbox-group v-model=\\\"formData.course\\\" :options=\\\"courseOptions\\\"></t-checkbox-group>\\n </t-form-item>\\n\\n <t-form-item>\\n <t-space size=\\\"small\\\">\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\">提交</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\">重置</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" @click=\\\"resetPhoneNumber\\\">只重置手机号码</t-button>\\n </t-space>\\n </t-form-item>\\n </t-form>\\n </t-space>\\n</template>\\n<script setup>\\nimport { ref, reactive } from","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst formData = reactive({\\n name: 'TDesign',\\n tel: '12345678910',\\n course: ['1'],\\n});\\nconst form = ref(null);\\nconst resetType = ref('initial');\\n\\nconst courseOptions = [\\n { label: '语文', value: '1' },\\n { label: '数学', value: '2' },\\n { label: '英语', value: '3' },\\n];\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Errors: ', validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n\\nconst resetPhoneNumber = () => {\\n form.value?.reset({ fields: ['tel'] });\\n};\\n</script>\\n\"},\"不同状态的表单项\":{\"description\":[\"通过图标及提示文字的形式来提示用户对表单的填写。\"],\"code\":\"<template>\\n <t-space direction=\\\"vertical\\\" size=\\\"large\\\" class=\\\"tdesign-demo-form-status\\\">\\n <!--\\n 1. statusIcon 值为 true，显示默认图标。默认图标有 成功、失败、警告 等，不同的状态图标不同\\n 2. statusIcon 值为 false，不显示图标\\n 3. statusIcon 值类型为 function，可以自定义右侧状态图标\\n 4. statusIcon 为 slot(插槽)，可自定义右侧状态图标\\n -->\\n <t-radio-group","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"v-model=\\\"formStatusIcon\\\" variant=\\\"default-filled\\\">\\n <t-radio-button :value=\\\"true\\\">显示校验图标</t-radio-button>\\n <t-radio-button :value=\\\"false\\\">隐藏校验图标</t-radio-button>\\n </t-radio-group>\\n\\n <t-form\\n ref=\\\"formValidatorStatus\\\"\\n :data=\\\"formData\\\"\\n :rules=\\\"rules\\\"\\n :label-width=\\\"80\\\"\\n :status-icon=\\\"formStatusIcon\\\"\\n @reset=\\\"onReset\\\"\\n @submit=\\\"onSubmit\\\"\\n >\\n <t-form-item label=\\\"失败\\\" name=\\\"fail\\\">\\n <t-input v-model=\\\"formData.fail\\\" placeholder=\\\"校验不通过状态\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"警告\\\" name=\\\"warning\\\">\\n <t-input v-model=\\\"formData.warning\\\" placeholder=\\\"校验警告状态\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"成功\\\" name=\\\"success\\\">\\n <t-input v-model=\\\"formData.success\\\" placeholder=\\\"不带绿色边框的成功状态\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"成功\\\" name=\\\"success\\\" success-border>\\n <t-input v-model=\\\"formData.success\\\" placeholder=\\\"带绿色边框的成功状态\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"失败\\\" name=\\\"failB\\\" :status-icon=\\\"false\\\">\\n <t-input","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"v-model=\\\"formData.failB\\\" placeholder=\\\"隐藏状态图标\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"警告\\\" name=\\\"warningB\\\">\\n <t-input v-model=\\\"formData.warningB\\\" placeholder=\\\"校验警告状态\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"加载中\\\" name=\\\"loading\\\">\\n <t-input v-model=\\\"formData.loading\\\" placeholder=\\\"正在校验中，请稍等\\\"></t-input>\\n <template #statusIcon>\\n <div style=\\\"width: 16px; display: flex; justify-content: center\\\">\\n <t-loading size=\\\"small\\\" />\\n </div>\\n </template>\\n </t-form-item>\\n\\n <!-- 自定义图标：可以使用渲染函数 statusIcon，也可以使用插槽 statusIcon -->\\n <t-form-item label=\\\"帮助\\\" :status-icon=\\\"getStatusIcon\\\" name=\\\"help\\\">\\n <t-input v-model=\\\"formData.help\\\" placeholder=\\\"自定义右侧图标\\\"></t-input>\\n <!-- <t-icon slot=\\\"statusIcon\\\" name='help-circle' size=\\\"24px\\\" style=\\\"color: #0006\\\"/> -->\\n </t-form-item>\\n\\n <t-form-item v-for=\\\"(item, index) in addlist\\\" :key=\\\"item.id\\\" label=\\\"新增\\\" :name=\\\"item.name\\\">\\n <t-input v-model=\\\"formData[item.name]\\\"></t-input>\\n\\n <template #statusIcon>\\n <t-button v-if=\\\"item.id === 0 || item.id ===","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"lastAddItem - 1\\\" variant=\\\"dashed\\\" @click=\\\"addItem\\\">\\n <t-icon name=\\\"add\\\" />\\n </t-button>\\n <t-button v-if=\\\"item.id > 0\\\" variant=\\\"dashed\\\" @click=\\\"removeItem(item, index)\\\">\\n <t-icon name=\\\"remove\\\" />\\n </t-button>\\n </template>\\n </t-form-item>\\n\\n <t-form-item :status-icon=\\\"false\\\">\\n <t-space size=\\\"small\\\">\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\">提交</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\">重置</t-button>\\n </t-space>\\n </t-form-item>\\n </t-form>\\n </t-space>\\n</template>\\n<script lang=\\\"jsx\\\" setup>\\nimport { ref, onMounted } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst INITIAL_DATA = {\\n fail: '',\\n warning: '',\\n success: '',\\n failB: '',\\n warningB: '',\\n loading: '',\\n add: '',\\n help: '',\\n};\\n\\nconst rules = {\\n fail: [{ required: true, message: '必填', type: 'error' }],\\n warning: [{ required: true, message: '必填', type: 'warning' }],\\n success: [{ validator: () => true }],\\n failB: [{ required: true, message: '必填', type: 'error' }],\\n warningB: [{ required: true, message: '必填', type: 'warning' }],\\n};\\n\\nconst","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"formData = ref({ ...INITIAL_DATA });\\nconst formValidatorStatus = ref(null);\\n\\nconst addlist = ref([{ id: 0, name: 'add0' }]);\\nconst lastAddItem = ref(1);\\n\\nconst addItem = () => {\\n const addNum = lastAddItem.value;\\n INITIAL_DATA[`add${addNum}`] = '';\\n addlist.value.push({ id: addNum, name: `add${addNum}` });\\n lastAddItem.value += 1;\\n};\\nconst removeItem = (item, index) => {\\n delete INITIAL_DATA[`add${item.id}`];\\n addlist.value.splice(index, 1);\\n};\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Validate Errors: ', firstError, validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n\\nonMounted(() => {\\n formValidatorStatus.value.validate();\\n});\\nconst formStatusIcon = ref(true);\\n\\nconst getStatusIcon = () => <t-icon name=\\\"help-circle\\\" size=\\\"16px\\\" style={{ color: '#0006' }} />;\\n</script>\\n<style>\\n.tdesign-demo-form-status .t-input {\\n width:","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"520px;\\n}\\n</style>\\n\"},\"不同校验规则的表单\":{\"description\":[\"表单内置的校验规则有：date / url / email / required / boolean / max / min / len / number / enum / idcard / telnumber / pattern 。其中 date / url / email 等校验规则参数参看：https://github.com/validatorjs/validator.js。各校验规则示例见 API 文档中的 FormRule。\"],\"code\":\"<template>\\n <!-- scrollToFirstError=\\\"smooth\\\" -->\\n <t-form ref=\\\"form\\\" :data=\\\"formData\\\" :rules=\\\"rules\\\" @reset=\\\"onReset\\\" @submit=\\\"onSubmit\\\">\\n <t-form-item label=\\\"用户名\\\" help=\\\"这是用户名字段帮助说明\\\" name=\\\"account\\\">\\n <t-input v-model=\\\"formData.account\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"个人简介\\\" help=\\\"一句话介绍自己\\\" name=\\\"description\\\">\\n <t-input v-model=\\\"formData.description\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"密码\\\" name=\\\"password\\\">\\n <t-input v-model=\\\"formData.password\\\" type=\\\"password\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"邮箱\\\" name=\\\"email\\\">\\n <t-input v-model=\\\"formData.email\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"年龄\\\" name=\\\"age\\\">\\n <t-input-number v-model=\\\"formData.age\\\" />\\n </t-form-item>\\n\\n","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"<t-form-item label=\\\"性别\\\" name=\\\"gender\\\">\\n <t-radio-group v-model=\\\"formData.gender\\\">\\n <t-radio value=\\\"male\\\">男</t-radio>\\n <t-radio value=\\\"femal\\\">女</t-radio>\\n </t-radio-group>\\n </t-form-item>\\n\\n <t-form-item label=\\\"课程\\\" name=\\\"course\\\">\\n <t-checkbox-group v-model=\\\"formData.course\\\" :options=\\\"courseOptions\\\"></t-checkbox-group>\\n </t-form-item>\\n\\n <t-form-item label=\\\"学院\\\" name=\\\"college\\\">\\n <t-select v-model=\\\"formData.college\\\" class=\\\"demo-select-base\\\" clearable filterable>\\n <t-option v-for=\\\"(item, index) in options\\\" :key=\\\"index\\\" :value=\\\"item.value\\\" :label=\\\"item.label\\\">\\n {{ item.label }}\\n </t-option>\\n </t-select>\\n </t-form-item>\\n\\n <t-form-item\\n label=\\\"入学时间\\\"\\n name=\\\"date\\\"\\n :rules=\\\"[\\n { required: true, message: '此项必填' },\\n { date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' },\\n ]\\\"\\n >\\n <t-input v-model=\\\"formData.date\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"个人网站\\\" name=\\\"content.url\\\">\\n <t-input v-model=\\\"formData.content.url\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item>\\n <t-space","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"size=\\\"small\\\">\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\">提交</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\">重置</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" @click=\\\"handleClear\\\">清空校验结果</t-button>\\n </t-space>\\n </t-form-item>\\n </t-form>\\n</template>\\n<script setup>\\nimport { ref, reactive } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst form = ref(null);\\nconst formData = reactive({\\n account: '',\\n password: '',\\n email: '',\\n age: undefined,\\n gender: '',\\n course: [],\\n college: '',\\n date: '',\\n content: {\\n url: '',\\n },\\n});\\n\\nconst rules = {\\n account: [\\n { required: true, message: '姓名必填', type: 'error', trigger: 'blur' },\\n { required: true, message: '姓名必填', type: 'error', trigger: 'change' },\\n { whitespace: true, message: '姓名不能为空' },\\n { min: 3, message: '输入字数应在3到6之间', type: 'error', trigger: 'blur' },\\n { max: 6, message: '输入字数应在3到6之间', type: 'error', trigger: 'blur' },\\n ],\\n password: [{ required: true, message: '密码必填', type: 'error' }],\\n email: [{ required: true, message: '格式必须为邮箱', type: 'warning' }],\\n age: [\\n {","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"required: true, message: '年龄必填', type: 'error' },\\n { number: true, message: '请输入数字', type: 'warning' },\\n ],\\n gender: [{ required: true, message: '性别必填', type: 'warning' }],\\n course: [{ required: true, message: '课程必填', type: 'warning' }],\\n college: [\\n // 注意：trigger: blur 仅在输入框或选择框失去焦点时触发，需要注意配合 trigger: change 使用\\n { required: true, message: '学院必选', type: 'warning', trigger: 'blur' },\\n { required: true, message: '学院必选', type: 'warning', trigger: 'change' },\\n ],\\n 'content.url': [\\n { required: true, message: '个人网站必填', type: 'warning' },\\n {\\n url: {\\n protocols: ['http', 'https', 'ftp'],\\n require_protocol: true,\\n },\\n message: '请输入正确的个人主页',\\n },\\n ],\\n};\\n\\nconst courseOptions = [\\n { label: '语文', value: '1' },\\n { label: '数学', value: '2' },\\n { label: '英语', value: '3' },\\n { label: '体育', value: '4' },\\n];\\n\\nconst options = [\\n { label: '计算机学院', value: '1' },\\n { label: '软件学院', value: '2' },\\n { label: '物联网学院', value: '3' },\\n];\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError, e }) => {\\n e.preventDefault();\\n if (validateResult === true) {\\n","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"MessagePlugin.success('提交成功');\\n } else {\\n console.log('Validate Errors: ', firstError, validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n\\nconst handleClear = () => {\\n form.value.clearValidate();\\n};\\n</script>\\n<style scoped>\\n.demo-select-base {\\n width: 300px;\\n}\\n</style>\\n\"},\"可自定义校验规则的表单\":{\"description\":[\"支持自定义配置校验规则，也支持配置异步校验。同一个字段的同一个校验规则可以设定多种不同的校验结果。\",\"使用 validator 自定义校验函数，支持异步返回结果 Promise，返回结果可以设置不同的校验结果、校验结果类型、校验结果信息。\"],\"code\":\"<template>\\n <t-form ref=\\\"form\\\" :data=\\\"formData\\\" :rules=\\\"rules\\\" @reset=\\\"onReset\\\" @submit=\\\"onSubmit\\\" @validate=\\\"onValidate\\\">\\n <t-form-item label=\\\"用户名\\\" name=\\\"account\\\">\\n <t-input v-model=\\\"formData.account\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"密码\\\" name=\\\"password\\\" help=\\\"同一个校验方法可输出不同的错误信息和类型，依次输入：1234 观察变化\\\">\\n <t-input v-model=\\\"formData.password\\\" type=\\\"password\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"确认密码\\\" name=\\\"rePassword\\\" help=\\\"自定义异步校验方法\\\">\\n <t-input v-model=\\\"formData.rePassword\\\" type=\\\"password\\\"></t-input>\\n","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"</t-form-item>\\n\\n <t-form-item>\\n <t-space size=\\\"small\\\">\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\">提交</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\">重置</t-button>\\n </t-space>\\n </t-form-item>\\n </t-form>\\n</template>\\n<script setup>\\nimport { ref, reactive } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst form = ref(null);\\nconst formData = reactive({\\n account: '',\\n password: '',\\n rePassword: '',\\n});\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError, e }) => {\\n e.preventDefault();\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Validate Errors: ', firstError, validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n\\nconst onValidate = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n console.log('Validate Success');\\n } else {\\n console.log('Validate Errors: ', firstError, validateResult);\\n }\\n};\\n\\nconst rePassword = (val) =>\\n new Promise((resolve) => {\\n const timer = setTimeout(() => {\\n","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"resolve(formData.value.password === val);\\n clearTimeout(timer);\\n });\\n });\\n\\nconst passwordValidator = (val) => {\\n if (val.length > 0 && val.length <= 2) {\\n return { result: false, message: '太简单了！再开动一下你的小脑筋吧！', type: 'error' };\\n }\\n if (val.length > 2 && val.length < 4) {\\n return { result: false, message: '还差一点点，就是一个完美的密码了！', type: 'warning' };\\n }\\n return { result: true, message: '太强了，你确定自己记得住吗！', type: 'success' };\\n};\\n\\nconst rules = {\\n account: [\\n { required: true, message: '姓名必填', type: 'error' },\\n {\\n min: 2,\\n message: '至少需要两个字',\\n type: 'error',\\n trigger: 'blur',\\n },\\n ],\\n password: [{ required: true, message: '密码必填', type: 'error' }, { validator: passwordValidator }],\\n rePassword: [\\n // 自定义校验规则\\n { required: true, message: '密码必填', type: 'error' },\\n { validator: rePassword, message: '两次密码不一致' },\\n ],\\n};\\n</script>\\n\"},\"可清空校验结果的表单\":{\"description\":[\"在一些复杂的业务场景中，会涉及到自主控制校验结果的显示与否，此时使用实例方法 clearValidate 来清空校验结果。可以清空全部字段的校验结果，也可以清除部分字段的校验结果。\"],\"code\":\"<template>\\n <t-form ref=\\\"form\\\" :data=\\\"formData\\\" :rules=\\\"rules\\\" scroll-to-first-error=\\\"smooth\\\" @reset=\\\"onReset\\\"","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"@submit=\\\"onSubmit\\\">\\n <t-form-item label=\\\"用户名\\\" help=\\\"这是用户名字段帮助说明\\\" name=\\\"account\\\">\\n <t-input v-model=\\\"formData.account\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"个人简介\\\" help=\\\"一句话介绍自己\\\" name=\\\"description\\\">\\n <t-input v-model=\\\"formData.description\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"密码\\\" name=\\\"password\\\">\\n <t-input v-model=\\\"formData.password\\\" type=\\\"password\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"邮箱\\\" name=\\\"email\\\">\\n <t-input v-model=\\\"formData.email\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"性别\\\" name=\\\"gender\\\">\\n <t-radio-group v-model=\\\"formData.gender\\\">\\n <t-radio value=\\\"male\\\">男</t-radio>\\n <t-radio value=\\\"femal\\\">女</t-radio>\\n </t-radio-group>\\n </t-form-item>\\n\\n <t-form-item label=\\\"课程\\\" name=\\\"course\\\">\\n <t-checkbox-group v-model=\\\"formData.course\\\" :options=\\\"courseOptions\\\"></t-checkbox-group>\\n </t-form-item>\\n\\n <t-form-item label=\\\"学院\\\" name=\\\"college\\\">\\n <t-select v-model=\\\"formData.college\\\" class=\\\"demo-select-base\\\" clearable>\\n <t-option","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"v-for=\\\"(item, index) in options\\\" :key=\\\"index\\\" :value=\\\"item.value\\\" :label=\\\"item.label\\\">\\n {{ item.label }}\\n </t-option>\\n </t-select>\\n </t-form-item>\\n\\n <t-form-item\\n label=\\\"入学时间\\\"\\n name=\\\"date\\\"\\n :rules=\\\"[{ date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' }]\\\"\\n >\\n <t-input v-model=\\\"formData.date\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"个人网站\\\" name=\\\"content.url\\\">\\n <t-input v-model=\\\"formData.content.url\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item>\\n <t-space size=\\\"small\\\">\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\"> 提交 </t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\"> 重置 </t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" @click=\\\"handleClear\\\"> 清空校验结果 </t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" @click=\\\"clearFieldsValidateResult\\\"> 清除指定字段的校验结果 </t-button>\\n </t-space>\\n </t-form-item>\\n </t-form>\\n</template>\\n<script setup>\\nimport { ref, reactive } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst form = ref(null);\\nconst formData = reactive({\\n","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"account: '',\\n password: '',\\n description: '',\\n email: '',\\n gender: '',\\n college: '',\\n date: '',\\n content: {\\n url: '',\\n },\\n course: [],\\n});\\n\\nconst courseOptions = [\\n { label: '语文', value: '1' },\\n { label: '数学', value: '2' },\\n { label: '英语', value: '3' },\\n { label: '体育', value: '4' },\\n];\\nconst options = [\\n { label: '计算机学院', value: '1' },\\n { label: '软件学院', value: '2' },\\n { label: '物联网学院', value: '3' },\\n];\\n\\nconst rules = {\\n account: [\\n { required: true, message: '姓名必填' },\\n { min: 2, message: '至少需要两个字符，一个中文等于两个字符' },\\n { max: 10, message: '姓名字符长度超出' },\\n ],\\n description: [\\n { validator: (val) => val.length >= 5, message: '至少 5 个字，中文长度等于英文长度' },\\n { validator: (val) => val.length < 20, message: '不能超过 20 个字，中文长度等于英文长度' },\\n ],\\n password: [\\n { required: true, message: '密码必填' },\\n { len: 8, message: '请输入 8 位密码' },\\n { pattern: /[A-Z]+/, message: '密码必须包含大写字母' },\\n ],\\n email: [\\n { required: true, message: '邮箱必填' },\\n { email: { ignore_max_length: true }, message: '请输入正确的邮箱地址' },\\n ],\\n gender: [{ required: true, message: '性别必填' }],\\n course: [\\n { required: true, message: '课程必填' },\\n { validator: (val) => val.length <= 2, message: '最多选择 2 门课程'","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"},\\n ],\\n 'content.url': [\\n { required: true, message: '个人网站必填' },\\n {\\n url: {\\n protocols: ['http', 'https', 'ftp'],\\n require_protocol: true,\\n },\\n message: '请输入正确的个人主页',\\n },\\n ],\\n};\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n console.log('formData', formData.value);\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Errors: ', validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n\\nconst handleClear = () => {\\n form.value.clearValidate();\\n};\\nconst clearFieldsValidateResult = () => {\\n form.value.clearValidate(['email', 'course', 'content.url']);\\n MessagePlugin.success('已清除邮箱、课程、个人网站等字段校验结果');\\n};\\n</script>\\n<style scoped>\\n.demo-select-base {\\n width: 300px;\\n}\\n</style>\\n\"},\"可统一配置校验信息的表单\":{\"description\":[\"FormRule 中的每个规则都要默认校验信息，支持通过 Form.errorMessage 覆盖默认校验信息，也支持全局配置（ConfigProvider）各个规则的校验信息。\"],\"code\":\"<template>\\n <t-space direction=\\\"vertical\\\" size=\\\"large\\\">\\n <!-- 可以使用全局 ConfigProvider errorMessage","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"配置规则校验结果描述，而无需给每一个表单都配置校验信息 -->\\n <t-radio-group v-model=\\\"errorConfig\\\" variant=\\\"default-filled\\\">\\n <t-radio-button value=\\\"default\\\">\\n <t-popup content=\\\"Form.errorMessage 为空，使用组件内置校验信息。重置后，点击提交观察校验结果信息\\\">\\n 使用表单默认校验信息\\n </t-popup>\\n </t-radio-button>\\n\\n <t-radio-button value=\\\"config\\\">\\n <t-popup content=\\\"统一配置 Form.errorMessage，使用自定义配置的校验信息。重置后，点击提交观察校验结果信息\\\">\\n 表单统一配置校验信息\\n </t-popup>\\n </t-radio-button>\\n </t-radio-group>\\n\\n <!-- error-message 非必需 -->\\n <t-form\\n ref=\\\"form\\\"\\n :data=\\\"formData\\\"\\n :rules=\\\"rules\\\"\\n :error-message=\\\"errorConfig === 'default' ? undefined : errorMessage\\\"\\n scroll-to-first-error=\\\"smooth\\\"\\n @reset=\\\"onReset\\\"\\n @submit=\\\"onSubmit\\\"\\n >\\n <!-- !!!注意：当 FormItem 的 label 属性为 Function 时，errorMessage 模板中的 ${name} 会被替换为 FormItem.name 属性值 -->\\n <t-form-item :label=\\\"renderLabel\\\" help=\\\"这是用户名字段帮助说明\\\" name=\\\"account\\\">\\n <t-input v-model=\\\"formData.account\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"个人简介\\\" help=\\\"一句话介绍自己\\\" name=\\\"description\\\">\\n <t-input v-model=\\\"formData.description\\\"></t-input>\\n","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"</t-form-item>\\n\\n <t-form-item label=\\\"密码\\\" name=\\\"password\\\">\\n <t-input v-model=\\\"formData.password\\\" type=\\\"password\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"邮箱\\\" name=\\\"email\\\">\\n <t-input v-model=\\\"formData.email\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"性别\\\" name=\\\"gender\\\">\\n <t-radio-group v-model=\\\"formData.gender\\\">\\n <t-radio value=\\\"male\\\">男</t-radio>\\n <t-radio value=\\\"femal\\\">女</t-radio>\\n </t-radio-group>\\n </t-form-item>\\n\\n <t-form-item label=\\\"课程\\\" name=\\\"course\\\">\\n <t-checkbox-group v-model=\\\"formData.course\\\" :options=\\\"courseOptions\\\"></t-checkbox-group>\\n </t-form-item>\\n\\n <t-form-item label=\\\"学院\\\" name=\\\"college\\\">\\n <t-select v-model=\\\"formData.college\\\" class=\\\"demo-select-base\\\" clearable>\\n <t-option v-for=\\\"(item, index) in options\\\" :key=\\\"index\\\" :value=\\\"item.value\\\" :label=\\\"item.label\\\">\\n {{ item.label }}\\n </t-option>\\n </t-select>\\n </t-form-item>\\n\\n <t-form-item\\n label=\\\"入学时间\\\"\\n name=\\\"date\\\"\\n :rules=\\\"[{ date: { delimiters: ['/', '-', '.'] }, message: '日期格式有误' }]\\\"\\n >\\n <t-input","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"v-model=\\\"formData.date\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"个人网站\\\" name=\\\"content.url\\\">\\n <t-input v-model=\\\"formData.content.url\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item>\\n <t-space size=\\\"small\\\">\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\">提交</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\">重置</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" @click=\\\"handleClear\\\">清空校验结果</t-button>\\n </t-space>\\n </t-form-item>\\n </t-form>\\n </t-space>\\n</template>\\n<script setup>\\nimport { ref, reactive } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst formData = reactive({\\n account: '',\\n password: '',\\n description: '',\\n email: '',\\n gender: '',\\n college: '',\\n date: '',\\n content: {\\n url: '',\\n },\\n course: [],\\n});\\nconst form = ref(null);\\nconst errorConfig = ref('default');\\n\\nconst courseOptions = [\\n { label: '语文', value: '1' },\\n { label: '数学', value: '2' },\\n { label: '英语', value: '3' },\\n];\\n\\nconst options = [\\n { label: '计算机学院', value: '1' },\\n { label: '软件学院', value: '2' },\\n { label: '物联网学院', value:","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"'3' },\\n];\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Errors: ', validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n\\nconst renderLabel = () => '用户名';\\n\\n/* eslint-disable no-template-curly-in-string */\\nconst errorMessage = {\\n date: '${name}不正确',\\n url: '${name}不正确',\\n required: '请输入${name}',\\n max: '${name}字符长度不能超过 ${validate} 个字符，一个中文等于两个字符',\\n min: '${name}字符长度不能少于 ${validate} 个字符，一个中文等于两个字符',\\n len: '${name}字符长度必须是 ${validate}',\\n pattern: '${name}不正确',\\n validator: '${name}有误',\\n};\\n\\nconst rules = {\\n account: [\\n { required: true },\\n // { enum: ['sheep', 'name'] },\\n { min: 2 },\\n { max: 10, type: 'warning' },\\n ],\\n description: [\\n { validator: (val) => val.length >= 5 },\\n { validator: (val) => val.length < 10, message: '不能超过 20 个字，中文长度等于英文长度' },\\n ],\\n password: [\\n { required: true },\\n { len: 8, message: '请输入 8 位密码' },\\n { pattern: /[A-Z]+/, message: '密码必须包含大写字母' },\\n ],\\n email: [{ required: true }, { email: {","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"ignore_max_length: true } }],\\n gender: [{ required: true }],\\n course: [{ required: true }, { validator: (val) => val.length <= 2, message: '最多选择 2 门课程', type: 'warning' }],\\n 'content.url': [\\n { required: true },\\n {\\n url: {\\n protocols: ['http', 'https', 'ftp'],\\n require_protocol: true,\\n },\\n },\\n ],\\n};\\nconst handleClear = () => {\\n form.value.clearValidate();\\n};\\n</script>\\n\\n<style scoped>\\n.demo-select-base {\\n width: 300px;\\n}\\n</style>\\n\"},\"可进行复杂数据校验的表单\":{\"description\":[\"很多时候，表单数据的类型往往不仅仅是单纯的对象，还包含着数组、对象数组嵌套等。表单支持这些复杂数据类型的校验。\"],\"code\":\"<template>\\n <t-form\\n ref=\\\"form\\\"\\n :data=\\\"formData\\\"\\n :rules=\\\"rules\\\"\\n reset-type=\\\"initial\\\"\\n style=\\\"max-width: 100%\\\"\\n @reset=\\\"onReset\\\"\\n @submit=\\\"onSubmit\\\"\\n >\\n <t-form-item label=\\\"学校\\\" name=\\\"school\\\">\\n <t-radio-group v-model=\\\"formData.school\\\" :options=\\\"SCHOOL_OPTIONS\\\" />\\n </t-form-item>\\n\\n <t-tabs\\n v-model=\\\"studentTab\\\"\\n theme=\\\"card\\\"\\n addable\\n style=\\\"margin-left: 30px; border: 1px solid var(--td-component-stroke)\\\"\\n @add=\\\"onAddStudent\\\"\\n >\\n <t-tab-panel\\n v-for=\\\"(student, index) in","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"formData.students\\\"\\n :key=\\\"student.id\\\"\\n :value=\\\"student.id\\\"\\n :label=\\\"student.label\\\"\\n :destroy-on-hide=\\\"false\\\"\\n >\\n <div style=\\\"padding: 24px 24px 24px 0\\\">\\n <!-- 重点阅读：数组里面，注意 name 定义，用于区分不同的字段 -->\\n <!-- 重点阅读：name 表示当前字段在 formData 中的路径，ruleName 表示当前字段在 rules 中的名称 -->\\n <t-form-item label=\\\"姓名\\\" :name=\\\"`students[${index}].name`\\\" :label-width=\\\"80\\\">\\n <t-input v-model=\\\"formData.students[index].name\\\" placeholder=\\\"请输入内容\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"选科\\\" :name=\\\"`students[${index}].courseType`\\\" :label-width=\\\"80\\\">\\n <t-radio-group v-model=\\\"formData.students[index].courseType\\\">\\n <t-radio value=\\\"wenke\\\">文科</t-radio>\\n <t-radio value=\\\"like\\\">理科</t-radio>\\n </t-radio-group>\\n </t-form-item>\\n\\n <t-form-item label=\\\"课程\\\" :name=\\\"`students[${index}].course`\\\" :label-width=\\\"80\\\">\\n <t-checkbox-group v-model=\\\"formData.students[index].course\\\" :options=\\\"courseOptions\\\"></t-checkbox-group>\\n </t-form-item>\\n\\n <t-form-item :label-width=\\\"80\\\">\\n <t-space size=\\\"small\\\">\\n <t-button theme=\\\"primary\\\"","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"type=\\\"submit\\\">提交</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\">重置</t-button>\\n </t-space>\\n </t-form-item>\\n </div>\\n </t-tab-panel>\\n </t-tabs>\\n </t-form>\\n</template>\\n<script setup>\\nimport { ref, computed, watch, reactive } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nlet id = 0;\\nconst getId = () => {\\n return ++id;\\n};\\n\\nconst studentTab = ref(1);\\nconst formData = reactive({\\n school: 1,\\n students: [\\n {\\n id: getId(),\\n label: '学生1',\\n name: 'StudentA',\\n courseType: 'wenke',\\n course: ['1'],\\n },\\n {\\n id: getId(),\\n label: '学生2',\\n name: 'StudentB',\\n courseType: 'wenke',\\n course: [],\\n },\\n ],\\n});\\n\\nconst COURSE_OPTIONS = [\\n { label: '全部', checkAll: true },\\n { label: '语文', value: '1', courseTypes: ['wenke', 'like'] },\\n { label: '数学', value: '2', courseTypes: ['wenke', 'like'] },\\n { label: '物理', value: '3', courseTypes: ['like'] },\\n { label: '化学', value: '4', courseTypes: ['like'] },\\n { label: '地理', value: '5', courseTypes: ['wenke'] },\\n { label: '历史', value: '6', courseTypes: ['wenke'] },\\n];\\n\\nconst SCHOOL_OPTIONS = [\\n { label: '学校一', value:","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"1 },\\n { label: '学校二', value: 2 },\\n { label: '学校三', value: 3 },\\n];\\n\\nconst rules = {\\n school: [{ required: true, message: '学校必填' }],\\n name: [{ required: true, message: '用户名必填' }],\\n courseType: [{ required: true, message: '选科必填' }],\\n course: [{ required: true, message: '课程必填' }],\\n};\\n\\nconst courseOptions = computed(() =>\\n COURSE_OPTIONS.filter((item) => {\\n if (!formData.courseType || !item.courseTypes) return true;\\n return item.courseTypes.includes(formData.courseType);\\n }),\\n);\\n\\nwatch(\\n () => formData.courseType,\\n () => {\\n formData.course = [];\\n },\\n);\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Errors: ', validateResult);\\n MessagePlugin.warning(firstError);\\n // 判断错误在第几个 Tab，而后自动切换到第几个\\n for (let i = 0, len = formData.students.length; i < len; i++) {\\n const item = formData.students[i];\\n const keys = Object.keys(item).map((key) => `students[${i}].${key}`);\\n // 数组数据 key 在 validateResult 中存在，则表示校验不通过\\n const isInvalid =","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"keys.find((key) => validateResult[key]);\\n if (isInvalid) {\\n studentTab.value = item.id;\\n return;\\n }\\n }\\n }\\n};\\n\\nconst onAddStudent = () => {\\n const id = getId();\\n formData.students.push({\\n id,\\n label: `学生${id}`,\\n name: '',\\n courseType: 'wenke',\\n course: [],\\n status: false,\\n });\\n studentTab.value = id;\\n};\\n</script>\\n\"},\"禁用态的表单\":{\"description\":[\"可以使用 disabled 属性禁用整个表单项。对于自定义组件，可以使用 formControlledComponents 设置为允许 Form 代理禁用状态。\"],\"code\":\"<template>\\n <t-space direction=\\\"vertical\\\" size=\\\"large\\\">\\n <div style=\\\"margin-left: 36px\\\">\\n <t-checkbox v-model=\\\"formDisabled\\\" variant=\\\"default-filled\\\"> 是否禁用表单 </t-checkbox>\\n </div>\\n\\n <t-form\\n ref=\\\"form\\\"\\n :data=\\\"formData\\\"\\n reset-type=\\\"initial\\\"\\n :disabled=\\\"formDisabled\\\"\\n colon\\n @reset=\\\"onReset\\\"\\n @submit=\\\"onSubmit\\\"\\n >\\n <t-form-item label=\\\"姓名\\\" name=\\\"name\\\">\\n <t-input v-model=\\\"formData.name\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"学院\\\" name=\\\"college\\\">\\n <t-select v-model=\\\"formData.college\\\" :options=\\\"COLLEGE_OPTIONS\\\" clearable></t-select>\\n </t-form-item>\\n\\n","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"<t-form-item label=\\\"寄件地址\\\" name=\\\"address1\\\">\\n <t-tree-select v-model=\\\"formData.address1\\\" :data=\\\"ADDRESS_OPTIONS\\\" clearable />\\n </t-form-item>\\n\\n <t-form-item label=\\\"收件地址\\\" name=\\\"address2\\\">\\n <t-cascader v-model=\\\"formData.address2\\\" :options=\\\"ADDRESS_OPTIONS\\\" clearable />\\n </t-form-item>\\n\\n <t-form-item label=\\\"日期\\\" name=\\\"date\\\">\\n <t-date-picker v-model=\\\"formData.date\\\" mode=\\\"date\\\" clearable />\\n </t-form-item>\\n\\n <t-form-item label=\\\"个人简介\\\" name=\\\"personalProfile\\\">\\n <t-textarea v-model=\\\"formData.personalProfile\\\" placeholder=\\\"简单描述自己的经历\\\" clearable />\\n </t-form-item>\\n\\n <t-form-item label=\\\"短信\\\" name=\\\"message\\\">\\n <t-switch v-model=\\\"formData.message\\\" :label=\\\"['接受', '不接']\\\"></t-switch>\\n </t-form-item>\\n\\n <t-form-item label=\\\"性别\\\" name=\\\"gender\\\">\\n <t-radio-group v-model=\\\"formData.gender\\\">\\n <t-radio value=\\\"1\\\">男</t-radio>\\n <t-radio value=\\\"2\\\">女</t-radio>\\n </t-radio-group>\\n </t-form-item>\\n\\n <t-form-item label=\\\"课程\\\" name=\\\"course\\\">\\n <t-checkbox-group v-model=\\\"formData.course\\\"","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":":options=\\\"courseOptions\\\" />\\n </t-form-item>\\n\\n <t-form-item label=\\\"绩点\\\" name=\\\"gradePoint\\\">\\n <t-input-number v-model=\\\"formData.gradePoint\\\" theme=\\\"normal\\\" placeholder=\\\"数字\\\" />\\n </t-form-item>\\n\\n <t-form-item label=\\\"头像\\\" name=\\\"avatar\\\">\\n <t-upload\\n v-model=\\\"formData.avatar\\\"\\n action=\\\"https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo\\\"\\n theme=\\\"image\\\"\\n tips=\\\"请选择单张图片文件上传\\\"\\n accept=\\\"image/*\\\"\\n ></t-upload>\\n </t-form-item>\\n\\n <t-form-item>\\n <t-space size=\\\"small\\\">\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\">提交</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\">重置</t-button>\\n </t-space>\\n </t-form-item>\\n </t-form>\\n </t-space>\\n</template>\\n<script setup>\\nimport { ref, reactive } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst formDisabled = ref(true);\\nconst formData = reactive({\\n name: '',\\n message: true,\\n gender: '',\\n course: [],\\n college: '',\\n personalProfile: '',\\n address1: undefined,\\n address2: undefined,\\n gradePoint: undefined,\\n date: '',\\n","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"avatar: [{ url: 'https://tdesign.gtimg.com/site/avatar.jpg' }],\\n});\\n\\nconst courseOptions = [\\n { label: '语文', value: '1' },\\n { label: '数学', value: '2' },\\n { label: '英语', value: '3' },\\n];\\n\\nconst COLLEGE_OPTIONS = [\\n { label: '学院 A', value: 1 },\\n { label: '学院 B', value: 2 },\\n { label: '学院 C', value: 3 },\\n];\\n\\nconst ADDRESS_OPTIONS = [\\n { label: '江苏', value: 1, children: [{ label: '南京市', value: 300 }] },\\n { label: '上海', value: 2, children: [{ label: '徐汇区', value: 400 }] },\\n { label: '四川', value: 3, children: [{ label: '成都市', value: 500 }] },\\n];\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Errors: ', validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n</script>\\n\"},\"可设置校验信息的表单\":{\"description\":[\"使用 validateMessage 属性可以自定义表单校验信息提示，主要用于非组件内部的校验信息呈现，如：表单初次呈现的远程校验结果。如果要启动组件内部的校验功能，该值必须设置为空。\"],\"code\":\"<template>\\n <!-- error-message 非必需 -->\\n <t-form ref=\\\"form\\\" :data=\\\"formData\\\" :rules=\\\"rules\\\"","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"scroll-to-first-error=\\\"smooth\\\" @reset=\\\"onReset\\\" @submit=\\\"onSubmit\\\">\\n <t-form-item label=\\\"用户名\\\" help=\\\"这是用户名字段帮助说明\\\" name=\\\"account\\\">\\n <t-input v-model=\\\"formData.account\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"个人简介\\\" help=\\\"一句话介绍自己\\\" name=\\\"description\\\">\\n <t-input v-model=\\\"formData.description\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item label=\\\"密码\\\" name=\\\"password\\\">\\n <t-input v-model=\\\"formData.password\\\" type=\\\"password\\\"></t-input>\\n </t-form-item>\\n\\n <t-form-item>\\n <t-space size=\\\"small\\\">\\n <t-button theme=\\\"primary\\\" type=\\\"submit\\\">提交</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" type=\\\"reset\\\">重置</t-button>\\n <t-button theme=\\\"default\\\" variant=\\\"base\\\" @click=\\\"handleValidateMessage\\\">设置校验信息提示</t-button>\\n </t-space>\\n </t-form-item>\\n </t-form>\\n</template>\\n<script setup>\\nimport { ref, onMounted, reactive } from 'vue';\\nimport { MessagePlugin } from 'tdesign-vue-next';\\n\\nconst formData = reactive({\\n account: '',\\n description: '',\\n password: '',\\n});\\nconst form = ref(null);\\n\\nconst","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}},{"pageContent":"validateMessage = {\\n account: [\\n {\\n type: 'error',\\n message: '自定义用户名校验信息提示',\\n },\\n ],\\n description: [\\n {\\n type: 'warning',\\n message: '自定义个人简介校验信息提示',\\n },\\n ],\\n};\\n\\nconst rules = {\\n account: [{ required: true }, { min: 2 }, { max: 10, type: 'warning' }],\\n description: [{ validator: (val) => val.length < 10, message: '不能超过 20 个字，中文长度等于英文长度' }],\\n password: [{ required: true }, { len: 8, message: '请输入 8 位密码' }],\\n};\\n\\nconst onReset = () => {\\n MessagePlugin.success('重置成功');\\n};\\n\\nconst onSubmit = ({ validateResult, firstError }) => {\\n if (validateResult === true) {\\n MessagePlugin.success('提交成功');\\n } else {\\n console.log('Errors: ', validateResult);\\n MessagePlugin.warning(firstError);\\n }\\n};\\n\\nconst handleValidateMessage = () => {\\n MessagePlugin.success('设置表单校验信息提示成功');\\n form.value.setValidateMessage(validateMessage);\\n};\\n\\nonMounted(() => {\\n form.value.setValidateMessage(validateMessage);\\n});\\n</script>\\n\"},\"何时使用 \":{\"description\":[\"需要收集信息时；\",\"需求对输入的信息进行校验时。\"]}})","metadata":{"source":".//files/fdc91df7-a7f6-4a84-b320-32f72413bc9b.plain","loc":{"lines":{"from":1,"to":1}}}}]