我正在尝试 HeadlessUI、Tailwind 2 和 VueJS v3。为啥我必须在 Switch 组件出现之前单击 HeadlessUI SwitchLabel？

Posted 2023-03-07

【中文标题】我正在尝试 HeadlessUI、Tailwind 2 和 VueJS v3。为啥我必须在 Switch 组件出现之前单击 HeadlessUI SwitchLabel？

【英文标题】：I'm trying out HeadlessUI, Tailwind 2, and VueJS v3. Why do I have to click on the HeadlessUI SwitchLabel, before the Switch component appears?我正在尝试 HeadlessUI、Tailwind 2 和 VueJS v3。为什么我必须在 Switch 组件出现之前单击 HeadlessUI SwitchLabel？

【发布时间】：2021-09-05 09:31:25

【问题描述】：

我正在试用 HeadlessUI v1.0、Tailwind v2.2 和 VueJS v3（​​我知道，这太先进了）。但是为什么我必须在 Switch 组件出现之前点击 SwitchLabel 呢？

一旦 Switch 出现，两种状态都会出现/正常运行。

我缺少关于 Switch 组件的某些内容吗？

提示：在第一次运行时，我看到 (Headless-UI) Switch 组件（从 html 按钮创建）尚不包含任何类。

从 Chrome Dev 切换组件（在第一次运行时）：

<div class="flex justify-between items-center max-w-sm mx-auto">
    <label id="headlessui-label-1" class="mr-4">Enable notifications</label>
    <button class="" modelvalue="false" id="headlessui-switch-2" role="switch" tabindex="0" type="button" >
        <span class="translate-x-1 inline-block w-4 h-4 transition-transform transform bg-white rounded-full"></span>
    </button>
</div>

App.vue

  <img class="mx-auto"    src="./assets/logo.png" />

  <HelloWorld msg="HELLO V3 WORLD!" />

  <div class="mt-5 p-5">
    <EnableNotifications />
  </div>
</template>

<script lang="ts">
import  defineComponent  from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import EnableNotifications from './components/EnableNotifications.vue'

export default defineComponent(
  name: 'App',
  components: 
    HelloWorld,
    EnableNotifications,
  
)
</script>

<style>
#app 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

</style>

EnableNotifications.vue

<template>
  <SwitchGroup>
    <div class="flex justify-between items-center max-w-sm mx-auto">
      <SwitchLabel class="mr-4">Enable notifications</SwitchLabel>
      <Switch
        v-model="enabled"
        :class='enabled ? "bg-blue-600" : "bg-gray-200"'
        class="relative inline-flex items-center h-6 transition-colors rounded-full w-11 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
      >
        <span
          :class='enabled ? "translate-x-6" : "translate-x-1"'
          class="inline-block w-4 h-4 transition-transform transform bg-white rounded-full"
        />
      </Switch>
    </div>
  </SwitchGroup>
</template>

<script>
  import  ref  from 'vue'
  import  Switch, SwitchGroup, SwitchLabel  from '@headlessui/vue'

  export default 
    components:  Switch, SwitchGroup, SwitchLabel ,

    setup() 
      const enabled = ref(false)

      return  enabled 
    ,
  
</script>```

【参考方案1】：

刚刚修好了！将 HeadlessUI 升级到 v1.3 版本。 （我使用的是 v1.2）