![](https://i-blog.csdnimg.cn/direct/93e114758b084965b4db830db4638e11.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue3实战
文章平均质量分 58
分享一些vue3组件案例
蒾酒
热爱编程、熟悉全栈开发,商务合作或者有开发需求可加文章底部vx,期待与大家共同进步。
个人gitee主页:https://gitee.com/mi9688-wine
展开
-
vue3+el-upload实现图片数量、格式、大小校验,压缩上传
【代码】vue3+el-upload实现图片数量、格式、大小校验,压缩上传。原创 2024-07-20 01:17:19 · 237 阅读 · 1 评论 -
vue3实现无缝滚动列表(大屏数据轮播场景)
vue3目前可以通过第三方组件来实现这个需求。下面介绍一下这个第三方滚动组件--是一个用于 Vue 3 的插件,用于实现无缝滚动的组件。它可以让内容在水平或垂直方向上无缝滚动,适用于展示轮播图、新闻滚动、图片展示等场景。:在内容超出容器宽度或高度时,可以实现自动无缝滚动,形成连续的视觉效果。:提供了多种配置选项来控制滚动的速度、方向、内容显示方式等。:支持响应式设计,可以根据父容器的大小自动调整内容的显示和滚动效果。:内容可以是任意的 Vue 组件或 HTML 元素,可以自定义每一项的样式和内容。原创 2024-07-14 02:36:05 · 734 阅读 · 2 评论 -
vue3+ECharts实现可视化中国地图
echarts在4.9.0版本以后移除了中国地图,所以如果的你的版本高于4.9.0就需要手动导入中国地图。版本低于或者等于4.9.0则不需要导入。切换回最新版echarts依赖包下是没有map目录的。目前echarts的最新版本为5.5.1。这里我切换回最新版本。原创 2024-07-14 00:51:06 · 493 阅读 · 0 评论 -
el-scrollbar实现自动滚动到底部(AI聊天)
chatGPT聊天消息展示滚动面板,每次用户输入提问内容或者ai进行流式回答时需要不断的滚动到底部确保展示最新的消息。采用element ui 的el-scrollbar作为聊天消息展示组件。通过vue的watch来监听聊天消息列表的变动。通过操作dom来实现滚动到底部。原创 2024-07-08 19:14:19 · 417 阅读 · 0 评论 -
vue列表信息展示中新增数据,与编辑数据页面复用,降低重复代码
因为底层是基于el-dialog组件封装的弹窗关闭按钮默认是显示的,关闭按钮默认点击事件就是关闭自身(把el-dialog的v-model的值修改为false)但是我们是希望这个el-dialog组件是一直显示的,因为我们是基于el-dialog封装的一个弹窗表单组件,我们是直接控制这个弹窗表单组件的显示的,解决方案:根据标记是添加还是修改的属性值做判断,我这里的属性是staffId,这个的值存在就是编辑,为默认的null就是添加。点击保存按钮在添加时调用提交添加的函数,编辑是调用提交编辑的函数。原创 2023-12-17 16:43:39 · 850 阅读 · 2 评论 -
vue实现通用分页控件,支持前端分页、后端分页。
如果是后端做分页的话,就传递count属性值这个属性代表总数据量,需要用来计算总页数如果是前端做分页,就传递itemList属性值,这个属性表示总数据数组,根据这个数组的长度可以计算页数,根据页码可以对数组进行截取并把截取的单页数据通过自定义事件传递给父组件,父组件更新列表数据渲染itemList: {//数据列表},count: {//有值则分页功能后端实现},})通过自定义事件可以把页码或者是分页后的数据传递给父组件。原创 2023-12-18 22:20:46 · 1107 阅读 · 0 评论 -
Element UI之el-tabs的样式修改字体颜色、下划线、选中/未选中
注意事项:一定要在 不然修改的样式不会覆盖生效。原创 2023-12-24 00:09:13 · 8317 阅读 · 1 评论 -
el-upload上传一张图片后显示缩略图并隐藏添加图片按钮
原理就是:当已经正确上传了一张图片后,noUpload会设置为true,表示不再上传,这时el-upload组件会被添加一个类 .disabled,接下来直接样式穿透,把匹配到的包含disabled类的.el-upload--picture-card元素隐藏掉。核心代码: :class="{ disabled: noUpload }"原创 2023-12-16 00:07:28 · 2054 阅读 · 4 评论 -
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
我自己封装了弹窗组件设置定位position: fixed;当你把放在里面神奇的事情就会发生。一定不要把放在里面。开启阴暗背景(默认): :modal="true"阴暗背景::modal="true"默认就是开启。这时候关闭阴暗背景::modal="false"关闭阴暗背景::modal="false"可以看到在弹窗还是有一圈黑色阴影的。可以看到列表的底线居然覆盖到了弹窗。原创 2023-12-15 17:39:54 · 1095 阅读 · 1 评论 -
vue3简单快速实现主题切换功能
一般把该css文件放在styles目录下的theme.css里面/* 浅色色主题 *//* 暗色主题 *//*页面级背景色*//*菜单导航栏级背景色*//*按钮控件等小组件背景色*/这种实现主题切换的原理就是通过 HTML 的 data 属性和 CSS 变量来动态改变页面的样式,从而实现不同主题下的样式切换。当用户切换主题时,只需改变 HTML 标签上的 data 属性的值,页面的样式会自动更新为对应主题下的样式。原创 2024-06-01 13:49:38 · 1521 阅读 · 9 评论 -
vue.js中v-show,v-if的区别,以及使用场景
v-show适用于频繁切换显示状态的场景,而v-if适用于需要根据条件动态地添加或移除元素的场景。原创 2023-12-20 23:22:54 · 591 阅读 · 1 评论 -
vue3+ts项目搭建
初始化vue项目,安装常用依赖,基础目录介绍。原创 2024-02-19 23:13:55 · 1129 阅读 · 0 评论