Label 标签

说明

用于键值对数据的展示

用法示例

基础用法

用户名

admin

密码:

123456

<template>
  <el-space direction="vertical">
    <y-label label="用户名">admin</y-label>
    <y-label label="密码" colon=":">123456 </y-label>
  </el-space>
</template>

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


const input1 = ref('')
</script>

隐藏源码

组件尺寸

label组件内部使用flex布局方式

用户名:

Yingdu Building, Zhichun Road, BeijingYingdu Building, Zhichun Road, BeijingYingdu Building, Zhichun Road, BeijingYingdu Building, Zhichun Road

<template>
  <y-label label="用户名" colon=":" height="100px" :label-style="labelStyle" :content-style="contentStyle">
    Yingdu Building, Zhichun Road, BeijingYingdu Building, Zhichun Road, BeijingYingdu Building, Zhichun Road,
    BeijingYingdu Building, Zhichun Road
  </y-label>
</template>

<script setup>
const labelStyle = {
  color: 'red',
  backgroundColor: '#eee',
  justifyContent: 'flex-start',
  alignItems: 'flex-start'
}

const contentStyle = {
  color: 'blue',
  backgroundColor: '#eee',
  justifyContent: 'flex-end',
  alignItems: 'flex-end'
}
</script>

隐藏源码

插槽

提供了前后置插槽

用户名

admin

<template>
  <y-label label="用户名">
    <template #prefix>
      <el-tooltip class="box-item" effect="dark" content="前置插槽" placement="top">
        <el-icon>
          <WarningFilled />
        </el-icon>
      </el-tooltip>
    </template>
    admin
    <template #suffix>
      <el-tooltip class="box-item" effect="dark" content="后置插槽" placement="right">
        <el-icon>
          <WarningFilled />
        </el-icon>
      </el-tooltip>
    </template>
  </y-label>
</template>

<script setup>
import {WarningFilled} from "@element-plus/icons-vue"
</script>

隐藏源码

API

Attributes

属性名	说明	类型	默认值
label	标签文本	string	—
label-width	标签宽度	string / number	'auto'
align	标签文本对齐方式	enum	'left'
height	组件高度	string / number	'32px'
border	是否显示边框	boolean	false
colon	标签后分隔符，border为false时有效	string	''
label-style	标签自定义样式	object	—
content-style	内容区域自定义样式	object	—

Slots

名称	说明	参数
default	默认插槽，用于放置内容	—
prefix	前置插槽，用于放置图标等前置内容	—
suffix	后置插槽，用于放置图标等后置内容	—
label	标签文本插槽，用于自定义标签内容	—