css文字自适应宽度动态出现省略号... 在列表排行榜中通常会出现的一个需求:从左到右依次是名次、头像、昵称、徽标、分数。徽标可能会有多个或者没有徽标,徽标长度是动态的,昵称如果过长要随着有无徽标进行动态截断出现省略号。如下图布局所示(花里胡哨的底色是为了看的更清楚,咱忍忍。。。
vue.js el-tooltip根据文字长度控制是否提示toolTip 一、需求:如何判断当前文本文字是否超出文本长度,是否需要出现提示toolTip。1、表格字段鼠标放置el-popover出现 “引用主题” 的具体内容;2、定义isShowTooltip控制是否展示提示文字tooltip;3、对应的鼠标放置触发的方法实现;
Vue ElementUI中el-table表格嵌套样式问题 1、表格定义唯一值row-key="indexId"和类名:row-class-name="getRowClass"1、展开图标每条数据都展示了,实际上接口数据并不是都有children数组;1、两个表格嵌套,当父表格有children数组时子表格才展示;2、在表格嵌套后,打开子表格,高亮显示在经过子表格后对应不上;2、子表格数据少于父表格展示字段,且对应固定操作列不同;3、父表格的操作列固定在右侧影响了子表格的显示;4、滑动到表格底部时,父子表格的固定列对不齐;
关于jointjs的详细介绍 JointJS是一个专注于图形可视化的js库,用于创建交互式的图形和图表。它基于HTML、SVG(可缩放矢量图形)和CSS(层叠样式表)技术,主要用于在Web应用程序中实现可视化图形编辑器或图表展示(流程图、关系图和定制化图形)。//生成画板var paper = new joint.dia.Paper({ //生成画布});
vue.js el-table 动态单元格列合并 一个展示列表,表格中有一部分列是根据后端接口动态展示,对于不同类型的数据展示效果不一样。如果接口返回数据是’类型1‘的,则正常展示,如果是’类型2‘的数据,则合并当前数据的动态表格。3、 在表格上使用:span-method="arraySpanMethod"方法触发表格;4、在arraySpanMethod方法内接收数据处理合并;2、在表格上对要合并的单元格类型进行区分;1、先将普通表格实现,不考虑合并效果;
electron桌面应用webSoket实时弹框提示实现 1、当有弹框提示的情况时,会弹出如下提示,点击查看自动跳转到当前地址,点击关闭则关闭当前提示窗口;一、实现效果:网页端或者移动端进行了审核操作,在电脑右下角提示用户查看。3、在src文件夹下新建remind.html实现提示弹框具体内容;1、在主进程main.js中创建弹框,并确定弹框的位置;3、在登录成功后使用webSoket实时监听消息;4、主进程收到消息后触发提示弹框展示;2、登录成功后获取实时信息弹框提示;4、综上所述,即可完成桌面提示功能。2、编写弹框内容和样式;
electron项目开机自启动 2、在渲染进程login.js中,获取用户操作并localStorage存储数据,保存用户的操作;4、在主进程main.js中,收到登录后的消息,自动配置是否开机自启动;5、在渲染进程login.js中,重新登录时判断是否勾选开机自启动;3、在渲染进程login.js中,在登录成功后设置是否开机自启动;1、在渲染进程login.html中,画好界面,默认勾选;一、效果展示:界面控制是否需要开机自启动。
Electron入门 Native API : Native API让Electron有了跨平台和桌面端的原生能力,比如说它有统一的原生界面,窗口、托盘这些。Chromium : 为Electron提供了强大的UI能力,可以不考虑兼容性的情况下,利用强大的Web生态来开发界面。Node.js :让Electron有了底层的操作能力,比如文件的读写,甚至是集成C++等等操作,并可以使用大量开源的。命令行启动一下Electron,出现下图弹出则安装启动成功;4、运行项目,在终端里输入。
vue.js处理数组对象中某个字段是否变为两个字段 产品要求做一个时间步骤条,使用目前后端已返回的数据进行操作实现。时间步骤条要求日期和时间分开显示且相同日期只显示第一个日期。字段表示当前到达第几步,从0开始,对应显示数组的前几个展示。后台返回的是一个整的日期时间字段。图左边为实现效果,右边为后台返回的接口。
vue pc端/手机移动端 — 下载导出当前表格页面pdf格式 一、需求:在手机端/pc端实现一个表格页面(缴费单/体检报告单等)的导出功能,便于用户在本地浏览打印。1.将要打印的页面转换成图片( 用到的组件 html2canvas );2.然后将图片导出成PDF( 用到的组件 jspdf )。
响应式赋值Object.assign()和JSON.parse(JSON.stringify())的区别 前言:今天优化代码的时候发现了Object.assign和JSON.parse(JSON.stringify())的区别。需求:点击编辑弹出编辑框,修改后的内容点击认按钮修改后的数据更新回显到原列表。对比:Object.assign。
vue 自定义el-table穿梭框功能 一、需求描述:前段时间接到一个需求是点击做一个类似穿梭框的表格点击选中功能,弹框的左边是全部数据展示,点击表格行数据可以选中自动增加到右边的已选框,并且可以手动删除、重置选中数据。点击确定后到展示到主页面,被选中的数据打开弹框不能再次选择。
git常规操作 | 将A项目的某一分支迁移到B项目上 1.重命名分支(如果修改的分支只是在本地,没有推送到远程,只需要执行该操作即可。3.创建新分支(newdev),并把当前分支(master)内容复制到新分支(newdev)中。1.点击从...创建分支,输入要创建的新分支的名字(newdev)按下enter键确认;3.在本地新建一个分支,该分支的名称最好与项目A中新增的那个分支的名称相同以便区分;3.清理本地不存在的远程分支,如别人删除了dev,但是你本地还有,执行该条命令。5.建立远端分支(newdev)和本地分支(newdev)的关联。
vue.js 实现导入json解析成动态el-table树表格(接口文档功能) 一、需求描述:前段时间接到一个需求是做一个类似接口文档的显示功能,将一段json数据贴到里面就可以自动解析出json数据的每个字段的类型和层级关系,用element组件的树表格的形式展示,并且可以手动新增、修改和删除某个数据字段。{"name":"lemon","sex":"女","age":18,"hobby":{"hobby1":"敲代码","hobby2":"跳恰恰"},"likeArr":["水果","青菜"]}3.点击确认后树表格自动展示贴入的json数据,如下图所示;