BIN-UI-DESIGN

Appearance

On this page

描述 Desc ​

按照一个区块来展示一些描述详情

基础用法 ​

日常显示列表的显示组件

用户信息
用户名韩梅梅手机号1769239****居住地徐州市
备注学校联系地址江苏省xx市吴中区吴中大道 1245 号
<template>
  <b-desc title="用户信息">
    <b-desc-item label="用户名">韩梅梅</b-desc-item>
    <b-desc-item label="手机号">1769239****</b-desc-item>
    <b-desc-item label="居住地">徐州市</b-desc-item>
    <b-desc-item label="备注">
      <b-tag type="primary" size="mini">学校</b-tag>
    </b-desc-item>
    <b-desc-item label="联系地址">江苏省xx市吴中区吴中大道 1245 号</b-desc-item>
  </b-desc>
</template>
<template>
  <b-desc title="用户信息">
    <b-desc-item label="用户名">韩梅梅</b-desc-item>
    <b-desc-item label="手机号">1769239****</b-desc-item>
    <b-desc-item label="居住地">徐州市</b-desc-item>
    <b-desc-item label="备注">
      <b-tag type="primary" size="mini">学校</b-tag>
    </b-desc-item>
    <b-desc-item label="联系地址">江苏省xx市吴中区吴中大道 1245 号</b-desc-item>
  </b-desc>
</template>

不同尺寸 ​

可以显示不同尺寸的信息

Size:
Label宽度:
带边框列表
用户名韩梅梅手机号1769239****居住地徐州市
备注学校联系地址江苏省xx市吴中区吴中大道 1245 号
无边框列表
用户名韩梅梅手机号1769239****居住地徐州市
备注学校联系地址江苏省xx市吴中区吴中大道 1245 号
<template>
  <div>
    <div flex="cross:center">
      <span style="margin: 0 5px">Size:</span>
      <b-radio-group v-model="size">
        <b-radio label="large">大号</b-radio>
        <b-radio label="default">默认</b-radio>
        <b-radio label="small">小型</b-radio>
        <b-radio label="mini">超小</b-radio>
      </b-radio-group>
      <span style="margin: 0 5px">Label宽度:</span>
      <b-input-number
        v-model="labelWidth"
        :min="10"
        :max="20"
        :step="2"
        :formatter="value => `${value}%`"
        :parser="value => value.replace('%', '')"
        style="width: 120px"
      ></b-input-number>
      <b-button @click="labelWidth = null">AUTO</b-button>
    </div>
    <b-divider />
    <b-desc title="带边框列表" :column="3" :size="size" border :label-width="labelWidth">
      <b-desc-item label="用户名">韩梅梅</b-desc-item>
      <b-desc-item label="手机号">1769239****</b-desc-item>
      <b-desc-item label="居住地">徐州市</b-desc-item>
      <b-desc-item label="备注">
        <b-tag type="primary" size="mini">学校</b-tag>
      </b-desc-item>
      <b-desc-item label="联系地址">江苏省xx市吴中区吴中大道 1245 号</b-desc-item>
    </b-desc>
    <b-divider />
    <b-desc title="无边框列表" :column="3" :size="size" :label-width="labelWidth">
      <b-desc-item label="用户名">韩梅梅</b-desc-item>
      <b-desc-item label="手机号">1769239****</b-desc-item>
      <b-desc-item label="居住地">徐州市</b-desc-item>
      <b-desc-item label="备注">
        <b-tag type="primary" size="mini">学校</b-tag>
      </b-desc-item>
      <b-desc-item label="联系地址">江苏省xx市吴中区吴中大道 1245 号</b-desc-item>
    </b-desc>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const size = ref('default')
const labelWidth = ref(null)
</script>
<template>
  <div>
    <div flex="cross:center">
      <span style="margin: 0 5px">Size:</span>
      <b-radio-group v-model="size">
        <b-radio label="large">大号</b-radio>
        <b-radio label="default">默认</b-radio>
        <b-radio label="small">小型</b-radio>
        <b-radio label="mini">超小</b-radio>
      </b-radio-group>
      <span style="margin: 0 5px">Label宽度:</span>
      <b-input-number
        v-model="labelWidth"
        :min="10"
        :max="20"
        :step="2"
        :formatter="value => `${value}%`"
        :parser="value => value.replace('%', '')"
        style="width: 120px"
      ></b-input-number>
      <b-button @click="labelWidth = null">AUTO</b-button>
    </div>
    <b-divider />
    <b-desc title="带边框列表" :column="3" :size="size" border :label-width="labelWidth">
      <b-desc-item label="用户名">韩梅梅</b-desc-item>
      <b-desc-item label="手机号">1769239****</b-desc-item>
      <b-desc-item label="居住地">徐州市</b-desc-item>
      <b-desc-item label="备注">
        <b-tag type="primary" size="mini">学校</b-tag>
      </b-desc-item>
      <b-desc-item label="联系地址">江苏省xx市吴中区吴中大道 1245 号</b-desc-item>
    </b-desc>
    <b-divider />
    <b-desc title="无边框列表" :column="3" :size="size" :label-width="labelWidth">
      <b-desc-item label="用户名">韩梅梅</b-desc-item>
      <b-desc-item label="手机号">1769239****</b-desc-item>
      <b-desc-item label="居住地">徐州市</b-desc-item>
      <b-desc-item label="备注">
        <b-tag type="primary" size="mini">学校</b-tag>
      </b-desc-item>
      <b-desc-item label="联系地址">江苏省xx市吴中区吴中大道 1245 号</b-desc-item>
    </b-desc>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const size = ref('default')
const labelWidth = ref(null)
</script>

Props ​

参数说明类型可选值默认值
border是否带有边框Boolean—false
column一行显示几个Number—3
label-widthlabel宽度(百分比)Number——
size尺寸Stringlarge ，default，small，minidefault
title标题文本String——
extra操作区文本，显示在右上方，可插槽插入String——

Slot ​

名称说明
title标题文本插槽
extra操作区域插槽

ItemProps ​

参数说明类型可选值默认值
label标签文本String——
span列的数量Number——

ItemSlot ​

名称说明
label文本插槽

MIT Licensed | Copyright © 2023-present bin-ui-design