vue3和vue2挂载实例到全局(自定义消息提示框组件)-创新互联
vue2:
成都创新互联公司专注于站前企业网站建设,响应式网站建设,商城建设。站前网站建设公司,为站前等地区提供建站服务。全流程按需网站建设,专业设计,全程项目跟踪,成都创新互联公司专业和态度为您提供的服务入口文件中引入JS文件及css样式
//入口文件:main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import TMessage from '@/components/TMessage/TMessage.js';
import '@/assets/css/css.css'
Vue.config.productionTip = false
Vue.prototype.$message = TMessage;
new Vue({
router,
store,
render: h =>h(App)
}).$mount('#app')
//TMessage.js文件
import { createApp, createVNode, render } from 'vue'
import TMessage from '@/components/TMessage/TMessage.vue'
// 用于储存多个实例
let instances = [];
function Message(data) {
// 使用该方法组件(如Login)传过来的数据没有传的变量需要有默认值,否则是undefined传给TMessage
if (typeof data === 'string') {
// Message("这是错误的"),除了message,其他的设置默认值
data = {
message: data,
type: 'info',
}
}
data = {
...data,
// 设置具体data参数,根据传入的显示不同
message: data.message ? data.message : '默认提示信息',
type: data.type ? data.type : 'info',
center: data.center ? data.center : true,
offset: data.offset ? data.offset : 20,
duration: data.duration ? data.duration : 1000
}
// 用于处理所有消息提示框消失后,其他提示框的位置(需要在TMessage.vue中调用)
data.onClose = function() {
Message.close(msgNode);
}
// 处理多个实例之间间距
let offset = data.offset || 20;
// 用于改变后的offset值记录
let offsetTop = offset;
console.log(instances.length);
// * 0: 20
// * 1: 20 40 20(第0个的offset + 第0个的div高度(offsetHeight) + 第1个的offset 20)
instances.forEach((item) =>{
// 直接通过item获取的实例offsetHeight不准确
offsetTop += item.offsetHeight + offset + 26;
});
// 设置offset及TMessage.vue中的top值
data.offset = offsetTop;
// 创建实例
const app = createApp(TMessage, data);
// 准备dom容器
const msgNode = document.createElement('div');
// 添加到body上
app.mount(msgNode);
document.body.appendChild(msgNode);
msgNode.style.top = offsetTop + 'px';
msgNode.style.height = '20px';
// 将当前实例加入instances
instances.push(msgNode);
}
// 消息类型:success,info,error,warning
['error', 'info', 'success', 'warning'].forEach(item =>{
Message[item] = function(data) {
if (typeof data === 'string') {
data = {
message: data
};
}
data.type = item;
return Message(data);
};
});
//
// * 获取当前这个instance的高度
// * 把这个instance后面的所有实例的top减去这个高度,再减去偏移
// *
Message.close = function(msgNode) {
// 获取到DOM结构中所有新创建的Node
let curMessage = document.querySelectorAll("div.message");
// 找到当前div是在instances数组的下标
let index = instances.findIndex(item =>item === msgNode);
instances = instances.filter(item =>item !== msgNode);
// 获取需要减去的高度(66=自身高度+offset高度);curMessage[0].offsetHeight才能得到真正解析后的高度
let removeHeight = msgNode.offsetHeight + curMessage[0].offsetHeight;
for (let i = index; i< curMessage.length; i++) {
curMessage[i].style.top = parseInt(curMessage[i].style.top.split('px')[0]) - removeHeight + 'px';
}
// curMessage.length=1时是最后一次调用close方法,此时清空instances,则再次点击offsetTop不会一直累加
if (curMessage.length == 1) {
instances = [];
}
}
export default Message;
Message;
//TMessage.vue{{ type }}:{{ message }}
在任何其他组件中使用:通过this.即可简单使用
this.$message.error('用户名和密码不能为空');
// this.$message({
// duration: 1000,
// message: '1111',
// type: 'warning',
// })
// this.$message({
// duration: 5000,
// message: '5555',
// type: 'error',
// })
// this.$message({
// duration: 3000,
// message: '3333',
// type: 'warning',
// })
// this.$message({
// duration: 4000,
// message: '4444',
// type: 'info',
// })
// this.$message({
// duration: 2000,
// message: '2222',
// type: 'success',
// })
vue3:
TMessage.js和TMessage.vue文件同上
//入口文件:main.js
import { createApp } from 'vue'
import App from './App.vue'
// css文件直接引入
import '@/assets/css/css.css'
import router from '@/route/route'
import store from '@/store/store'
import Message from '@/components/TMessage/TMessage.js'
// Vue3将自定义组件加载到全局方法
const app = createApp(App);
app.config.globalProperties.$message = Message;
// 4.创建一个vue应用,将App组件和定义的路由放入到vue应用,并挂载到模板页面id为app的元素上。
app.use(router).use(store).mount('#app')
使用:this直接引用
this.$message.error("这是测试错误");
问题:消息提示框的消失有点问题,点击多个时不连续
你是否还在寻找稳定的海外服务器提供商?创新互联www.cdcxhl.cn海外机房具备T级流量清洗系统配攻击溯源,准确流量调度确保服务器高可用性,企业级服务器适合批量采购,新人活动首月15元起,快前往官网查看详情吧
网页标题:vue3和vue2挂载实例到全局(自定义消息提示框组件)-创新互联
URL地址:http://pwwzsj.com/article/jidcd.html