VantUI表单设置为标签在上，内容在下的上下结构

最新推荐文章于 2024-07-15 12:14:46 发布

chujian0325

最新推荐文章于 2024-07-15 12:14:46 发布

阅读量3.7k

点赞数 3

分类专栏： VantUI 文章标签： web app

本文链接：https://blog.csdn.net/chujian0325/article/details/122068908

版权

VantUI 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

VantUI中默认表单为左右结构，即标签和控件在一行显示，在移动端，我们一般希望标签展示在控件上方，而又需要保证表单的正则校验，则可以设置如下：既能显示必填校验，又同时包含rules

<template>
  <div>
    <div class="title">
      <span v-if="required" style="color:red;">*</span>
      {{data.elementTitle}}
    </div>
    <van-field name="radio" :rules="rules" :error-message="rules.message">
      <template #input>
        <van-radio-group v-model="radio">
          <van-radio v-for="(item, index)in data.items" :key="index" :name="item.itemValue" checked-color="#c30795" style="margin-bottom:5px;">
            {{item.itemText}}
          </van-radio>
        </van-radio-group>
      </template>
    </van-field>
  </div>
</template>

预览效果如下：