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

最新推荐文章于 2024-04-26 10:23:26 发布
最新推荐文章于 2024-04-26 10:23:26 发布
阅读量624 收藏 2
点赞数
分类专栏： 前端 Vue JavaScript 文章标签： VUE 插件 Element Message Loading
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/studentenglish/article/details/98125385
版权
  1. 创建项目, 安装项目并启动项目
vue init webpack vue-ui
cd vue-ui
cnpm install
npm run dev
  1. 项目文件夹结构在这里插入图片描述
  2. 在src中新建插件文件夹UI-Plugin，放置我们创建的插件，结构如下:

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

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

<template>
  <transition name='fade'>
    <div class="ui-message" v-if="show">
最低0.47元/天 解锁文章
studentenglish
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-element-admin中文版本
07-20
该资源为一个后台管理系统，为vue-element-admin在git下搭建而成
Vue开发者必备！手把手教你实现类似Element Plus的全局提示组件！
CRMEB小程序商城的博客
01-02 523
虽然这个组件的实现原理很简单，但是它在用户体验和功能上却非常强大。它使用了Vue.js的响应式系统和动画效果，使得弹框在显示和隐藏时都能给用户带来良好的视觉体验。点此下载。
vue3 h()函数 element-plus组件写法？
最新发布
SM_Cute的博客
04-26 154
vue3 h()函数 element-plus组件写法？
Vue实现类似elementPlus的全局提示组件
JackChan
04-15 296
Vue实现类似elementPlus的全局提示组件
【Vue】Element-Plus 源码学习笔记——实现一个基本的 ElMessage 组件
qq_39559879的博客
04-04 2925
先贴下 Element-Plus ElMessage 源码的网址。我们需要实现的效果类似 ElMessage，即能够显示多个消息、上一个消息消失下面的消息会自动往上移动、进入移出动画、自定义消息和持续时间。其他选项这里不考虑。 大体思路 我们的 ElMessage 组件通过函数调用动态显示，无需事先在页面中放入组件，这样能更灵活也更方便。实现的基本思路是使用函数动态渲染组件到页面上。 createVNode 和 render 实际上 createVNode 是 h 函数的别名，这两个函数的功能是创建一个 V
仿照Element-ui实现一个简易的$message方法
10-14
主要介绍了仿照Element-ui实现一个简易的$message方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
组件开发（一）仿element的Message组件
车联网开发的博客
01-06 606
仿照elemet-ui的Message组件，实现自己的Message组件 1.效果如下 2. 基本代码message.js import MessageComponent from './Message.vue'; import Vue from 'vue'; // 单例模式 let instance; let getVueInstance = () => { instance = new Vue({ render: h => h(MessageCompone
如何创建一个类似于element-ui的Message组件
weixin_33963189的博客
10-12 1125
1、场景 公司一直使用vue+element-ui来进行项目的开发，因此以前的信息提示弹出框一直使用element-ui的Message组件，然而，此次的项目拿到UI的设计图。 发现并不是很契合element-ui。因此决定自己封装一个全局的message组件。方便随时调用。 2、组件的创建 创建messageTips.vue文件，组件中代码如下： &lt;template&gt; &lt;t...
vue 如何写出仿elementui的message消息提示
zly_101的博客
08-17 797
利用render（虚拟dom） 定义template组件 就是正常的组件 起名为index.vue <template> <transition name="fade" v-if="isShow"> <!-- //success warn err default --> <div class="tip-box" :class="{'success':type =='success' ,'warn':type =='warn' ,'e
一款优雅的消息提示插件Message.js
Myles'Blog
06-21 5810
Message.js **插件描述：**一款优雅的原生JS页面消息提示插件，兼容性良好，无任何依赖。 **声明：**此插件非笔者原创，笔者只做了部分内容的修改，以符合个人需求。以下为原插件来源信息： 原作者：或许吧（jesseqin） 转载地址：https://www.jq22.com/jquery-info23550 使用： html引入： <link rel="stylesheet" href="./message.min.css"> <!-- your html --&
Vue.js 框架源码与进阶 - 封装 Vue.js 组件库
每天进步一点点
08-08 476
好处main.js root.vue 1.2.2 $parent 获取的数据是响应式的 parent.vue child.vue grandson.vue 1.2.3 $children 获取所有子组件 parent.vue children1.vue children2.vue 1.2.4 $refs 如果你把它作用到普通 HTML 标签上，则获取到的是 DOM 如果你把它作用到组件标签上，则获取到的是组件实例 parent.vue myinput.vue 1.2.5 provide / in
m-message:vue的消息插件
05-11
import Message from 'vue-m-message' import 'vue-m-message/dist/index.css' Vue . use ( Message ) // will mount `Vue.prototype.$message` // or Vue . use ( Message , { name : 'msg' } ) // will mount `Vue...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue-element-admin完整依赖包node_modules
03-05
从github克隆下来的vue-element-admin项目后，有时install时会报各种异常导致下载失败，故上传此完整依赖包以便各位使用
vue项目中引入vue-datepicker插件的详解
10-16
主要介绍了vue项目中引入vue-datepicker插件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue3语法系统进阶 - 全面掌握Vue3特性
明哥
08-20 357
除了核心功能默认内置的指令 (例如v-model和v-show)，Vue 也允许注册自定义指令，来实现一些封装功能。自定义指令的实现实现一个简单的v-color指令，用于给元素添加背景色下面我们来完成一个实际可以应用的指令，按钮权限指令，一般情况下这种指令不会局部使用，而是全局使用，所以可以通过vue来实现一个全局的按钮权限指令自定义全局属性添加一个可以在应用的任何组件实例中访问的全局property，这样在引入一些第三方模块的时候，就不用每一次进行import操作，而是直接通过this。
JavaScript实现数字金额小写转大写
studentenglish的博客
07-04 3311
function numToText(number) { let AA = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖') let BB = new Array('', '拾', '佰', '仟', '萬', '亿') let reverseStr = number.split('').reverse().join...
如何查看一个textarea中输入的内容中隐藏的\t \r \n等特殊符号
studentenglish的博客
08-02 2561
场景： 今天设计一个自定义组件，实现从excel中赋值数据填入一个textarea的输入框，然后在输入框的下方用表格的形式展示出所复制的内容。 问题： 如何获取复制的内容中所有内容，以及分隔符号，进行精确分离数据？ 如果我们已经知道复制的内容中是以\t（制表符）、\n（换行符）来进行数据的分割，那么我们可以直接获取每行的数据： 但是如果我们不确定所复制的数据用了那些特殊符号进行数据分割，...
vue element-ui countdown写一个亚运会倒计时
05-22
好的，以下是一个使用 Vue 和 Element-UI 实现的亚运会倒计时： 1. 首先，需要安装 Vue 和 Element-UI： ```bash npm install vue npm install element-ui ``` 2. 在 Vue 组件中引入 Element-UI 的倒计时组件和样式： ```vue <template> <div class="countdown"> <el-countdown :time="countdown" :auto-start="false" @finish="handleFinish"> <span slot="days">{{ days }} 天</span> <span slot="hours">{{ hours }} 时</span> <span slot="minutes">{{ minutes }} 分</span> <span slot="seconds">{{ seconds }} 秒</span> </el-countdown> </div> </template> <script> import { ElCountdown } from 'element-ui' export default { components: { ElCountdown }, data() { return { countdown: 0 } }, computed: { days() { return Math.floor(this.countdown / (24 * 60 * 60 * 1000)) }, hours() { return Math.floor((this.countdown % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000)) }, minutes() { return Math.floor((this.countdown % (60 * 60 * 1000)) / (60 * 1000)) }, seconds() { return Math.floor((this.countdown % (60 * 1000)) / 1000) } }, methods: { startCountdown() { const endDate = new Date('2022-09-10T00:00:00.000Z') const now = new Date() this.countdown = endDate - now }, handleFinish() { console.log('倒计时结束') } }, mounted() { this.startCountdown() } } </script> <style> .countdown { display: flex; justify-content: center; align-items: center; height: 100vh; font-size: 24px; } </style> ``` 3. 在组件中定义一个倒计时的结束时间（即亚运会的开幕时间），并使用计算属性将倒计时的毫秒数转换为天、小时、分钟和秒。 4. 在组件的 mounted 钩子函数中调用 startCountdown 方法，该方法会计算倒计时的毫秒数并将其赋值给 countdown 变量。 5. 最后，将倒计时组件添加到模板中，并设置好样式即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值