草庐IT

Vue-Instant

全部标签

vue3 + Element Plus自定义音频audio样式及控件

1、原生的audio控件写法及效果图:由于audio标签原生样式不能修改UI样式,所以需要隐藏原生audio标签,重新写一个控件进行操作audio2、自定义写法及效果图:代码实现:先封装一个组件audioPlayer.vue。注意:需提前安装了ElementPlustemplate>divstyle="margin-top:200px">audio@timeupdate="updateProgress"controlsref="audioRef"style="display:none">source:src="fileurl"type="audio/mpeg"/>您的浏览器不支持音频播放/au

Vue 项目中使用WebSocket 消息推送

一、功能需求1.这是我在后台管理项目中使用到的,主要的作用是搞一个消息提醒的功能。2.主要有右上角的提示和有下角的消息弹框。3.主要实现的功能是如果用户有未读的消息,那么首次登录就弹框,如果用户关闭了页面,那么再次刷新页面的时候,也不再弹框,意思就是一个账户没有退出之前,也没有实时消息推送的时候,只弹一次框。4.如果用户点击了未读消息,那么就会将此条消息置位历史(已读)。页面展示:二、页面代码备注:我的是后台管理系统(用的是vue-element-admin),第一次写websocket,所以我写在了src->layout->AppMain.vue文件下面:importMessageRemin

Vue路由传参三种方式

Vue路由传参三种方式params传参路由属性配置传参query传参一、params传参this.$router.push({ name:"admin",     //这里的params是一个对象,id是属性名,item.id是值(可以从当前组件或者Vue实例上直接取) params:{id:item.id}})//这个组件对应的路由配置{   //组件路径 path:'/admin',   //组件别名 name:'admin',   //组件名 component:Admin,}通过params传递参数,如果我们想获取id的参数值,可以通过this.$route.params.id这种方式

《vue3实战》运用push()方法实现电影评价系统的添加功能

目录前言电影评价系统的添加功能是什么?电影评价系统的添加功能有什么作用?一、push()方法是什么?它有什么作用?含义:作用:二、功能实现这段是添加开始时点击按钮使添加框展示的代码部分:这段是添加过程中结合elmentplus组件实现的添加框的代码部分: 这段是添加过程中实现添加逻辑方法的代码部分:三、最终效果图添加按钮所在位置效果图:添加框效果图:未添加用户信息时的效果图: 添加用户信息过程中的效果图: 添加用户信息后的效果图:四、代码块总结前言电影评价系统的添加功能是什么?电影评价系统的添加功能是指提供给用户添加新电影评价和信息的功能,可以给用户和管理员更优质的系统体验。电影评价系统的添加

vue+elementUi获取滚动条位置、判断是否存在滚动条、addEventListener、removeEventListener、document、window、scroll、client

文章目录1、vue2获取滚动条位置2、vue3获取滚动条位置3、解析4、判断是否存在滚动条1、vue2获取滚动条位置document方式exportdefault{ name:"demo", data(){ return{ scrollTopVal:0, isScroll:0 }; }, mounted(){ this.$nextTick(()=>{ //开启滚动条监听 document.addEventListener("scroll",this.scrollTop,true); letelVal=document.getElementsByClassName

基于Java+SpringBoot+vue前后端分离夕阳红公寓管理系统设计实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》Java微信小程序项目实战《100套》​ 系统介绍:如今社会上各行各业,都在用属于自己专用的软件来进行工作,互联网发展到这个时候,人们已经发现离不开了互联网。互联网的发展,离不开一些新的技术,而新技术的产生往往是为了解决现

vant官网-vant ui 首页-移动端Vue组件库

Vant是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面。鉴于百度搜索不到vant官方网址,分享一下vant组件库官网地址,方便新手使用vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/通过npm安装在现有项目中使用Vant时,可以通过npm或yarn进行安装:#Vue2项目,安装Vant2:npmivant-S#Vue3项目,安装Vant3:npmivant@next-Svant组件库特性提供60多个高质量组件,覆盖移动端各类场景性能极佳,组件平均体积不到1kb(min+gzip)单元测试覆盖率90%+,提供稳定性保障完善的中英

基于Java+SpringBoot+Vue前后端分离青年公寓服务平台设计和实现

博主介绍:✌全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌🍅文末获取源码联系🍅👇🏻 精彩专栏推荐订阅👇🏻 不然下次找不到哟2022-2024年最全的计算机软件毕业设计选题大全:1000个热门选题推荐✅Java项目精品实战案例《100套》Java微信小程序项目实战《100套》​系统介绍:传统信息的管理大部分依赖于管理人员的手工登记与管理,然而,随着近些年信息技术的迅猛发展,让许多比较老套的信息管理模式进行了更新迭代,房屋信息因为其管理内容繁杂,管理数量繁多

Element VUE修改 el-input和el-select长度

 没有设置样式之前,采用默认样式,界面如下: 模拟代码如下有效无效 为了美观需要修改下样式,使文本框与下拉框的长度一致第一种:添加style属性,采用行内样式修改长度style="width:200px" 第二种:添加class属性,采用内部样式 stule标签中设置长度 .test{ width:200px; }第三种:找到element-ui.scss,采用外部样式//设置form表单输入框,下拉框长度统一.el-form-item{.el-input{width:200px;}.el-select{width:200px;}}