- 博客(18)
- 收藏
- 关注
原创 echarts树状图 实现字体大小随着鼠标滚轮变大变小
3、手动给原数据每个对象塞collapsed 的值,监听点击事件,动态修改collapsed 的值然后重新setOption,保证用户每次操作都被记录下来。(其中想用expand事件来着,但是无效(vue3版本3.3.9 echart版本5.4.3))1、经查阅文档 getOption()获取的是第一次渲染后的静态配置项目。因此在监听mousewheel事件时,动态改变字体的大小的时候,会重新渲染树结构。1.遇到的问题 鼠标滚动时,树状图会立刻回到原始状态,未保留用户展开收起节点的操作后的状态。
2024-07-09 15:52:21 404
原创 【Avue upload上传组件回显文件名,并下载或打开图片】
重点就是在uploadAfter方法中添加文件名后缀,和uploadPreview方法中去掉后缀。如果小伙伴有更好的解决办法,欢迎补充~
2023-07-17 16:23:02 2130 1
原创 elementUI table表格中 type=“expand“,展开行属性展开时下方展示轮播图的交互实现
最近遇到要实现一种类似于抖音排行榜的设计的需求,在表格中展示轮播图,在这里我简单写一下实现与踩坑点。1.首先要安装swiper(最好安装5版本,高版本会有bug)(1)记得在expand-change中再初始化一遍轮播图。3.页面(组件)引入swiper并注册。5.js部分(写在method中)(2)轮播图类名要动态渲染。
2023-04-19 17:38:37 849
原创 文字两端对齐 文字平均分布在盒子中 css样式
重点就是这个属性 使文字平铺(平均铺满)盒子中 。text-align-last: justify;
2022-06-02 11:29:42 2241
原创 axios get请求时编码问题
axios做get请求时,会对参数进行编码,但不会对功能型字符进行编码所以get请求中含有这些字符时就不会参与编码导致接口出错,跨域等问题。解决方案:参数不要写在axios封装的参数对象里,get的参数直接拼接在url链接上,这时axios就不会对此进行编码!encrypt(phone: any) { return fetch.get( `${configService.service.encrypt}/encrypt.xsp?phones=${encodeURIComponen
2022-04-29 14:08:32 2310
原创 width: fit-content;的兼容性问题以及定位盒子的宽度问题
width: fit-content;的兼容性问题,以及定位的盒子未设置宽度,导致换行的问题下面是解决问题的过程解决问题下面是解决问题的过程首先我们要了解盒子定位了之后,不设置宽度,宽度是父盒子的一半这个概念。内容少于一半不会出现问题,大于父盒子的一半就会出现换行。因此我们会想到用width: fit-content;或者width: auto;去让盒子自动撑开。结果这两个是有兼容性的。目前测试了十几种机型以及浏览器,只有一个机型可能会出现问题 iphone 11 手机百度浏览器。解决问题1
2022-03-18 10:51:37 4093
原创 Vite+vue+element 之Vite打包的坑
项目中使用vite打包工具,webpack配置如下:打包报错:解决方案:修改webpack配置如下:去掉 “vue-tsc --noEmit && ”再打包,成功
2021-12-02 10:50:53 954
转载 npm使用国内淘宝镜像的方法
npm使用国内淘宝镜像的方法一、通过命令配置npm config set registry https://registry.npm.taobao.org二、验证命令npm config get registry原地址:https://www.cnblogs.com/bonelee/p/9995550.html 点击跳转.
2021-11-02 15:31:56 158
原创 vue环境简单实现动态瀑布流效果
vue环境简单实现动态瀑布流效果最近开发项目需要实现动态瀑布流效果,项目本身是vue环境,网上很难找到类似的效果,vue-waterfall插件,懂的都懂。看了源码就知道不符合我项目目前的场景。(列表是循环渲染,高度不能提前预知也不能提前获取到,因此该组件是用不了的。—看了waterfall组件示例源码的小伙伴应该清楚)。除了waterfall,其次就是用原生js写了。但是我不想用原生js写在vue项目中,过于冗长且不便维护。于是结合目前的情况我给出一个方案:tips:我们项目导致瀑布流的主要原因只是
2021-10-25 18:30:20 925 2
原创 关于table表格超长连续字段(长数字和长单词) 破坏表格布局的问题的解决方案
table表格超长连续字段(长数字和长单词) 破坏表格布局的问题近期遇到了这个问题特地去整理了解决方案给到小伙伴,希望能给有同样问题的小伙伴一些帮助首先,我们是要给到超多文本的字段显示一部分,然后剩下的用省略号代替(…),鼠标浮动上显示全部内容(title属性就行~)这一步的代码如下:.ellipsis{ overflow:hidden; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示; text-overflow:ellipsis;
2021-10-13 10:59:10 916
原创 css修改导航条样式
css修改导航条样式近期由于工作需要要修改table表格导航条样式。本人特整理出相关代码,以及最后效果,供各位小伙伴参考。具体代码如下:.xp-table-content ::-webkit-scrollbar { width:8px; height: 8px;}.xp-table-content ::-webkit-scrollbar-thumb:horizontal { border-radius:10px; background:rgba(0,0,0,0.
2021-10-12 17:00:03 996
原创 css设置文本显示行数,多出用省略号代替
css设置文字显示任意行 123…行,溢出部分用省略号代替@TOC.ellipsis{ overflow:hidden; display:-webkit-box; //将对象作为弹性伸缩盒子模型显示; text-overflow:ellipsis;//溢出部分用省略号代替 -webkit-line-clamp:1; //设置文本显示1行,想要几行把1替换掉就行 -webkit-box-orient:vert
2021-10-12 10:24:31 203
原创 左右浮动的元素,再加一个普通元素 ,如何让普通元素居中
左右浮动的元素,再加一个普通元素 ,如何让普通元素居中今天遇到了这样一个问题,父盒子是display :table ;两个子盒子分别左右浮动,但是需求需要在中间位置加上一个标题。因为用的是bootstrap导航组件,不便改组件的布局结构,所以自己加了个a标签;但是放上之后无论如何无法居中,margin: 0 auto失效。但是margin-left有用,但是title的长度不一样,所以不能固定margin-left;思考1:margin-left:50%;transform:translateX
2021-03-24 11:20:53 166
原创 uniapp坑之rich-text标签渲染富文本时video会消失.
uniapp坑之rich-text标签渲染富文本时video会消失.最近在搞uniapp项目,做视频详情页渲染时,遇到rich-text标签渲染video标签一直无法显示视频的问题。经查询上图链接 uniapp-richtext标签rich-text无法渲染,我们可以去插件市场 找uParse 富文本解析插件进行替换uParse 地址:uParse插件链接...
2020-08-01 15:11:59 3292
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人