B5net

人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

Vu3使用插件封装element-plus的消息提示

Published on:2022-05-06
插件是自包含的代码,通常向 Vue 添加全局级功能。它可以是公开 install() 方法的 object,也可以是 function
插件的功能范围没有严格的限制——一般有下面几种:
 1.添加全局方法或者 property。如:vue-custom-element
 2.添加全局资源:指令/过渡等。如:vue-touch)
 3.通过全局 mixin 来添加一些组件选项。(如vue-router)
 4.添加全局实例方法,通过把它们添加到 config.globalProperties 上实现。
 5.一个库,提供自己的 API,同时提供上面提到的一个或多个功能



一、全局属性和方法


在main.js中

import { createApp } from 'vue'
import App from '@/App.vue'

const app = createApp(App)

//通过该方式注册全局属性和方法
app.config.globalProperties.$text = 'xxxx'

app.mount('#app')


在组件中使用

import {getCurrentInstance } from 'vue'
// 从getCurrentInstance的proxy中解构出来
//  const { proxy: { $test}} = getCurrentInstance()
const { proxy} = getCurrentInstance()
proxy.$test


二、Vue3插件实现element-plus的消息提示


1.创建 modal.js

import { ElMessage, ElLoading, ElMessageBox } from 'element-plus'

const $loading = (message, options = {}) => {
    return ElLoading.service({ text: message, lock: true, background: 'rgba(0, 0, 0, 0.5)', ...options })
}

const $tips = (message, options = {}) => {
    return ElMessage({ message: message, showClose: true, ...options })
}
const $success = (message, options = {}) => {
    return ElMessage({ message: message, type: 'success', showClose: true, ...options })
}
const $warn = (message, options = {}) => {
    return ElMessage({ message: message, type: 'warning', showClose: true, ...options })
}
const $error = (message, options = {}) => {
    return ElMessage({ message: message, type: 'error', showClose: true, ...options })
}
const $alert = (message, options = {}) => {
    options = { title: '', btn: '确定', confirm: () => {}, ...options }
    return ElMessageBox.alert(message, options.title, {
        confirmButtonText: options.btn,
        callback: () => {
            options.confirm()
        }
    })
}
const $confirm = (message, options = {}) => {
    options = { title: '', btn: '确定', btn_cancle: '取消', confirm: () => {}, cancle: () => {}, type: 'warning', ...options }
    return ElMessageBox.confirm(message, options.title, {
        confirmButtonText: options.btn,
        cancelButtonText: options.btn_cancle,
        type: options.type
    })
        .then(() => {
            options.confirm()
        })
        .catch(() => {
            options.cancle()
        })
}
//插件注册全局属性
//在组件中使用
// import {getCurrentInstance } from 'vue'
// const { proxy: { $success }} = getCurrentInstance()
// 从getCurrentInstance的proxy中解构出来
export default {
    install(app) {
        app.config.globalProperties.$loading = $loading
        app.config.globalProperties.$tips = $tips
        app.config.globalProperties.$success = $success
        app.config.globalProperties.$warn = $warn
        app.config.globalProperties.$error = $error
        app.config.globalProperties.$alert = $alert
        app.config.globalProperties.$confirm = $confirm
//可以进行全局 app.provide  app.directive app.mixin
    }
}


2.在main.js中使用use


import { createApp } from 'vue'
import App from '@/App.vue'
import modal from '@/utils/modal'
const app = createApp(App)

app.use(modal)
app.mount('#app')




留言列表(0)

    留言

    B5net

    人生是场无尽旅途,欢声笑语,踟蹰彷徨,走过的是岁月,路过的是迷茫。向前,是希望极光;回首,是悠长深巷。

    开源项目
    • B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
    • B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
    • B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
    • B5VueCMF_H5:vue3.0 + Webpack/Vite + Vuex + VueRouter + Vant3 搭建快速开发基本Demo
    • See also:gitee.com@b5net
    最新评论
    瀑布 :你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
    瀑布 :你好,今天看到你的开源项目,很喜欢,感谢你的开源
    冰舞 on Laravel定时任务的实现 :测试测试测试测试测试测试 测试测试测试测试测试测试测试测试测试测试
    文章分类