vue3手动封装弹出框组件message的方法
更新时间:2021年09月26日 11:03:12 作者:沉迷...
这篇文章主要为大家详细介绍了vue3手动封装弹出框组件message的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue3手动封装弹出框组件message的具体代码,供大家参考,具体内容如下
封装组件
<template> <Transition name="down"> <div class="xtx-message" :style="style[type]" v-show='isShow'> <!-- 上面绑定的是样式 --> <!-- 不同提示图标会变 --> <i class="iconfont" :class="[style[type].icon]"></i> <span class="text">{{text}}</span> </div> </Transition> </template> <script> import { onMounted, ref } from 'vue' export default { name: 'XtxMessage', props: { text: { type: String, default: '' }, type: { type: String, // warn 警告 error 错误 success 成功 default: 'warn' } }, setup () { // 定义一个对象,包含三种情况的样式,对象key就是类型字符串 const style = { warn: { icon: 'icon-warning', color: '#E6A23C', backgroundColor: 'rgb(253, 246, 236)', borderColor: 'rgb(250, 236, 216)' }, error: { icon: 'icon-shanchu', color: '#F56C6C', backgroundColor: 'rgb(254, 240, 240)', borderColor: 'rgb(253, 226, 226)' }, success: { icon: 'icon-queren2', color: '#67C23A', backgroundColor: 'rgb(240, 249, 235)', borderColor: 'rgb(225, 243, 216)' } } // 控制动画 const isShow = ref(false) // 组件模板渲染成功后触发 onMounted(() => { isShow.value = true }) return { style, isShow } } } </script> <style scoped lang="less"> .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; } } </style>
挂载到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.$message app.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: '登录失败' }) } }
二.
// 获取组件的实例对象:类似于之前的this const instance = getCurrentInstance() // 点击登录 const handleLogin = async () => { const valid = await target.value.validate() if (valid) { // 表单验证通过,调用接口实现登录 // Message({ text: '登录失败', type: 'error' }) instance.proxy.$message({ text: '登录失败', type: 'error' }) } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
v-for循环中使用require/import关键字引入本地图片的几种方式
在做项目的过程中,模版相同,可是不标题和图片不同,循环标题我们知道可以用v-for循环,可是该怎么引入本地图片呢?下面这篇文章主要给大家介绍了v-for循环中使用require/import关键字引入本地图片的几种方式,需要的朋友可以参考下2021-09-09Element-ui Layout布局(Row和Col组件)的实现
我们在实际开发中遇到一些布局的时候会用到Layout布局,本文就详细的介绍了Element-ui Layout布局(Row和Col组件)的实现,具有一定的参考价值,感兴趣的可以了解一下2021-12-12Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
这篇文章主要介绍了Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
最新评论