1. Lời nói đầu

sử dụngứng dụng đơnKhung phát triển đa nền tảng để phát triển nhiều thiết bị đầu cuốiỨNG DỤNGkhi nào, áp dụngHBuilderCửa sổ bật lên do chính nó cung cấp không đáp ứng được nhu cầu kinh doanh nên một thành phần cửa sổ bật lên tùy chỉnh showToast đã được phát triển. Thành phần này chủ yếu thực hiện các chức năng sau:

• Hỗ trợ tùy chỉnh tiêu đề, nội dung, nút;
• Hỗ trợ thực thi logic nghiệp vụ khác nhau dựa trên nhận dạng nút;
• Hỗ trợ điều chỉnh nội dung;
• Hỗ trợ tùy chỉnh hiển thị và ẩn các nút đóng cửa sổ bật lên;

Để biết chi tiết về cách tải xuống mã hoàn chỉnh, vui lòng tham khảo chương [Đọc mở rộng].

2. Nguyên tắc thực hiện

Áp dụng các hướng dẫn tùy chỉnh kết hợp với các thành phần tùy chỉnh để triển khai logic điều khiển và hiển thị chế độ xem.vuexThực hiện quản lý nhà nước.

đầu tiên vàomain.jsXác định các thành phần chung và đặt chúng vàoinitToast.jsĐăng ký$showBánh mì nướngđếnVuetrên nguyên mẫu để tạo điều kiện thuận lợi cho các cuộc gọi toàn cầu.

// main.js nhập initToast từ "@/comComponents/bocft-toast/initToast.js" nhập showToast từ "@/comComponents/bocft-toast/bocft-toast.vue" initToast(Vue.comComponent('show); -bánh mì nướng',showToast);

3. Triển khai mã

initToast.jsĐăng ký$showBánh mì nướngđếnVueLogic triển khai trên nguyên mẫu như sau:

// initToast.js nhập Vuex từ 'vuex' hàm mặc định xuất initToast(v) { // Treo trên cửa hàng vào nguyên mẫu Vue toàn cầu v.prototype.$toastStore = new Vuex.Store({ state: { show:false, biểu tượng :"thành công",//thành công:thành công;thất bại:thất bại tiêu đề:"title", nội dung:'content', thành công:null, downLoadUrl:null, toastCloseIconShow: '', toastCloseIconStyle: '', ... }, Mutations: { HideToast(state) { // Điều khiển trang thanh điều hướng chương trình nhỏ // #ifndef H5 if(state.hideTabBar){ wx.showTabBar( ); // #endif state.show = false }, // Phương thức nút 1 ButtonOneClick(state, data) { let _this = this; console.log('data.flag:', data.flag) switch (data.flag) { case 'hide': state.show = false break; ... } }, // Phương thức nút 2 ButtonTwoClick (state, data) { let _this = this; this.progress = 0; this.upshow = true; // Chuyển đổi công tắc hiển thị thanh tiến trình (data.flag) { case 'reload': state.show = false; close() { this.show2 = false; //Đóng cửa sổ bật lên cập nhật this.upshow = false; //Đóng thanh tiến trình uni.showTabBar(); //Hiển thị thanh tab this.$emit('closeVersion' ); //Đóng show thành phần}, showToast(state,data) { state = Object.sign(state,data) console.log('state:', state.show = true // Khi không có nút được hiển thị, trì hoãn 2S để ẩn hộp nhắc nếu (!state.buttonShow) { setTimeout(()=>{ state.show = false return state.success(state.icon) },2000) } }, thành công(state,data) { // state = Object.sign( state,data) // console.log(state); // state.show = true // setTimeout(()=>{ // state.show = false // return state.success(state.icon) // },2000) } } }) // Đăng ký $showToast với nguyên mẫu Vue để tạo điều kiện cho các cuộc gọi toàn cầu v.prototype.$showToast = function (option) { if (typeof option === 'object') { // #ifndef H5 if(option.hideTabBar){ wx.hideTabBar() } // #endif console.log('-------------tùy chọn----------- ' , lựa chọn) v.prototype.$toastStore.commit('showToast', option) }else{ Throw "Giá trị được truyền vào cho mục cấu hình phải là: "+typeof option;

Logic hiển thị khung nhìn như sau:

