In meiner Laravel-Vue-Anwendung habe ich einen Vue mit einer Datentabelle, um einige Benutzerdatensätze anzuzeigen.
Über meiner Datentabelle befindet sich eine Schaltfläche zum Hinzufügen von Datensätzen.
Sobald der Benutzer auf die Schaltfläche klickt, sollte ein Modal geöffnet werden.
Aber mein Modal ist in Blade.
Hier ist der Vue-Code für meinen Button (view-docs.vue),
<open-overlay direction-from="top" identifier="addDocumentModal">
<cs-button>
Add document
</cs-button>
</open-overlay>
Mein Modal .blade ist,
<form
method="post"
action="{{ route('dashboard.profile.otherDocuments.store.manual', ['locale' => app()->getLocale()]) }}"
enctype="multipart/form-data"
ref="addDocumentModal"
>
@csrf
<overlay direction-from="top" identifier="addDocumentModal" open="{{ isset($add_another_documents) ? 'true' : null }}" >
<div class="cs--dashboard-edit-modal w-full h-full absolute bottom-0 ">
<div class="cs--modal-content flex">
<div class="relative w-full">
<div class="cs--reveal-container bg-white w-full rounded shadow-soft mr-8 h-full">
<!--Modal title-->
<div class="flex justify-between items-center border-b border-certstyle-border px-10 py-3">
<h3 class="text-2xl leading-10 text-certstyle-titles font-bold my-2 flex items-center">
<span class="border-l-2 border-certstyle-orange inline-block h-6 mr-2"></span>
<span>{{ __('pages/other-documents.add-document') }}</span>
</h3>
<div class="h-full flex items-center cs--reveal transition-all duration-500"></div>
</div>
<div>
<!--Modal content-->
<div class="bg-certstyle-background-light w-full h-full px-10 pt-8 pb-10">
<!--Name-->
<div class="mb-5 relative z-30">
<p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.name') }}</p>
<div class="h-12 relative z-10">
<input value="{{ old('name') }}" name="name" id="add_name_input" type="text" class=" form-input w-full relative z-10" >
</div>
<validator identifier="addDocument" name="add_name_input" selector="id" rules="{{$validations['required']}}"></validator>
</div>
<div class="flex justify-between">
<!--Completed at-->
<div class="w-1/2 mr-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.date-of-issue') }}</p>
<validator-v2 identifier="addDocument" name="issued_at" rules="{{$validations['required']}}">
<div class="h-12">
<cs-date-picker value="{{ old('issued_at') != null ? Carbon\Carbon::parse(old('issued_at'))->format('Y-m-d') : '' }}" id="minimumDate" name="issued_at"></cs-date-picker>
</div>
</validator-v2>
</div>
<!--Expiration date-->
<div class="w-1/2 ml-2">
<p class="text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/add-certificate.expiry-date') }}</p>
<validator-v2 identifier="addDocument" name="expires_at" depends-on-name="does_not_expire" :rules="{{$validations['expiry_date_must_be_same_or_after']}}">
<div class="h-12">
<cs-date-picker value="{{ old('expires_at') != null ? Carbon\Carbon::parse(old('expires_at'))->format('Y-m-d') : '' }}" name="expires_at"></cs-date-picker>
</div>
</validator-v2>
</div>
</div>
<div class="flex justify-between">
<!--Completed at-->
<div class="w-1/2 mr-2">
<div class="mb-4">
<label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
<input type="checkbox" name="does_not_expire">
<span class="checkbox--checkmark flex items-center justify-center ">
<svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/add-certificate.document-does-not-expire') }}</span>
</label>
</div>
</div>
</div>
<!--Upload document-->
<div class="mb-1">
<dashboard-input-label identifier="document" :settings="{help: true, helpDirection: 'left'}">
{{ __('pages/add-certificate.upload-document') }}
<template slot="helpText">
Maximum filesize is {{ config('file-upload.max_file_size') }} MB.
The default allowed file extensions are: pdf, jpeg and png.
</template>
</dashboard-input-label>
<validator-v2 identifier="addDocument" name="document_file" :rules="{{$validations['required']}}">
<custom-file-upload :max-upload-file-size="{{ config('file-upload.max_file_size') }}" name="document_file"></custom-file-upload>
</validator-v2>
</div>
<!--Certificate number-->
<div class="mb-1">
<p class="inline-block text-certstyle-titles font-bold text-sm mb-1">{{ __('pages/other-documents.document-number') }}</p>
<div class="relative">
<validator-v2 identifier="addDocument" name="document_number" depends-on-name="no_document_number" :rules="{{$validations['required_unless']}}">
<input value="{{ old('document_number') }}" name="document_number" id="add_document_number_input" type="text" class=" form-input w-full relative z-10" >
<input-annotation identifier="document_number">
{{ __('pages/other-documents.fill-document-number-1') }}
</input-annotation>
<label class="inline-flex items-center focus:outline-none checkbox--container mt-2">
<input type="checkbox" name="no_document_number">
<span class="checkbox--checkmark flex items-center justify-center">
<svg class="icon text-certstyle-orange feather feather-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</span>
<span style="bottom: 4px;" class="text-certstyle-text font-normal text-sm relative">{{ __('pages/other-documents.document-has-no-document-number') }}</span>
</label>
</validator-v2>
</div>
</div>
</div>
<!--Modal actions-->
<div class="flex justify-between border-certstyle-border bg-white border-t px-8 py-8 relative ">
<close-overlay identifier="addDocumentModal">
<div class="text-certstyle-text-light border-certstyle-border rounded border px-6 py-2 mr-4 hover:bg-certstyle-background cursor-pointer">{{ __('pages/add-certificate.cancel') }}</div>
</close-overlay>
<div class="flex justify-right flex justify-right space-x-5">
<document-submit-button
caption="{{ __('pages/add-certificate.save-and-close') }}"
buttonclass="bg-white text-certstyle-orange border-certstyle-orange border rounded font-bold px-6 py-2 cursor-pointer"
name="saveAndClose"
identifier="saveAndClose"
></document-submit-button>
<document-submit-button
caption="{{ __('pages/add-certificate.save-and-add-new') }}"
buttonclass="text-white bg-gradient-br-orange rounded border font-bold px-6 py-2 cursor-pointer"
name="saveAndNew"
identifier="saveAndNew"
></document-submit-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</overlay>
</form>
Wie öffne ich dieses Modal, wenn ich auf die Vue-Schaltfläche klicke?
在按钮和呼叫功能上使用叮当事件。 在该函数中链接 router.js 文件的函数。
在 router.js 中，函数应该如下所示，
{ path: '/yourpath which is in api.php or web.php have', name: 'same as path name to remember easily', meta: { requiresAuth: true, //authentication require roles: ['superadmin','admin'] //roles to be define }, component: () => import('../your vue file path/myFile.vue'), },之后，在 api.php 文件中创建路由并调用该控制器的函数。 在控制器中查看您的刀片文件代码，如下所示。
view('.blade 文件名');
已经完成了，谢谢。