如何在自定义的Laravel Nova工具中使用确认对话框？

Question

是否可以在自己的工具中使用内置的Laravel Nova确认对话框？我只想使用它与Nova进行交互。

有关JS主题的​​文档非常详尽，因为您似乎可以使用的唯一内置UI是烤面包插件：https://nova.laravel.com/docs/1.0/customization/frontend.html#javascript

Answer 1

您可以随时使用<modal>组件。

这是它在Nova中的内部工作方式：https://gist.github.com/S-anasol/fa7441ceb4da9c6c71f9586ec1d04a5a

以下是简化示例：https://gist.github.com/S-anasol/b3790b8041fb2dfaa0a5b921ff46f5f3

Answer 2

• 您需要在Tool.vue的同一文件夹中创建一个新组件
• 我将在此处附加我使用的组件
• 然后在“ handleConfirm”方法中，您可以向API添加Ajax调用
• 您可以在该API中添加逻辑。
• 您可以在路径ToolName / routes / api.php中找到API文件

/* CustomModal.vue */

<template>
   <modal tabindex="-1" role="dialog" @modal-close="handleClose">
       <form @keydown="handleKeydown" @submit.prevent.stop="handleConfirm" class="bg-white rounded-lg shadow-lg overflow-hidden w-action">
           <div>
               <heading :level="2" class="border-b border-40 py-8 px-8">Confirm action</heading>
               <p class="text-80 px-8 my-8"> Are you sure you want to perform this action? </p>
           </div>
           <div class="bg-30 px-6 py-3 flex">
               <div class="flex items-center ml-auto">
                   <button type="button" @click.prevent="handleClose" class="btn btn-link dim cursor-pointer text-80 ml-auto mr-6">
                       Cancel
                   </button>
                   <button :disabled="working" type="submit" class="btn btn-default btn-primary">
                       <loader v-if="working" width="30"></loader>
                       <span v-else>Confirm</span>
                   </button>
               </div>
           </div>
       </form>
   </modal>
</template>

<script>
export default {
 methods: {
   handleConfirm() {
     // Here you can add an ajax call to API and you can add your logic there.
   },
   handleClose() {
     // Logic to hide the component
   },
 },
}
</script>

更多详细说明：https://medium.com/vineeth-vijayan/how-to-use-confirm-dialogs-in-a-laravel-nova-tool-b16424ffee87