小编Dar*_*vic的帖子

我正在使用 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 …