vue项目开发全局组件笔记

最新推荐文章于 2023-02-10 16:22:12 发布

Coding_Jia

最新推荐文章于 2023-02-10 16:22:12 发布

阅读量513

点赞数 1

分类专栏： vue-js 文章标签： vue vue组件前端开发

本文链接：https://blog.csdn.net/Coding_Jia/article/details/86704871

版权

本文记录了在Vue项目中开发自定义全局alert警告组件的过程。遵循官方指南，组件在src/components/alert文件夹中创建并实现。通过两种不同的注册方式，适应在组件内部和外部调用的需求。在main.js中的引入也有所区别，以确保组件在不同场景下的可用性。

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

在开发vue项目时，经常会用到element UI组件，在全局使用像message，toast，alert等组件得时候会很方便，但是在开发需要UI制定的项目时，就不能使用element UI了，这时就需要自己去开发属于自己的组件库了。
具体的开发方法官网提供了。下面我们就根据官网提供的方法来开发属于我们自己的alert警告组件

首先我们要在src/components文件夹下创建一个alert文件夹，在里面创建两个文件

├── src
│   ├── components
│   │   ├── alert
│   │   │   ├── alert.vue #alert组件
│   │   │   ├── index.js #插件逻辑

编写alert组件

<template>
  <transition name="alert-fade">
    <div
      class="ht-message"
      v-if="show"
    >
      <div
        class="ht-model"
        @click="close"
      ></div>
      <div
        class="ht-message-box"
        :style="'width:'+width"
      >
        &l