vue3手动封装弹出框组件message的方法 vue3手动封装弹出框组件messag

【vue3手动封装弹出框组件message的方法】本文实例为大家分享了vue3手动封装弹出框组件message的具体代码，供大家参考，具体内容如下
封装组件

.down {&-enter {&-from {transform: translate3d(0, -75px, 0); opacity: 0; }&-active {transition: all 0.5s; }&-to {transform: none; opacity: 1; }}}.xtx-message {width: 300px; height: 50px; position: fixed; z-index: 9999; left: 50%; margin-left: -150px; top: 25px; line-height: 50px; padding: 0 25px; border: 1px solid #e4e4e4; background: #f5f5f5; color: #999; border-radius: 4px; i {margin-right: 4px; vertical-align: middle; }.text {vertical-align: middle; }}

挂载到vue的原型对象上

// 如下的方法需要渲染一个提示效果import { createVNode, render } from 'vue'import XtxMessage from './xtx-message.vue'// 动态创建一个DOM容器const div = document.createElement('div')div.setAttribute('class', 'xtx-meassage-container')document.body.appendChild(div)export default ({ text, type }) => {let timer = null// createVNode 用于创建一个虚拟节点// 参数一支持组件// 参数二表示传递给组件的选项const vnode = createVNode(XtxMessage, { text, type })// 把虚拟的节点渲染到页面的DOM中即可// render函数的参数// 参数一：表示需要渲染的内容（虚拟节点）// 参数二：表示渲染的目标位置（DOM元素）render(vnode, div)// 希望提示信息显示1秒后消失clearTimeout(timer)timer = setTimeout(() => {// 清空div中的内容render(null, div)}, 1000)}// $message({ text: '登录失败', type: 'error'})

import Message from './Message'export default {install(app) {// 如果你想挂载全局的属性，能够通过组件实例调用的属性this.$messageapp.config.globalProperties.$message = Message // 原型函数}}

使用一 .

import Message from '@/components/library/Message'setup () {// 触发登录const handleLogin = async () => {// 手动进行表单验证const flag = await target.value.validate()if (flag) {// 验证通过,调用接口实现登录// 如果登录失败，就进行提示Message({ type: 'error', text: '登录失败' })}}mounted () {this.$message({ type: 'error', text: '登录失败' })}}

二.

// 获取组件的实例对象：类似于之前的thisconst instance = getCurrentInstance()// 点击登录const handleLogin = async () => {const valid = await target.value.validate()if (valid) {// 表单验证通过，调用接口实现登录// Message({ text: '登录失败', type: 'error' })instance.proxy.$message({ text: '登录失败', type: 'error' })}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。