标签

当需要搜索条件时，没有使用 form 的情况下需要统一文字占位

基础用法

设置 label

用户名

<template>
  <ui-label :label="label">
    <el-input class="width-sm" v-model="username" placeholder="请输入用户名" />
  </ui-label>
</template>

<script setup>
  import { ref } from 'vue';

  const label = '用户名';
  const username = ref('');
</script>

隐藏源代码

必填符号*

设置 required

用户名

<template>
  <ui-label :label="label" required>
    <el-input class="width-sm" v-model="username" placeholder="请输入用户名" />
  </ui-label>
</template>

<script setup>
  import { ref } from 'vue';

  const label = '用户名';
  const username = ref('');
</script>

隐藏源代码

自定义宽度

设置 width

用户名

<template>
  <ui-label :label="label" :width="200">
    <el-input class="width-sm" v-model="username" placeholder="请输入用户名" />
  </ui-label>
</template>

<script setup>
  import { ref } from 'vue';

  const label = '用户名';
  const username = ref('');
</script>

隐藏源代码

对齐方式

设置 align

用户名

<template>
  <ui-label :label="label" :width="200" align="right">
    <el-input class="width-sm" v-model="username" placeholder="请输入用户名" />
  </ui-label>
</template>

<script setup>
  import { ref } from 'vue';

  const label = '用户名';
  const username = ref('');
</script>

隐藏源代码

属性

属性名	说明	类型	可选值	默认值
label	标签描述	string	——	——
required	必填标记	boolean	——	false
width	标签宽度	number	——	——
align	标签对齐	number	——	——