Skip to content

封装命令式弹框组件

uni.showToast和uni.showModal的封装

uni.showToast

js
function showToast(title, icon){
	uni.showToast({
		icon: icon || "none",
		title: title || '标题',
	});
}

export default showToast
function showToast(title, icon){
	uni.showToast({
		icon: icon || "none",
		title: title || '标题',
	});
}

export default showToast

页面调用

js
import showToast from "./dialog.js";
export deafult{
	methods:{
        btn(){
            showToast("显示弹框")
        }
	}
}
import showToast from "./dialog.js";
export deafult{
	methods:{
        btn(){
            showToast("显示弹框")
        }
	}
}

uni.showModal

js
function showModal(content, options = []){
	uni.showModal({
	  title: "提示",
	  content, 
	  confirmColor: '#1890ff',
	  cancelColor: '#ff4d4f',
	  confirmText: options[0].text || "确定",
	  cancelText: options[1].text || "取消",
	  success: (res) => {
	    if (res.confirm) {
	      options[0].callback && options[0].callback()   
	    } else {
	      options[1].callback && options[1].callback()
	    }   
	  }
	}) 
}
export default showModal
function showModal(content, options = []){
	uni.showModal({
	  title: "提示",
	  content, 
	  confirmColor: '#1890ff',
	  cancelColor: '#ff4d4f',
	  confirmText: options[0].text || "确定",
	  cancelText: options[1].text || "取消",
	  success: (res) => {
	    if (res.confirm) {
	      options[0].callback && options[0].callback()   
	    } else {
	      options[1].callback && options[1].callback()
	    }   
	  }
	}) 
}
export default showModal

页面调用

js
import showModal from "./dialog.js";
export deafult{
	methods:{
		btn(){
			showModal('确定删除此项吗?', [
                { 
                    // text: '确定',
                    callback: () => {
                    console.log("queding");
                    } 
                },
                {
                    // text: '取消',
                    callback: () => {
                    console.log("quxiao");
                    } 
                },
            ])
		}
	}
}
import showModal from "./dialog.js";
export deafult{
	methods:{
		btn(){
			showModal('确定删除此项吗?', [
                { 
                    // text: '确定',
                    callback: () => {
                    console.log("queding");
                    } 
                },
                {
                    // text: '取消',
                    callback: () => {
                    console.log("quxiao");
                    } 
                },
            ])
		}
	}
}

程序员小洛文档