如何顺风聚焦 div 标签？

Question

我正在使用 Tailwind 和 Vue 来制作一些可重用的切换组件。组件的边框是灰色的，但计划是当我单击组件时，边框将是红色的，如下图所示（我正在使用/尝试使用焦点）。

问题是因为我可以仅在输入和按钮上使用焦点，但我需要焦点在 div 标签上

我有一个 div，里面有两个段落和一个输入（类型：复选框）。我尝试使用 tabindex 但它不起作用，当我单击复选框或输入字段（灰色按钮）时它不聚焦。仅当我单击组件内部而不是复选框字段时才聚焦。

代码是

<template>
    <div>
        <div tabindex="1"
            class="relative border border-gray-300 px-10 max-w-md mx-auto my-2 cursor-pointer rounded-lg px-5 py-4 rounded-lg border bg-white  transition duration-150
            ease-in-out placeholder:text-zinc-400 hover:bg-zinc-100 focus:border-transparent
            focus:outline-none focus:ring disabled:opacity-50 motion-reduce:transition-none
            dark:bg-zinc-900 dark:placeholder:text-zinc-500 dark:hover:bg-zinc-800" :class="[ error
            ? 'border-red-500  caret-red-500 focus:ring-red-500/50'
            : 'border-zinc-300 caret-primary focus:ring-primary/50 dark:border-zinc-600  dark:focus:border-transparent',
           ]"
        >
           <div class="flex justify-between">
               <div>
                   <h1 class="text-md font-semibold text-black">
                       {{ titleToggle }}
                   </h1>
                   <p class="inline text-md text-gray-500">
                       {{ subtitleToggle }}
                   </p>
               </div>
               <label class="switch my-auto">
                   <input
                       :value="toggleSwitch"
                       v-bind="$attrs" type="checkbox"
                       class="rounded-lg " :class="[
                       error
                          ? 'border-red-500  caret-red-500 focus:ring-red-500/50'
                          : 'border-zinc-300 caret-primary focus:ring-primary/50 
                          dark:border-zinc-600  dark:focus:border-transparent',]" @click="updateInput"
                    >
                    <span :class="[toggleSwitch ? 'bg-red-500 border-red-500' : 'bg-gray-300 border-gray-300',
                         ]" class="slider round absolute cursor-pointer inset-0  border  rounded-full"
                    />
                </label>
            </div>
        </div> 
    </div>
</template>

有谁有任何建议，或者可能有不同的方法来做到这一点？

Answer 1

我不太明白你的问题，但你可以从 tailwind 文档中看一下：

focus-within (:focus-within)：当元素或其子元素之一具有焦点时，使用 focus-within 修饰符设置元素的样式：

<div class="focus-within:shadow-lg ...">
  <input type="text" />
</div>

https://tailwindcss.com/docs/hover-focus-and-other-states#focus