Segment 片段容器

片段容器，为指定内容提供标签设置。

基本用法

姓名

点击查看代码

<template>
  <s-segment label="姓名" showColon>
    <el-input v-model="inputValue" placeholder="请输入" />
  </s-segment>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const inputValue = ref<string>("");
</script>

组件尺寸

标签位置:

小号 默认大号

姓名

点击查看代码

<template>
  <s-form showColon>
    <s-form-item label="标签位置">
      <el-radio-group v-model="segmentSize">
        <el-radio v-for="item in sizeOptions" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </s-form-item>
  </s-form>

  <s-segment label="姓名" :size="segmentSize" showColon>
    <el-input v-model="inputValue" :size="segmentSize" placeholder="请输入" />
  </s-segment>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

  const inputValue = ref<string>("");

  const segmentSize = ref<string>("default");

  const sizeOptions = reactive<Record<string, any>>([
    { value: "small", label: "小号" },
    { value: "default", label: " 默认" },
    { value: "large", label: "大号" }
  ]);
</script>

标签位置

标签位置:

左侧上侧右侧

姓名

点击查看代码

<template>
  <s-form showColon>
    <s-form-item label="标签位置">
      <el-radio-group v-model="segmentLabelPosition">
        <el-radio v-for="item in labelPositionOptions" :key="item.value" :value="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </s-form-item>
  </s-form>

  <s-segment label="姓名" :label-position="segmentLabelPosition" required showColon>
    <el-input v-model="inputValue" placeholder="请输入" />
  </s-segment>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

  const inputValue = ref<string>("");

  const segmentLabelPosition = ref<string>("left");

  const labelPositionOptions = reactive<Record<string, any>>([
    { value: "left", label: "左侧" },
    { value: "top", label: "上侧" },
    { value: "right", label: "右侧" }
  ]);
</script>

标签加粗

姓名

点击查看代码

<template>
  <s-segment label="姓名" labelBold showColon>
    <el-input v-model="inputValue" placeholder="请输入" />
  </s-segment>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const inputValue = ref<string>("");
</script>

行内元素

姓名

点击查看代码

<template>
  <s-segment label="姓名" inline showColon>
    <el-input v-model="inputValue" placeholder="请输入" />
  </s-segment>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const inputValue = ref<string>("");
</script>

必填星号

姓名

点击查看代码

<template>
  <s-segment label="姓名" required showColon>
    <el-input v-model="inputValue" placeholder="请输入" />
  </s-segment>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const inputValue = ref<string>("");
</script>

描述信息

姓名

描述信息

点击查看代码

<template>
  <s-segment label="姓名" description="描述信息" showColon>
    <el-input v-model="inputValue" placeholder="请输入" />
  </s-segment>
</template>

<script setup lang="ts">
import { ref } from "vue";

  const inputValue = ref<string>("");
</script>

错误信息

姓名

请输入姓名

描述信息

点击查看代码

<template>
  <s-segment label="姓名" :errorMessage="errorMessage" description="描述信息" showColon>
    <el-input v-model="inputValue" placeholder="请输入" />
  </s-segment>
</template>

<script setup lang="ts">
  import { computed, ref } from "vue";

  const inputValue = ref<string>("");

  const errorMessage = computed(() => !inputValue.value ? "请输入姓名" : undefined);
</script>

提示信息

提示信息

自定义提示

点击查看代码

<template>
  <s-segment label="提示信息" tooltip="提示信息" showColon>
    <el-input v-model="inputValue" placeholder="请输入" />
  </s-segment>

  <br />

  <s-segment label="自定义提示" tooltip="提示信息" :tooltipProps="{ effect: 'dark' }" showColon>
    <el-input v-model="inputValue" placeholder="请输入" />
  </s-segment>
</template>

<script setup lang="ts">
  import { ref } from "vue";

  const inputValue = ref<string>("");
</script>

Props

Slots