vue3中element-plus封装ElMessage，ElMessageBox提示 - 知乎

安宇雨 - 随手采集
2023-11-07 12:40:17
随手采集
0000-未整理-等待研究

//封装文件message.ts
import { ElMessage, ElMessageBox } from 'element-plus'

interface MessageImplements {
    info(title: string): void;
    wraning(title: string): void;
    success(title: string): void;
    error(title: string): void;
}

export function useMessage() {
    class MessageClass implements MessageImplements {
        // 普通提示
        info(title: string): void {
            ElMessage.info(title);
        }

        // 警告提示
        wraning(title: string): void {
            ElMessage.warning(title);
        }

        // 成功提示
        success(title: string): void {
            ElMessage.success(title);
        }

        // 错误提示
        error(title: string): void {
            ElMessage.error(title);
        }
    }

    return new MessageClass();
}

export function useMessageBox() {
    class MessageBoxClass implements MessageImplements {
        // 普通提示
        info(msg: string): void {
            ElMessageBox.alert(msg,'message.box.title');
        }

        // 警告提示
        wraning(msg: string): void {
            ElMessageBox.alert(msg, 'message.box.title', { type: 'warning' });
        }

        // 成功提示
        success(msg: string): void {
            ElMessageBox.alert(msg, 'message.box.title', { type: 'success' });
        }

        // 错误提示
        error(msg: string): void {
            ElMessageBox.alert(msg, 'message.box.title', { type: 'error' });
        }

        // 确认窗体
        confirm(msg: string) {
            return ElMessageBox.confirm(msg, 'message.box.title', {
                confirmButtonText: 'common.confirmButtonText',
                cancelButtonText: 'common.cancelButtonText',
                type: 'warning',
            });
        }
        // 提交内容
        prompt(msg: string) {
            return ElMessageBox.prompt(msg, 'message.box.title', {
                confirmButtonText: 'common.confirmButtonText',
                cancelButtonText: 'common.cancelButtonText',
                type: 'warning',
            });
        }
    }

    return new MessageBoxClass();
}

//使用方法：
import {  useMessage, useMessageBox } from "/@/hooks/message";
useMessageBox().confirm('确定吗？').then(()=>{
   //确定中要进行的操作
}).catch(()=>{
  //取消操作
  return
});

原网址: 访问
创建于: 2023-11-07 12:40:16
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到