Open Lymanli opened 1 day ago
3.19.0
3.4.27
<template> <div class="demo-form"> size值:{{formSize}} <tiny-button @click="setSize('small')">small</tiny-button> <tiny-button @click="setSize('medium')">medium</tiny-button> <tiny-button @click="setSize('mini')">mini</tiny-button> <tiny-button @click="setSize(null)">null</tiny-button> <hr/> <h2> demo1 </h2> <tiny-form ref="ruleFormRef" :model="createData" label-width="100px" :size="formSize" > <tiny-row> <tiny-col :span="4"> <tiny-form-item label="下拉多选" prop="users" validate-position="top-end"> <tiny-select v-model="createData.select" placeholder="请选择" multiple> <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"> </tiny-option> </tiny-select> </tiny-form-item> </tiny-col> <tiny-col :span="4"> <tiny-form-item label="下拉单选" prop="users" validate-position="top-end"> <tiny-select v-model="createData.selectMult" placeholder="请选择"> <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"> </tiny-option> </tiny-select> </tiny-form-item> </tiny-col> <tiny-col :span="4"> <tiny-form-item label="下拉单选" prop="users" validate-position="top-end"> <tiny-select v-model="createData.selectMult" placeholder="请选择"> <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"> </tiny-option> </tiny-select> </tiny-form-item> </tiny-col> <tiny-col :span="4"> <tiny-form-item label="必填" prop="users" validate-position="top-end"> <tiny-checkbox-group v-model="createData.checked"> <tiny-checkbox label="复选框1"></tiny-checkbox> <tiny-checkbox label="复选框2"></tiny-checkbox> </tiny-checkbox-group> </tiny-form-item> </tiny-col> <tiny-col :span="4"> <tiny-form-item label="URL" prop="url"> <tiny-checkbox-group v-model="createData.checked"> <tiny-checkbox label="复选框1"></tiny-checkbox> <tiny-checkbox label="复选框2"></tiny-checkbox> </tiny-checkbox-group> </tiny-form-item> </tiny-col> </tiny-row> <hr/> <h2> demo2 </h2> <tiny-row> <tiny-col :span="4"> <tiny-form-item label="下拉多选" prop="users" validate-position="top-end"> <tiny-select v-model="createData.select" placeholder="请选择" multiple> <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"> </tiny-option> </tiny-select> </tiny-form-item> </tiny-col> <tiny-col :span="4"> <tiny-form-item label="下拉单选" prop="users" validate-position="top-end"> <tiny-select v-model="createData.selectMult" placeholder="请选择"> <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value"> </tiny-option> </tiny-select> </tiny-form-item> </tiny-col> <tiny-col :span="4"> <tiny-form-item label="必填" prop="users" validate-position="top-end"> <tiny-checkbox-group v-model="createData.checked"> <tiny-checkbox label="复选框1"></tiny-checkbox> <tiny-checkbox label="复选框2"></tiny-checkbox> </tiny-checkbox-group> </tiny-form-item> </tiny-col> <tiny-col :span="4"> <tiny-form-item label="URL" prop="url"> <tiny-checkbox-group v-model="createData.checked"> <tiny-checkbox label="复选框1"></tiny-checkbox> <tiny-checkbox label="复选框2"></tiny-checkbox> </tiny-checkbox-group> </tiny-form-item> </tiny-col> </tiny-row> <hr/> <tiny-row> <tiny-col :span="12"> <tiny-form-item label="整行文本"> <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input> </tiny-form-item> </tiny-col> </tiny-row> <tiny-row> <tiny-col :span="12"> <tiny-form-item> <tiny-button type="primary"> 提交 </tiny-button> </tiny-form-item> </tiny-col> </tiny-row> </tiny-form> </div> </template> <script setup> import { ref, reactive } from 'vue' import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, DatePicker as TinyDatePicker, Button as TinyButton, Row as TinyRow, Col as TinyCol, Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup, Select as TinySelect, Option as TinyOption } from '@opentiny/vue' const ruleFormRef = ref() const createData = reactive({ users: '', url: '', email: '', datepicker: '', textarea: '' }) const selectOptions = ref([ { value: '选项1', label: '黄金糕' }, { value: '选项2', label: '双皮奶' }, { value: '选项3', label: '蚵仔煎' } ]) const formSize=ref('') const setSize=v=>{ formSize.value=v } </script> <style scoped> .demo-form { } </style>
默认下,demo1、demo2的下拉框高度一致,在复杂布局下按顺序排列。
依次点击按钮small、medium、mini、null修改form的size值,form在small和mini下:
demo1中,下拉多选框高度比下拉单选框要高,必选复选框卡在第一个下拉单选框下面;
demo2中,下拉单选框比复选框要高,URL复选框卡在必选复选框下面;
form的size值在small和mini下,表单组件的高度保持一致,组件按顺序排列左边不留空白。
form的size值在small和mini下,组件高度:下拉多选框>下拉单选框>复选框。
form表单
No response
Bot detected the issue body's language is not English, translate it automatically. Title: 🐛 [Bug]: The form component uses a complex layout. When setting different sizes, the height of the select is inconsistent.
Bot detected the issue body's language is not English, translate it automatically.
Title: 🐛 [Bug]: The form component uses a complex layout. When setting different sizes, the height of the select is inconsistent.
Version
3.19.0
Vue Version
3.4.27
Link to minimal reproduction
Step to reproduce
默认下,demo1、demo2的下拉框高度一致,在复杂布局下按顺序排列。
依次点击按钮small、medium、mini、null修改form的size值,form在small和mini下:
demo1中,下拉多选框高度比下拉单选框要高,必选复选框卡在第一个下拉单选框下面;
demo2中,下拉单选框比复选框要高,URL复选框卡在必选复选框下面;
What is expected
form的size值在small和mini下,表单组件的高度保持一致,组件按顺序排列左边不留空白。
What is actually happening
form的size值在small和mini下,组件高度:下拉多选框>下拉单选框>复选框。
What is your project name
form表单
Any additional comments (optional)
No response