Vue.js 3和带DaisyUI的模态(顺风CSS)

py49o6xq 于 2023-01-21 发布在 Vue.js

关注(0)|答案(1)|浏览(330)

我正在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" vue 3React逻辑来来去！Daisy似乎没有实现这一点。或者至少不容易。我错过了什么？

vue.js

来源：https://stackoverflow.com/questions/74367925/vue-js-3-and-modal-with-daisyui-tailwind-css

1条答案

按热度按时间

kuhbmx9i1#

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

<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>

赞(0）回复(0）举报 2023-01-21

我来回答

Vue.js 3和带DaisyUI的模态(顺风CSS)

1条答案

相关问题

热门标签

最新问答