![](https://img-blog.csdnimg.cn/c7001d8e94a041c6b0d48cbb9a723308.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue
文章平均质量分 71
vue
iatkotworld
这个作者很懒,什么都没留下…
展开
-
vue-seamless-scroll滚动组件-复制可用
vue-seamless-scroll原创 2023-03-10 15:29:31 · 1356 阅读 · 1 评论 -
vue+高德地图实现多边形范围内标点
高德地图围栏内部标点原创 2023-03-07 14:52:48 · 2220 阅读 · 2 评论 -
vue+video-player组件应用
vue中使用video-player原创 2023-01-31 16:53:37 · 1792 阅读 · 0 评论 -
vue列表无缝循环滚动
vue PC端列表循环滚动功能介绍:大致需求:整体思路:具体实现:完整代码:功能介绍:在PC端网页,包括大数据、官网、后台管理平台开发中,可能会用到这种列表循环滚动的展示。大致需求:列表可以使用数组循环遍历;每隔几秒中列表数据向上滚动一定距离,展示下一条数据;滚动到最后一条数据时重新显示第一条开始的数据(类似走马灯、banner图的循环效果);整体思路:使用两个定时器嵌套实现;需要两个相同容器存放同样内容,实现无缝衔接效果;具体实现:完整代码:............原创 2022-05-26 11:25:39 · 2592 阅读 · 0 评论 -
vue+vant列表-复制可用
vue+vant列表-复制可用vant完整代码vantvant官网完整代码<template> <div> <!-- 外壳标签 --> <div class="page-body c-list-body"> <!-- 下拉刷新组件 --> <van-pull-refresh v-model="refreshLoading" @refresh="onRefres原创 2022-05-18 14:22:10 · 1369 阅读 · 0 评论 -
Element Select 选择器自定义样式在多选时出现样式错乱解决
Element Select 选择器自定义样式在多选时出现样式错乱解决问题描述开发解决方法问题描述在使用el-select组件时,需求提出的要求:1、select可以随便设置高度(不受size属性制约);2、允许select多选显示tag并使高度自适应;开发设置select高度样式,注意,这里使用的是scss修改样式:<div class="elSelectBox"> <el-select v-model="valMult" multiple原创 2022-02-26 11:17:22 · 4386 阅读 · 11 评论 -
Element-ui组件踩坑记录
Element-ui组件踩坑记录-继续踩坑继续记录1.组件交互页面抖动:出现问题:解决方法:2.组件属性:出现问题:问题原因:解决方法:3.组件样式修改:出现问题:问题原因:解决方法:4.select下拉框:出现问题:问题原因:解决方法:1.组件交互页面抖动:出现问题:组件操作时,页面会出现抖动情况,文字会模糊;解决方法:1)Checkbox 多选框切换:.el-checkbox__inner::after { transition: none!important;}2)表单验证信息出原创 2022-02-26 14:14:01 · 835 阅读 · 0 评论 -
Element-ui下拉框多选样式——宽高自适应
Element-ui下拉框多选样式——宽高自适应高度自适应宽度自适应高度自适应在element-ui的文档中可以看到,多选时,高度自适应是默认就有的展示方式,select组件不需要设置额外属性,如下图显示:<el-select class="select" v-model="value" multiple placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :la原创 2022-09-27 16:05:46 · 4261 阅读 · 1 评论 -
wangeditor富文本引用、表格使用问题
wangeditor富文本组件问题问题介绍:具体情况:解决方案:css修改说明:问题介绍:本文记录了wangeditor开发中遇到的一个问题,之前在使用wangeditor的时候因为时间紧张没有过多研究,后续项目测试,测出来发现编辑器中添加的表格和引用,在展示时和编辑器里显示的样式不一样,这里记录一下解决思路。具体情况:在编辑器中显示效果:编辑器在控制台中显示效果:可以看到该引用功能是有样式的,标签名为"blockquote"。打印出当前编辑器的内容:可以看到只有标签名没有标签样式,所以原创 2022-02-18 11:11:46 · 2858 阅读 · 1 评论 -
wangeditor富文本组件-复制可用
wangeditor富文本组件功能介绍:整体思路:具体实现:一、安装:二、引入并使用:功能介绍:本文记录了wangeditor最基本的用法,其他更多用法可去官网查找。整体思路:Typescript 开发的 Web 富文本编辑器, 轻量、简洁、易用、开源免费(摘自官网)。具体实现:一、安装:npm i wangeditor --save二、引入并使用:<template> <div> <div ref="richText" style="height:原创 2021-12-28 09:45:45 · 676 阅读 · 0 评论 -
vue移动端文件预览
vue移动端文件预览前言:整体思路:具体实现:一、外壳(vViews.vue):二、文件预览:1.图片预览:2.pdf文件预览:3.docx文件预览:4.excel表格预览(xls、xlsx格式表格):5.txt文件预览:三、补充外壳文件css样式:前言:最近遇到一个移动端需求,要求在移动端预览上传的附件,在网上找了很多资料,最后参考CSDN博主「蛋蛋fighting哈湫」的原创文章实现了功能,并结合自己的项目情况,整理了这份文档。原文链接:https://blog.csdn.net/u0124396原创 2021-12-10 16:13:22 · 8901 阅读 · 13 评论 -
vue filters过滤器与字典项
vue filters过滤器与字典项功能介绍:大致需求:具体实现:一、过滤器js文件:二、引入并使用:功能介绍:在项目开发中,会遇到后台返回值为数字、字母等格式数据,具体显示则需根据字典项处理。可使用自定义过滤器,进行文本格式化。大致需求:使用公共js文件,调用减少代码量;考虑不同字典项key值对应不同,增加传参处理;具体实现:一、过滤器js文件:可存储在utils文件夹下。export default { filters: { /** * da原创 2021-12-06 15:27:17 · 1908 阅读 · 0 评论 -
vue移动端拖拽悬浮按钮
vue移动端拖拽悬浮按钮功能介绍:大致需求:整体思路:简单效果展示:具体实现:一、position:fixed布局:二、touch事件绑定:三、页面引入:功能介绍:在移动端开发中,实现悬浮按钮在侧边显示,为不遮挡页面内容,允许手指拖拽换位。大致需求:按钮在页面侧边悬浮显示;手指长按按钮,按钮改变样式,允许拖拽改变位置;按钮移动结束,手指松开,计算距离左右两侧距离并自动移动至侧边显示;移动至侧边后,按钮根据具体左右两次位置判断改变现实样式;整体思路:按钮实行position:fixed原创 2021-12-03 14:00:26 · 7737 阅读 · 4 评论 -
vue+vant文件上传组件
vue+vant文件上传组件功能介绍:大致功能介绍:整体思路:简单效果展示:功能介绍:大致功能介绍:整体思路:简单效果展示:原创 2021-08-04 08:44:25 · 4349 阅读 · 3 评论 -
在vue中使用echarts
vue+echarts自定义组件功能介绍:具体实现:一、安装echarts依赖:二、全局引入:三、自定义组件:四、增加宽高自适应:五、全局引用:六、使用:功能介绍:在vue开发中,希望实现eharts图表展示,节省init初始化、resize自适应代码。具体实现:一、安装echarts依赖:npm install echarts -S或者使用淘宝的镜像npm install -g cnpm --registry=https://registry.npm.taobao.orgcnpm inst原创 2021-08-02 14:45:31 · 225 阅读 · 0 评论 -
vue+scss 开发常用混合器(自用,持续更新)
vue+scss 开发常用混合器(自用)原创 2021-08-02 13:58:13 · 250 阅读 · 0 评论 -
vue列表固定列滚动
vue列表固定列滚动原创 2021-07-10 15:55:46 · 1470 阅读 · 1 评论 -
vue移动端touch拖拽排序
vue移动端touch拖拽排序功能介绍:大致需求:整体思路:简单效果展示:具体实现:一、display:flex+v-for布局:二、touch事件绑定:三、卡片移动:四、获取手指所在位置:五、操作数组(删除或插入元素):六、手指离开屏幕:功能介绍:在移动端开发中,希望实现类似支付宝应用管理页面的可拖拽排序交互。大致需求:卡片按照一定顺序排序,超出横向范围换行显示;手指长按卡片,可进行拖拽控制,卡片追随手指移动;卡片移动到相应位置,该位置上的卡片向后或向前更换位置,当前位置空出;松开手指,卡原创 2021-03-15 20:18:02 · 1599 阅读 · 9 评论