Dalam aplikasi laravel Vue saya, saya mempunyai vue dengan jadual data untuk memaparkan beberapa rekod pengguna.
Di atas jadual data saya terdapat butang untuk menambah rekod.
Sebaik sahaja pengguna mengklik butang, ia harus membuka modal.
Tetapi modal saya adalah dalam bilah.
Berikut ialah kod vue untuk butang saya (view-docs.vue),
<open-overlay direction-from="top" identifier="addDocumentModal">
<cs-button>
Add document
</cs-button>
</open-overlay>
Mod saya .blade ialah,
<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>
Bagaimana untuk membuka modal ini apabila saya mengklik butang vue?
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Gunakan acara jingle pada butang dan fungsi panggilan. Fungsi yang memautkan fail router.js dalam fungsi ini.
Dalam router.js, fungsinya sepatutnya kelihatan seperti ini,
{ 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'), },Selepas itu, buat laluan dalam fail api.php dan panggil fungsi pengawal. Lihat kod fail bilah anda dalam pengawal seperti yang ditunjukkan di bawah.
view('.blade file name');
Selesai, terima kasih.