opentiny / tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://opentiny.design/tiny-vue
MIT License
1.65k stars 264 forks source link

🐛 [Bug]: form组件使用复杂布局,设置不同的size时,date-picker的高度不一致 #2490

Open Lymanli opened 22 hours ago

Lymanli commented 22 hours ago

Version

3.19.0

Vue Version

3.4.27

Link to minimal reproduction

<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/>
    isDaterange值:{{isDaterange?'daterange':'date'}}
    <tiny-button @click="setDaterange">null/daterange</tiny-button>
    <hr/>
    <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-input></tiny-input>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="日期" prop="datepicker" validate-position="bottom-end">
            <tiny-date-picker v-model="createData.datepicker" :type="isDaterange?'daterange':'date'" start-placeholder="开始日期" range-separator="至" end-placeholder="结束日期"></tiny-date-picker>
          </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-col :span="4">
          <tiny-form-item label="邮件" prop="email">
            <tiny-input v-model="createData.email"></tiny-input>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <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 } from '@opentiny/vue'

const ruleFormRef = ref()
const createData = reactive({
  users: '',
  url: '',
  email: '',
  datepicker: '',
  textarea: ''
})

const formSize=ref('')
const setSize=v=>{
  formSize.value=v
}
const isDaterange=ref(false)
const setDaterange=()=>{
  isDaterange.value=!isDaterange.value
}
</script>

<style scoped>
.demo-form {
}
</style>

Step to reproduce

顶部有按钮small、medium、mini、null分别设置form的size值,null/daterange按钮设置日期标签中的date-picker组件的type值为daterange或date。

  1. 当date-picker的type值为date时,依次点击按钮small、medium、mini、null,可以观察到small、mini值的时候,form表单中组件输入框、日期标签的组件高度不同导致URL标签的组件前面空出一片区域; image image

  2. 点击null/daterange按钮切换date-picker的type值为daterange时,重复步骤1依次切换form的size值,输入框高度不一致导致URL标签前面空出一片区域; image image

What is expected

from在复杂布局下,form的size值在不同时,且date-picker的type值不同时,表单组件不会因个别组件高度不同而前面空出一片。

What is actually happening

from在复杂布局下,form的size值在small和mini,date-picker的type在date和daterange时,表单中input、date-picker高度与checkbox高度不一致,导致表单组件没有按顺序排列而是空出一片

What is your project name

form表单

Any additional comments (optional)

No response

Issues-translate-bot commented 22 hours ago

Bot detected the issue body's language is not English, translate it automatically.


Title: 🐛 [Bug]: The form component uses a complex layout. When different sizes are set, the heights between components are inconsistent.