如何单击外部按钮并保持活动样式？ - AlpineJS & TailwindCSS

Question

我在这个项目中使用 TailwindCSS 和 AlpineJS。有两个按钮可以切换选项卡，第一个按钮具有自动对焦功能。切换选项卡时，另一个按钮变为活动状态：

我希望该按钮仅在单击另一个按钮时才变为非活动状态。有没有办法使用 AlpineJS 和 TailwindCSS 做到这一点？类似于将活动类与@click.away 绑定。 提前致谢。 这是我的代码：

<div class="flex flex-col">
   <div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
      <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
         <div x-data="{ openTab: 1, coin: 0 }" class="overflow-hidden border-b border-gray-200 shadow sm:rounded-lg">
            <div class="flex items-center justify-between px-10 py-8 bg-white wrapper">
               <div>
                  <h3 class="lg:text-2xl sm:text-lg">Saldos</h3>
                  <h1 class="font-normal lg:text-4xl sm:text-3xl">$0.00</h1>
               </div>
               <div class="inline-flex items-center justify-center mr-2">
                  <div aria-label="Lista" data-balloon-pos="up" id="show-tip">
                     <button class="p-1 mr-1 text-gray-500 rounded-lg outline-none active:text-gray-200 hover:text-gray-200 focus:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 1" autofocus>
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
                     </button>
                  </div>
                  <div aria-label="Alocação de Ativos" data-balloon-pos="up" id="show-tip">
                     <button class="p-1 mr-1 text-gray-500 rounded-lg outline-none hover:text-gray-200 focus:text-gray-200 active:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 2">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
                     </button>
                  </div>
               </div>
            </div>
            <div x-show="openTab === 1">
               etc
            </div>
            <div class="flex flex-col justify-between py-2 bg-white lg:flex-row sm:px-6 lg:px-8" x-show="openTab === 2">
               etc
         </div>
      </div>
   </div>
</div>

Answer 1

您可以使用 Alpine.js x-bind:class 对象语法切换类，例如。 :class="{ 'active classes': openTab === 1 }" 对于您的第一个选项卡，请参阅以下 sn-p。您还可以绑定:disabled="openTab !== 1" 以禁用按钮（对于第一个按钮）。

<div aria-label="Lista" data-balloon-pos="up" id="show-tip">
  <button :class="{ 'active classes': openTab === 1 }" class="p-1 mr-1 text-gray-500 rounded-lg outline-none active:text-gray-200 hover:text-gray-200 focus:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 1" autofocus>
    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd"></path></svg>
  </button>
</div>
<div aria-label="Alocação de Ativos" data-balloon-pos="up" id="show-tip">
  <button :class="{ 'active classes': openTab === 2 }" class="p-1 mr-1 text-gray-500 rounded-lg outline-none hover:text-gray-200 focus:text-gray-200 active:text-gray-200 focus:outline-none hover:bg-gray-700 focus:bg-gray-700" type="button" @click="openTab = 2">
  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
  </button>
</div>