手把手教你写vue 的通知组件

最新推荐文章于 2024-09-11 07:29:16 发布

Y_xxxxx

最新推荐文章于 2024-09-11 07:29:16 发布

阅读量502

点赞数

分类专栏： HTML vue 文章标签： vue js 组件化

本文链接：https://blog.csdn.net/Y_xxxxx/article/details/119041359

版权

本文手把手教你创建Vue通知组件，样式灵感来源于Element-UI。通过介绍项目结构、关键代码以及如何在项目中导入和使用，帮助你实现类似功能。

摘要由CSDN通过智能技术生成

先看效果

演示图片

组件样式参考element-ui

需要源码点我跳转gitee

组件部分

项目结结构如图

xxxxx-ui
|--src
|---components
|----common
|-----notify
|------index.js
|------Notify.vue

Notify.vue

<transition name="notify-Fade" appear>
    <!-- 整个notify 的容器  主要控制他来显示/隐藏-->
    <div class="XNotify" v-if="notifyFlag">
      <!-- 最左侧的图标类型 支持:error/info/warning/success -->
      <i :class="[`XNotifyTipIcon-${type} iconfont icon-${type}`]"></i>
      <!-- 显示的内容 -->
      <div class="XNotifyMain"&g