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 = $loadingapp.config.globalProperties.$tips = $tipsapp.config.globalProperties.$success = $successapp.config.globalProperties.$warn = $warnapp.config.globalProperties.$error = $errorapp.config.globalProperties.$alert = $alertapp.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)
加载更多
留言
开源项目
- B5LaravelCMF:基于laravel9+bootstrap3实现的快速开发后台
- B5YiiCMF:基于Yii2+bootstrap3 实现的快速开发后台管理系统
- B5ThinkCmf:基于ThinkPHP6+bootstrap3 实现的快速开发后台管理系统
- B5GoCmf:gin + sqlx +bootstrap 实现后端管理系统
- See also:gitee.com@b5net
最新评论
pcy
:前排围观
Louis
:冰舞的博客使用yii框架做的吧,B5ThinkCMF在本地部署后,登录系统的响应时间要比B5YiiCMF的登录时间长,还有一些Bug待修复
w1
on Electron+vue搭建项目或将vue项目转为electron
:大佬
34
:感谢你的开源项目
奥德赛
on Electron+vue搭建项目或将vue项目转为electron
:大声道奥术大师大声道
cmf
:你好 你的B5ThinkCMF下载后有点问题 能帮忙解决下么?
laravel新手
:您好,laravel9+bootstrap3实现的快速开发后台,下载部署后,刷新加载,F12我看了下,我部署的是240毫秒左右,您部署的测试版本只有50毫秒左右,能辛苦指导下,如何优化lv吗,谢谢
瀑布
:你好,yii我下载在本地后台,接口请求非常慢,通过debug我发现session_started执行时间很长,想问下这个是需要哪个地方配置吗?
瀑布
:你好,今天看到你的开源项目,很喜欢,感谢你的开源
冰舞
on Laravel定时任务的实现
:测试测试测试测试测试测试
测试测试测试测试测试测试测试测试测试测试
文章分类
标签