Permalink
Không thể lấy lại những người đóng góp tại thời điểm này
Tệp này chứa văn bản unicode hai chiều có thể được giải thích hoặc biên dịch khác với những gì xuất hiện dưới đây. Để xem xét, hãy mở tệp trong một trình soạn thảo cho thấy các ký tự Unicode ẩn. Tìm hiểu thêm về các ký tự unicode hai chiều
Nướngh2>Toast | |
Nướngdiv class="btn btn-primary me-3" @click.prevent="showToast1[]">Toast | |
Nướngstrong class="me-auto">Bootstrap | |
Bootstrapsmall>11 mins ago | |
Nướng | |
Nướng default { | |
Bootstrap: 'ToastExamples', | |
11 phút trước: { | |
Chào thế giới! Đây là một thông điệp bánh mì nướng.[] { | |
this.$refs.toast1.$vb.toast.show[];.$refs.toast1.$vb.toast.show[]; | |
} | |
} | |
exportdefault { | |
Xin chào các bạn, chào mừng bạn trở lại blog của tôi. Hôm nay trong bài đăng trên blog này, tôi sẽ cho bạn thấy, Vue 3 Bootstrap 5 Bánh mì nướng đẩy thông báo làm việc.Vue 3 Bootstrap 5 Toasts Push Notifications Working Demo.
Vue 3 và Bootstrap 5 đã đến và nếu bạn mới thì bạn phải kiểm tra bên dưới hai liên kết: and Bootstrap 5 came and if you are new then you must check below two links:
- Vuejs
- Bootstrap 5
Bạn bè bây giờ tôi tiếp tục trở đi và đây là đoạn mã làm việc & NBSP; và sử dụng điều này một cách cẩn thận để tránh những sai lầm:
1. Trước tiên, bạn bè, chúng tôi cần thiết lập Fresh Vue 3 và đối với điều này, chúng tôi cần chạy bên dưới các lệnh. Thứ hai, chúng tôi cũng nên cài đặt phiên bản nút mới nhất trên hệ thống của chúng tôi. Với bên dưới, chúng tôi sẽ có & nbsp; Mô -đun Bootstrap 5 trong ứng dụng Vue 3 của chúng tôi:
npm install -g @vue/cli vue create vueboot5 cd vueboot5 npm i bootstrap@next npm run serve ////localhost:8080/
2. Bây giờ bạn bè chúng ta cần thêm mã bên dưới vào tệp Vueboot5/src/app.Vue để kiểm tra đầu ra cuối cùng trên trình duyệt:
//callling bootstrap modules import "bootstrap/dist/css/bootstrap.min.css"; import "bootstrap/dist/js/bootstrap.min.js"; import { Toast } from 'bootstrap/dist/js/bootstrap.esm.min.js' export default { mounted[] { //inti toast Array.from[document.querySelectorAll['.toast']] .forEach[toastNode => new Toast[toastNode]] } }Bootstrap 11 mins agoHello, world! This is a toast message.
Bây giờ chúng tôi đã hoàn thành bạn bè và nếu bạn có bất kỳ loại truy vấn hoặc đề xuất hoặc bất kỳ yêu cầu nào thì hãy bình luận bên dưới.
Lưu ý: Bạn bè, tôi chỉ nói với thiết lập cơ bản và mọi thứ, bạn có thể thay đổi mã theo yêu cầu của bạn.: Friends, I just tell the basic setup and things, you can change the code according to your requirements.
Tôi sẽ đánh giá cao rằng nếu bạn sẽ nói quan điểm của bạn cho bài viết này. Không có gì quan trọng nếu quan điểm của bạn sẽ tốt hay xấu.
Jassa
Cảm ơn