在Vue/Nuxt.js中按需隐藏可复用输入组件的标签（不占空间）

要实现标签可隐藏且不占用空间的需求，你可以通过以下两步修改组件：

1. 添加控制显示的Props #

在组件的props中新增一个showLabel属性，用来控制标签的显示/隐藏状态：

export default {
  props: {
    // 原有props保持不变
    label: {
      type: String,
      required: false,
      default: ''
    },
    options: {
      type: Array,
      required: true,
    },
    default: {
      type: String,
      required: false,
      default: null,
    },
    tabindex: {
      type: Number,
      required: false,
      default: 0,
    },
    // 新增控制标签显示的props
    showLabel: {
      type: Boolean,
      required: false,
      default: true // 默认显示标签
    }
  },

  data() {
    return {
      selected: this.default
        ? this.default
        : this.options.length > 0
        ? this.options[0]
        : null,
      open: false,
    };
  },

  mounted() {
    this.$emit("input", this.selected);
  },
}

2. 动态控制标签的显示 #

在模板中给<label>元素添加v-show指令（v-show会通过CSS的display: none隐藏元素，完全符合不占用空间的需求），同时移除无效的:label="label"属性：

<template>
  <div>
    <!-- 使用v-show控制标签显示/隐藏 -->
    <label 
      for="" 
      class="mb-1 select-label"
      v-show="showLabel"
    >{{label}}</label>
    <div class="custom-select" :tabindex="tabindex" @blur="open = false">
      <div class="selected" :class="{ open: open }" @click="open = !open">
        {{ selected }}
      </div>
      <div class="items" :class="{ selectHide: !open }">
        <div
          v-for="(option, i) of options"
          :key="i"
          @click="
            selected = option;
            open = false;
            $emit('input', option);
          "
          class="border-bottom px-3"
        >
          {{ option }}
        </div>
      </div>
    </div>
  </div>
</template>

使用方式 #

• 默认场景（显示标签）：直接使用组件即可

  <CustomSelect label="选择类别" :options="['选项A', '选项B']" />
  

• 需要隐藏标签的场景：传入:show-label="false"

  <CustomSelect :show-label="false" :options="['选项A', '选项B']" />
  

补充方案（可选） #

如果你的项目使用了Bootstrap这类CSS框架，也可以用动态绑定class替代v-show，效果一致：

<label 
  for="" 
  class="mb-1 select-label"
  :class="{ 'd-none': !showLabel }"
>{{label}}</label>

内容的提问来源于stack exchange，提问作者user19610519