隐藏选择组件中的箭头 shadcn-vue

Question

嗨朋友们，我如何隐藏 Vue-Shadcn 中选择组件中的箭头

<div class="relative w-full items-center border rounded-md  ">
        <div class="ps-10">
          <Select v-model="userInformation.user.gender">
            <SelectTrigger class="border-none focus:ring-0 focus:ring-offset-0  " >
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem v-for="item in gender" :key="item.id" :value="item.value">
                  {{ item.name }}
                </SelectItem>
              </SelectGroup>
            </SelectContent>
          </Select>
        </div>
        <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
          <Icon size="24" class="text-muted-foreground" name="material-symbols:male-rounded" />
        </span>
      </div>

我尝试 isArrow='false' 是 SelectTriger 但它不起作用

Answer 1

您可以做到这一点的最佳 2 种方法：

• 修改您的

  SelectTrigger

您可以删除该 svg 或有条件地渲染它

路径：

ui > select > SelectTrigger.vue

• 使用一级顺风级

<div class="relative w-full items-center rounded-md border">
  <div class="ps-10">
    <select v-model="userInformation.user.gender">
      <SelectTrigger class="border-none focus:ring-0 focus:ring-offset-0 [&_svg]:hidden">
        <SelectValue />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectItem v-for="item in gender" :key="item.id" :value="item.value"> {{ item.name }} </SelectItem>
        </SelectGroup>
      </SelectContent>
    </select>
  </div>
  <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2">
    <Icon size="24" class="text-muted-foreground" name="material-symbols:male-rounded" />
  </span>
</div>

变化：

• 将

  [&_svg]:hidden

  添加到

  SelectTrigger

  的班级列表中，了解更多这里