Vue.js 3 和模态与 DaisyUI (Tailwind CSS)答案

【问题标题】：Vue.js 3 and Modal with DaisyUI (Tailwind CSS)Vue.js 3 和模态与 DaisyUI (Tailwind CSS)
【发布时间】：2023-01-20 21:36:13
【问题描述】：

我在 Vue.js 3 中修改 DaisyUI（将现有的 Vue+Bootstrap 应用程序移植到 Tailwind CSS）。我喜欢 DaisyUI 没有在幕后运行 JS 魔法的想法，但似乎有一些 CSS 巫毒魔法使事情变得比他们需要的更复杂（或者至少这是我的印象）。

从 DaisyUI 示例中，这是我尝试集成的模态：

  <input type="checkbox" id="my-modal" class="modal-toggle"/>
  <div class="modal">
    <div class="modal-box">
      <h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
      <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
      <div class="modal-action">
        <label for="my-modal" class="btn">Yay!</label>
      </div>
    </div>
  </div>

没有 javascript，但问题是模态将根据幕后的一些模糊逻辑来来去去，这些逻辑测试顶部的 my-modal 输入复选框的值。那不是我想要的。我希望我的模态基于我的v-show="showModal"vue3 反应式逻辑！ Daisy 似乎无法做到这一点。或者至少不容易。我错过了什么？

【问题讨论】：

不是真正的答案，而是暂时的解决方法。我保留了复选框（设置为已选中）并将我的自定义逻辑添加到“始终在线”模式：<input type="checkbox" id="my-modal" class="modal-toggle" checked/><div v-show="showModal" class="modal">

标签： vue.js vuejs3 tailwind-css daisyui

【解决方案1】：

模式是输入字段的控制器，因此要打开或关闭模式只需切换该输入的值：

<template>
       <!-- The button to open payment modal -->
    <label class="btn" @click="openPaymentModal">open modal</label>

    <!-- Put this part before </body> tag -->
    <input type="checkbox" v-model="paymentModalInput" id="payment-modal" class="modal-toggle" />
    <div class="modal modal-bottom sm:modal-middle">
      <div class="modal-box">
        <h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
        <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
        <div class="modal-action">
          <label class="btn" @click="closePaymentModal">Yay!</label>
        </div>
      </div>
    </div>
</template> 
<script lang="ts" setup>
    const paymentModalInput = ref()
    const openPaymentModal = () => {
        paymentModalInput.value = true
    }
    const closePaymentModal = () => {
        paymentModalInput.value = false
    }
</script>

【讨论】：