// toast.vue  phần trăm="percent" đột quỵ-width="10">      phần trăm="percent" đột quỵ-width="10">      ButtonOneShow(){ trả lại cái này.$toastStore.state.buttonOneShow; }, nútTwoShow(){ trả lại cái này.$toastStore.state.buttonTwoShow }, nútOneTitleStyle(){ trả lại cái này.$toastStore.state.buttonOneTitleStyle }, toastBoxStyle( ){ trả lại cái này.$toastStore.state.toastBoxStyle; }, toastTitleSuccessStyle(){ trả lại cái này.$toastStore.state.toastTitleSuccessStyle }, toastTitleFailStyle(){ trả lại cái này.$toastStore.state.toastTitleFailStyle }, ButtonShowStyle(){ trả lại cái này.$toastStore.state.buttonShowStyle }; nútOneClickParam(){ trả về this.$toastStore.state.buttonOneClickParam; }, ButtonTwoClickParam(){ trả lại cái này.$toastStore.state.buttonTwoClickParam }, thành côngImgSrc(){ trả lại cái này.$toastStore.state.successImgSrc; $toastStore.state.failImgClass }, thành côngImgClass(){ trả lại cái này.$toastStore.state.successImgClass; }, failedImgSrc(){ trả lại cái này.$toastStore.state.failImgSrc }, nútOneTitle(){ trả lại cái này.$toastStore.state.buttonOneTitle }, nútTwoTitle( ){ trả lại cái này.$toastStore.state.buttonTwoTitle } }, mount() { setTimeout(()=>{ this.$toastStore.commit('hideToast') this.$toastStore.commit('success',"confirm") },2000) }, các phương thức:{ ButtonOneClick( param){ this.$toastStore.commit('buttonOneClick', {flag: param}) }, ButtonTwoClick(param){ this.$toastStore.commit('buttonTwoClick', {flag: param, url: this.downLoadUrl}) }, closeToast(){ this.$toastStore.commit('hideToast') }, clickBtn(res ){ this.$toastStore.commit('hideToast') this.$toastStore.commit('success',res) }, moveHandle(){ return; } }, beforeDestroy(){ this.$toastStore.commit('hideToast') }, } ButtonOneShow(){ trả lại cái này.$toastStore.state.buttonOneShow; }, nútTwoShow(){ trả lại cái này.$toastStore.state.buttonTwoShow }, nútOneTitleStyle(){ trả lại cái này.$toastStore.state.buttonOneTitleStyle }, toastBoxStyle( ){ trả lại cái này.$toastStore.state.toastBoxStyle; }, toastTitleSuccessStyle(){ trả lại cái này.$toastStore.state.toastTitleSuccessStyle }, toastTitleFailStyle(){ trả lại cái này.$toastStore.state.toastTitleFailStyle }, ButtonShowStyle(){ trả lại cái này.$toastStore.state.buttonShowStyle }; nútOneClickParam(){ trả về this.$toastStore.state.buttonOneClickParam; }, ButtonTwoClickParam(){ trả lại cái này.$toastStore.state.buttonTwoClickParam }, thành côngImgSrc(){ trả lại cái này.$toastStore.state.successImgSrc; $toastStore.state.failImgClass }, thành côngImgClass(){ trả lại cái này.$toastStore.state.successImgClass; }, failedImgSrc(){ trả lại cái này.$toastStore.state.failImgSrc }, nútOneTitle(){ trả lại cái này.$toastStore.state.buttonOneTitle }, nútTwoTitle( ){ trả lại cái này.$toastStore.state.buttonTwoTitle } }, mount() { setTimeout(()=>{ this.$toastStore.commit('hideToast') this.$toastStore.commit('success',"confirm") },2000) }, các phương thức:{ ButtonOneClick( param){ this.$toastStore.commit('buttonOneClick', {flag: param}) }, ButtonTwoClick(param){ this.$toastStore.commit('buttonTwoClick', {flag: param, url: this.downLoadUrl}) }, closeToast(){ this.$toastStore.commit('hideToast') }, clickBtn(res ){ this.$toastStore.commit('hideToast') this.$toastStore.commit('success',res) }, moveHandle(){ return; } }, beforeDestroy(){ this.$toastStore.commit('hideToast') }, } ButtonTwoClick(param){ this.$toastStore.commit('buttonTwoClick', {flag: param, url: this.downLoadUrl}) }, closeToast(){ this.$toastStore.commit('hideToast') }, clickBtn(res ){ this.$toastStore.commit('hideToast') this.$toastStore.commit('success',res) }, moveHandle(){ return; } }, beforeDestroy(){ this.$toastStore.commit('hideToast') }, } ButtonTwoClick(param){ this.$toastStore.commit('buttonTwoClick', {flag: param, url: this.downLoadUrl}) }, closeToast(){ this.$toastStore.commit('hideToast') }, clickBtn(res ){ this.$toastStore.commit('hideToast') this.$toastStore.commit('success',res) }, moveHandle(){ return; } }, beforeDestroy(){ this.$toastStore.commit('hideToast') }, } 

4. Đọc mở rộng

• 《cổng thông tin ứng dụng đơn》
• Nhấp để tải xuống mã hoàn chỉnh