vue项目调用通用组件_Vue插件：封装独立的通用组件 可复用的单文件式全局Toast弹窗...

最新推荐文章于 2024-09-02 17:14:49 发布
最新推荐文章于 2024-09-02 17:14:49 发布
阅读量452 收藏
点赞数
文章标签： vue项目调用通用组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_30962449/article/details/111973283
版权
本文介绍了如何使用Vue将常见的Toast弹窗功能进行组件化打包，实现代码复用。通过创建并引入showToast.vue组件，可以轻松在项目中调用Toast功能，支持自定义文案、显示时长和回调函数。详细步骤包括组件创建、引入及使用方法，并提供了项目源码链接供参考。
摘要由CSDN通过智能技术生成

最近突然很想简化一些自己写的，项目常用的调用小功能，比如一些弹窗等等，之前都是Html/JavaScript/Css分离，每次复用都要分别写到对应的文件里，略显麻烦。

最近看了Vue官网有关于插件打包的说明，尝试了一下还可以，目前成功打包了一个Toast组件。以后每次项目要用到Toast弹窗，只需要引入一个 showToast.vue 即可直接生效调用，而不必在多个文件里维护自己的那部分代码。

##功能说明

1、支持自定义弹窗文案，并自动计算弹窗的高度调整在屏幕的位置，以一直保持居中

2、支持自定义弹窗显示时长(默认2秒，单位毫秒)

3、支持回调函数，callback将在设定的时间结束后才执行

使用方式

1、将 showToast.vue 文件放置于项目的模板文件夹(个人习惯为 src/components)

2、打开 App.vue，引入vue和showToast组件，并use该组件(其实是use组件里的方法，只不过打包为一个文件了)。

template部分(举例，主要就是showToast那里)：

script部分：

效果预览

组件源码

我使用的是stylus，样式在这里就随便写一下，请根据实际项目需要做调整和本地备份。

保存为 showToast.vue 文件到项目模板文件夹下即可，以后如果要引用，就直接引入该文件就ok。

最后附上项目的github地址

https://github.com/chengpeiquan/vue-toast

清荔枝
关注
vue-components通用组件
King Saj
02-13 465
基础框架组件 element-ui Editor(编辑器) 组件 <template> <div> <el-upload :action="uploadUrl" :before-upload="handleBeforeUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" name="file" :show
vue进阶：使用插件实现弹窗类组件
weixin_43867717的博客
03-14 1944
在之前的文章里，已经分析了怎么实现弹窗类组件，并且介绍了两种实现弹窗类组件的方式，分别是借助Vue构造函数和Vue的extend函数。想了解的可以先看我之前的文章：vue进阶：弹窗类组件实现方式 插件 插件是嘛? 插件通常用来为 Vue 添加全局功能。我们vue项目中最常用的插件就是vue-router。 vue插件和组件的诞生都是为了实现逻辑的复用，他们的本质都是对代码逻辑的封装，所以在一定程度上，组件可以封装成插件，插件也可以改写成组件。具体使用插件还是组件就要看项目中的实际使用场景了。Vue 插件和V
饿了么基于Vue2.0的通用组件开发之路（分享会记录）
weixin_33714884的博客
11-09 272
  Element：一套通用组件库的开发之路 Element 是由饿了么UED设计、饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库。今天我们要分享的就是开发 Element 的一些心得。 官网：http://element.eleme.io/#/github：https://github.com/ElemeFE/element   ## 设计目的 大部分项目起源都是源于业务方的需求，...
