Vue进阶---写一个类似Element中Message的插件

最新推荐文章于 2025-03-16 17:17:56 发布

原创

最新推荐文章于 2025-03-16 17:17:56 发布 · 699 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#VUE #插件 #Element #Message #Loading

本文介绍了如何在Vue项目中创建一个类似Element UI的Message插件，包括项目文件夹结构设置、message组件的实现、在index.js中导出全局方法以及在main.js中引入和使用插件。通过这个实例，读者可以了解Vue插件的开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建项目, 安装项目并启动项目

vue init webpack vue-ui
cd vue-ui
cnpm install
npm run dev

项目文件夹结构
在src中新建插件文件夹UI-Plugin，放置我们创建的插件，结构如下:

其中：
UI-Plugin --> message 放置message组件
UI-Plugin --> index.js 为所有插件的出口

在这里插入图片描述
4. 实现message组件，实现功能以及动画

<template>
  <transition name='fade'>
    <div class="ui-message" v-if="show">
      {
  
  {text}}
    </div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      show: false
    }
  },
  props: {
    text: {
      type: String,
      default: 'message context'
    }
  },
  watch: {
    // 自动关闭
    show (val, oldVal) {
      if