dell_Luo的博客

原创 element-ui el-tabs蓝条样式修改

底部蓝条的长度是根据文字长度修改的，并且蓝条中间没有间隔，此时蓝条的长度就需要动态计算。element-ui el-tabs基础蓝条样式。点击切换tab时计算蓝条长度修改样式。

原创 vue+element 查看详情页时后端返回编码,转成中文

vue+element 查看详情页时后端返回编码,转成中文有两种,一种是input返回的是编码需要转成中文还有一种是select返回的是value 显示时展示成lableinput的:第一种是当要转的判断条件少时可以直接 获取到字段if判断赋值改变第二中是当转换条件多的时候并且是一个字段多个编码 对应转多个中文时:let arrs = []let roles = this.historyList.legalPersonIdType.split(',')let objs={ "JMSFZ

原创 vue 动态路由使用name 跳转,直接跳到登录页

出现这个问题大多数是由于用name跳转的时候,没携带params传参, 或者就是params为null或者空导致的,可以看下下面的案例这是我的路由:如果路由是这种,跳转时需要使用 name+params 传参数let routeData = this.$router.resolve({name: ‘commercialPreview’,params: { projectType: “111”,suid:“222” }})window.open(routeData.href, ‘_blank’

原创 element-ui select框一进入页面校验报错

element-ui select框进入页面校验报错如何解决呢就是把select框绑定的字段 初始设为null ,不能设置为字符串

原创 vue + echarts请求接口赋值后动画效果消失

今天发现了echarts折线图没有了初始加载时的动画效果,排查后发现是因为我们请求接口后,动态的赋值后动画效果没有了,解决办法就是在动态给echarts赋值前this.myChart.clear();初始化一下就可以啦

原创 vue+echarts鼠标hover时柱状图设置渐变背景

想要实现的效果:只需要在tooltip里设置axisPointer即可axisPointer : { type : 'shadow', shadowStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(0, 253, 255, 0.6)' }, { offset: 1, color: 'rgba(73, 201, 229, 0)' }, ]), w

原创 jquery+video 获取视频第一帧做视频封面

直接在视频资源后添加#t=0.1 即可 由于每个视频资源不同有的视频前一两秒是黑屏的所以时间可自定义例如图上我直接放的#t=2 不是第一帧但是可实现封面效果最终效果图如下:如果调整了秒数还是不出来,有可能是video引用的插件样式影响了,如果有多个video视频资源切换不同的tabs时 第一帧封面消失了,可能是被currentTime()影响了...

原创 element-ui+vue el-table表头以及表格合并

element-ui+vue el-table表头以及表格合并需要达到的效果(有三个开标室,两个评标室,一个评审室将相同类型的表格合并)放到methods中:objectSpanMethod({ row, column, rowIndex, columnIndex }) { if (columnIndex === 0) { if (rowIndex ==0) { return { rowspan: 3, colspan: 1

原创 jsp+jquery jsp封装头部导航后,点击导航栏对应页面,页面跳转,但对应导航栏不高亮

一般我们会使用$(this).addClass(“add”).siblings().removeClass(“add”);被点击li添加样式，移除兄弟样式这样的方法.可是我们前端把写好的html页面发给后端集成jsp后失效了,造成这样的原因是jsp页面,头部,底部,内容部分分开封装再集合到一起,导航栏点击后地址栏改变,跳转后会刷新页面,所以使用上面这种方法,部分情况会不奏效.所以提供以下一个简单的方法可解决此问题首先我们在导航栏,点击跳转的地方使用type拼接一个参数,我这里拼的是下标var u

原创 vue+elementui 列表添加radio单选框选择 以及单选框数据返显

直接贴代码,首先给table列表添加radio单选:需要用(需要使用template包裹起来,列表中radio数据返显主要是v-model绑定时直接写成row.参数就可以了)<el-table-column prop="dataStatus" label="禁用状态" align="center"> <template v-slot="{ row }"> <el-radio-group v-model="row.dataStatus" @change=

原创 echarts地图 湖南|陕西|北京|贵州等全国各个地区地图

此篇先贴一个湖南的:点击打开此链接搜索你想找的地区http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5复制json后在浏览器里打开紧接着ctrl+a ctrl+c然后再浏览器中搜索出一个json在线解析,将粘贴的内容复制进去,等解析完毕把解析过后的数据复制在代码中新建一个js文件,然后把解析过后的数据粘贴进去,此步骤是为了看清json数据,

原创 jquery+html 前端页面模拟模糊搜索,搜索到的内容高亮展示

包含搜索内容的效果:没有匹配内容的效果:html代码:贴上来这张html是为了让大家看到结构 五条数据为一组js代码(需要先引入jquery):<script> //获取地址栏参数//可以是中文参数 function getUrlParam(key) { // 获取参数 var url = window.location.search; // 正则筛选

原创 jquery+video 鼠标滑动标签切换video中的视频资源,暂停未播放视频

效果视频:https://v.qq.com/x/page/k3240mov9xh.htmlhtml代码:<div class="videoBox"> <video id="my-video" class="video-js" controls preload="auto" width="783" height="523" poster="" data-setup="{}"> <source src="http://vjs.zencdn.net

原创 jquery 文字上下轮播滚动效果

实现的效果:html代码:<div class="contentNotice"> <ul> <li><img src="../img/notice.png" alt=""></li> <li> <div class="scrollDiv" id="s1"> <ul class="conten

原创 jquery用ul li 模拟一个简单的select下拉列表,鼠标hover展开(箭头样式上下切换)

直接贴代码: <div class="mainFooter"> <img src="../img/footer.png" alt="" class="footer_img"> <div class="footerSelect"> <ul> <li>国家部委<img src="../img/xjt.p

原创 vue+elementui v-print打印时预览的页面多一张空白页

这是更改前的效果,多了一张空白页:先贴一下打印的代码:解决方法(新添加一个style):主要内容:将margin设置为0即可

原创 vue+elementui $message不解析＜br＞

接口返回带< br >的message信息,放到$message提示框里后不解析< br >的解决方法:res.message是接口返回的内容带< br >,添加上dangerouslyUseHTMLString:true后 < br >被解析解析后的效果:谢谢大家...

原创 vue+element 调列表接口未返回分页内容,前端页面分页

分页内容: <div class="ui-pagination"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40, 50]" :pag.

原创 echarts提示框标题自定义数据总合

echarts提示框标题自定义成数据总合这是自定义前鼠标hover上去提示框的内容:这是想要达到的效果 (增加一个交易总数,交易总数展示的数据是(房建工程+园林工程+市政工程+水务工程)数据的和)直接贴代码截图:tooltip: { trigger: 'axis', formatter: function (params, ticket, callback) { v

原创 react路由跳转

1. 路由的基本实现1.1. 路由配置的一般流程在实现理由的时候，要进行包的安装和导入安装: npm install react-router-dom导入: import { BrowserRouter as Router, Route, Link } from 'react-router-dom'内容展示在哪个位置在 Rou...

原创 echarts 堆叠柱状图设置圆角 点击隐藏最上方的柱状图后,下面的柱状图不是圆角

直接贴上我的解决方法:html里写的解决方法页面效果图2隐藏带调掉最上方的数据后页面效果图1

原创 vue 点击ul里面的li,找到被点击的li,打印出被点击li里的内容并改变样式

vue 点击ul里面的li,找到被点击的li,打印出被点击li里的内容并改变样式直接贴上我的代码:html里的代码点击事件我这里是给被点击的li 给改变了背景颜色以及字体颜色

原创 ul li事件委托

原创 redux

原创 js数组原型的方法

js数组原型的方法方法都有什么呢？功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入方法都有什么呢？1.join()...

原创 react 生命周期函数

react 生命周期函数初始化阶段:getDefaultProps:获取实例的默认属性getInitialState：获取每个实例的初始化状态componentWillMount：组件即将被装载、渲染到页面上render：组件在这里生成虚拟的DOM节点componentDidMount：组件真正在被装载之后运行中状态：componentWillReceiveProps：组件将...