vue3中交互反馈的用法及各种弹窗输入框最详细教学
最新发布
m0_68597716的博客
09-02 3089
vue3中交互反馈的用法及各种弹窗输入框最详细教学
Vue常用插件总结
cmmboy1990的博客
07-07 310
Vue常用插件总结 一、UI组件及框架 element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 UI 库 vuetify - 为移动而生的Vue JS
vue插件--仿微信小程序showToast实现弱提示
qq_41756580的博客
08-19 1029
效果图： 根据参数分别有4种样式：success，info，warning，error，none 开发者可以根据自身需要替换对应的图标即可。 下面是代码： index.js import Vue from 'vue'; import toast from './toast.vue'; export default { install(Vue) { const defaults = { show:false,
Vue 爬坑之路（九）—— 用正确的姿势封装组件
weixin_33842328的博客
07-25 506
迄今为止做的最大的 Vue 项目终于提交测试，天天加班的日子终于告一段落。。。 在开发过程中，结合 Vue 组件化的特性，开发通用组件是很基础且重要的工作 通用组件必须具备高性能、低耦合的特性 为了满足这些特性，开发的时候有很多需要注意的地方，这里我和大家分享一下我的心得 一、数据从父组件传入 为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去...
Vue.js实战：打造美观可复用的提示组件
"本文介绍了如何在Vue.js中实现一个美观、灵活、可复用的提示组件，适用于需要提供用户信息反馈的场景。通过组件化方法，提高代码复用性和应用程序的可维护性。" 在Vue.js中，组件化是核心特性，它允许开发者将UI...
Vue.js 实现全局 toast 提示组件
"这篇文章除了介绍`this.$toast()`的使用，还涉及前端组件的全局注册和调用方式，以及Vue.js中的`Vue.extend()`和`$mount()`方法的应用。" 在前端开发中，`this.$toast()`是一种常用的全局提示组件，它允许开发者在...
基于vue写一个全局Message组件的实现
12-12
在Vue.js中，创建全局组件可以极大地提高代码的可复用性和开发效率。在这个示例中，我们将讨论如何基于Vue实现一个类似于Element UI中的全局Message组件。Message组件通常用于显示短暂的通知信息，如成功、错误或...
Vue全局弹窗组件实现与应用指南
资源摘要信息:"在本教程中，我们将学习如何在Vue.js框架中创建自定义全局弹出组件，包括询问框、输入框、提示框和toast。我们会通过main.js文件引用这些组件，并使得它们可以在项目中的任何位置全局使用。这些弹出...
在vue中封装可复用的组件方法
11-26
本次封装的组件以toast组件为例 以前使用移动端ui插件时，通过一句代码比如 $.toast( ‘ 需要显示的内容 ‘ )，从而在页面上展示这段文字，并在一定时间后消失。 现在我们也尝试自己封装toast组件。 准备工作：vue-cli脚手架工程 先看一下涉及到的文件目录截图： 这次的封装主要涉及的文件是Toast.vue toast.js Hello.vue，主要思路如下： ① Toast.vue是我们要使用的toast组件； ② toast.js里面用Vue.extend()扩展一个组件构造器，然后通过实例化组件构造器，就可创造出可复用的组件。 最后在toast.js里面导出函数myT
VUE 组件的通用性
qq_37372407的博客
03-26 271
&lt;div id="app"&gt; &lt;my-div message="今天要啊" eno="222@qq.com"&gt;&lt;/my-div&gt; &lt;my-div&gt;&lt;/my-div&gt; &lt;/div&gt; &lt;template id="my-div"&g
vue项目调用通用组件_vue封装公共组件（通用组件）需要考虑到什么
weixin_39593519的博客
02-05 1034
开发通用组件是很基础且重要的工作，通用组件必须具备高性能、低耦合的特性一、数据从父组件传入为了解耦，子组件本身就不能生成数据。即使生成了，也只能在组件内部运作，不能传递出去。父对子传参，就需要用到 props，但是通用组件的的应用场景比较复杂，对 props 传递的参数应该添加一些验证规则二、在父组件处理事件在通用组件中，通常会需要有各种事件，比如复选框的 change 事件，或者组件中某个按钮的...
Vue的组件库大全
我就是我是好孩子的博客
05-07 4560
它是由 Mozilla 团队开发的，建立在 HTML、CSS 和 JavaScript 的基础上，通过简单的标记语言和组件系统，使开发者能够轻松创建和展示交互式的 VR 和 AR 内容。
vue 组件 提示框(toast)
echo_Ae的博客
04-26 5103
如果需要这样访问this$showToast.load('正在加载') 这样的需求 你可以看看 (也是我写的效果一样) https://blog.csdn.net/echo_Ae/article/details/89531096 效果图（只能说符合我目前业务，你可以直接拿代码修改成你需要的业务） toast组件代码 <style> #toastLoade...
Vue-独立日-单文件组件
黄黄黄一边敲代码一边写出来的博客
05-02 110
Vue-独立日-单文件组件 1. 单文件组件 https://cn.vuejs.org/v2/guide/single-file-components.html a. <template> html代码 </template> <script> js代码 </script> <style> css代码 </style> b. <template> html代码 </template> <script sr
9. Vue 通用项目配置
白怀宇的博客
07-02 283
Vue 通用项目配置 按照如下所示创建目录结构 配置通用css文件 npm install normalize.css --save 在 assetc/css 路径下创建 base.css @import "~normalize.css"; // ... 在 App.vue 中加载 base.css 文件 <style> @import "~@/assets/css/base.css"; </style> Axios 封装 npm install axio
vue 组件 提示框(toast) 使用 mixin混入
echo_Ae的博客
04-26 1419
如果不需要this$showToast.load('正在加载') 这样的需求 把它封装成 组件就可以了 你可以看看 (也是我写的效果一样) https://blog.csdn.net/echo_Ae/article/details/89530951 效果图 1、新建一个js文件(如showToast.js)这个记得要在main.js引入(入口文件) const showToa...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值