-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
37 additions
and
27 deletions.
There are no files selected for viewing
64 changes: 37 additions & 27 deletions
64
frontend/src/components/admin/category/ModalComponent.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,55 @@ | ||
| <template> | ||
| <div class="modal fade" id="testModal" tabindex="-1" aria-labelledby="testModalLabel" aria-hidden="true" | ||
| ref="testModal"> | ||
| <div class="modal-dialog"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h5 class="modal-title" id="testModalLabel">Delete Category</h5> | ||
| <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> | ||
| </div> | ||
| <div class="modal-body text-start"> | ||
| <div class="mb-3"> | ||
| <label for="exampleInputText1" class="form-label">Are you sure?</label> | ||
| </div> | ||
| </div> | ||
| <div class="modal-footer"> | ||
| <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> | ||
| <button type="button" class="btn btn-danger" @click="submit">Yes, delete</button> | ||
| </div> | ||
| <div> | ||
| <b-button id="show-btn" @click="showTestModal">Open Modal</b-button> | ||
|
|
||
| <b-modal ref="testModal" hide-footer title="Using Component Methods"> | ||
| <div class="d-block text-center"> | ||
| <h3>Hello From My Modal!</h3> | ||
| </div> | ||
| </div> | ||
| <b-button class="mt-3" variant="outline-danger" block>Close Me</b-button> | ||
| <b-button class="mt-2" variant="outline-warning" block>Toggle Me</b-button> | ||
| </b-modal> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import bootstrap from 'bootstrap'; | ||
| // import bootstrap from 'bootstrap'; | ||
| import { Modal } from 'bootstrap'; | ||
| export default { | ||
| name: 'ModalComponent', | ||
| methods: { | ||
| showTestModal() { | ||
| console.log('Hello...'); | ||
| // let testModal = new bootstrap.Modal(this.$refs.testModal); | ||
| let testModal = new bootstrap.Modal(document.getElementById('testModal')); | ||
| // let testModal = new bootstrap.Modal(document.getElementById('testModal')); | ||
| // let testModal = new bootstrap.Modal.getInstance(this.$refs.testModal); | ||
| testModal.show(); | ||
| }, | ||
| submit() { | ||
| const modal = bootstrap.Modal.getInstance(this.$refs.exampleModal); | ||
| setTimeout(() => { | ||
| modal.hide(); | ||
| }, 3000); | ||
| // testModal.show(); | ||
| // this.$refs['testModal'].show(); | ||
| const modalElement = this.$refs.testModal; | ||
| // console.log(modalElement); | ||
| if (modalElement) { | ||
| console.log('Found'); | ||
| // const modal = new bootstrap.Modal(modalElement); | ||
| const modal = new Modal(modalElement); | ||
| console.log(typeof modal); | ||
| // modal.show(); | ||
| // modal._showElement; | ||
| // modal.show | ||
| // const modal = new bootstrap.Modal(modalElement); | ||
| // modal.show(); | ||
| // this.$refs['testModal'].show(); | ||
| } else { | ||
| console.log('404'); | ||
| } | ||
| }, | ||
| // submit() { | ||
| // const modal = bootstrap.Modal.getInstance(this.$refs.exampleModal); | ||
| // setTimeout(() => { | ||
| // modal.hide(); | ||
| // }, 3000); | ||
| // }, | ||
| }, | ||
| } | ||
| </script> |