zuo_zuo_blog的博客

原创 css左右两列/左中右三列自适应布局

一、实现左边固定，右边自适应实现思路：1.先设置左边的宽度，让盒子左浮动；2.设置右边的盒子，margin-left: 左边盒子的宽度。<!-- 左边固定，右边自适应 --> <div class="content"> <div class="left"></div> <div class="right">12</div> </div>.left{ width: 400

原创 iframe父子组件通信

【代码】iframe父子组件通信。

原创 判断是否有值，0也是有值的情况

js判断是否有值

原创 解决echarts刷新不重绘

echart图表的一些问题

原创 js数组对象去重

js

原创 js 判断对象是否为空

js

原创 antd的input输入框超出内容划过显示完整提示

<Tooltip placement="bottom" title={ <span style={{ color: '#979898' }}> {text} </span> } visible={record.popVisible} arrowPointAtCenter..

原创 antd多选下拉框一行展示

1.利用浮动原理设置下拉框的最大高度为一行的高度，然后超出的部分隐藏。.@{ant-prefix}-select-multiple .@{ant-prefix}-select-selector { max-height: 32px; overflow: hidden; }这种方式存在的弊端是如果有2个选项，一个很短一个很长，那么只能看到很短的值，长值被隐藏，会剩余很大的空白。2.flex布局将下拉框选项放到一行显示，如果超出了下拉框长度则隐藏。默认的选项是采用float浮动显

原创 ant.design组件Table嵌套子表格（动态数据）

import React, { Component } from 'react'import { Table } from 'antd';const dataSource = [{ busi_name: "指标用户1103 ", prov_name: "西藏", task_id: 7911, item: [{ busi_name: "指标用户1103 ", log_id: 8955, prov_name: "西藏",

原创 修改ant-design表格hover的颜色和取消hover变色

tr:hover:not(.ant-table-expanded-row)不过这里从来没有见过这种用法，这里记录一下：not() 匹配不符合一组选择器的元素，就是当元素有ant-table-expanded-row样式的时候，不会触发这个hover的样式。例子.tableGroup .@{ant-prefix}-table-tbody > tr.cuhk-nur-event-table-row:hover:not(.showBlueGroup) > td {background: #f.

原创 深拷贝和浅拷贝

//浅拷贝function shallowClone(data) { var cloneData ={} for(var i in data) { if(data.hasOwnProperty(i)) { cloneData[i] = data[i] } } return cloneData}//深拷贝 浅拷贝+递归function deepClone(data){ var cloneData ={} for(var i in data) {

原创 Echart多个y轴的设置方法

1.在yAxis中设置多个对象就是多个y轴，设置位置position在左边还是右边axisTick：y轴刻度线axisLine：y轴线splitLine：是否显示网格yAxisIndex：择index为1的Y轴作为参考系 yAxis: [{ position:'left', type: 'value', min: 0, max: 260, interval: 40,

原创 TimePicker开始时间不能大于结束时间

return ( <div> <div> <TimePicker format={'HH:mm'} placeholder='' className="am-ml-10" value={text[0] ? m...

原创 overflow的属性添加的滚动条在移动端不起作用解决方案

滚动条组成::-webkit-scrollbar 滚动条整体部分::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）::

原创 React子组件修改父组件数据

React子组件修改父组件数据子组件class LookDetail extends Component { constructor(props,context) { super(props,context) this.state = {}; } back=()=>{// 子组件的点击事件 this.props.changeData() // 这个changeData()就是激活父组件的方法，可以传值 } render() { const {

原创 JS获取元素的高度

1.offsetHeightvar div = document.getElementById('demo');console.log(div.offsetHeight); // 244 注意这里返回的值不带有单位offsetHeight的值包括元素内容+内边距+边框offsetHeight = content + padding + border = 200 + 20 * 2 + 2 * 2 = 2442、clientHeightvar div = document.getElementBy

原创 react antd Table动态合并单元格

原始数组const data = [ { key: '0', name: 'John Brown', age:22, address: 'New York No. 1 Lake Park', tags: ['nice', 'developer'], }, { key: '1', name: 'John Brown', age: 42, address: 'London No. 1 Lake Park', tags:

原创 ES6之reduce用法

arr.reduce(function(prev,cur,index,arr){arr表示原数组prev表示上一次调用回调时的返回值，初始值initcur表示当前正在处理的数组元素index表示当前正在处理的数组元素的索引},init)1.求数组项之和var arr = [1,2,3,4,5,6];var sum = arr.reduce(function (prev, cur){ return prev + cur;},0)2.求数组项最大值var max = arr.redu

原创 Antd Table使用时候数据渲染多出几行的问题

添加行索引rowKey，rowKey后面写string是给一个赋值，但是table却是给多个加上key不过可以使用函数：1、给函数附上_id当key；2、给函数附上当前行的index当key；1rowKey={(record,index)=>record._id}2rowKey={(record,index)=>index}...

原创 JS下载文件到本地

//下载excelasync getDownload(ctx, formData, t) { let params = { path:'INeonatalReportRecordService/download', data: formData, } // let result = await ctx.Api.api.post(params); let xhr = new XMLHttpRequest(); let fil...

原创 如何调换antd中Modal对话框确认按钮和取消按钮两个按钮的位置

原创 JS 中判断数据类型是否为 null、undefined 或 NaN

https://www.cnblogs.com/cckui/p/11507711.html

原创 hook中使用ref使用

对于antd的fom表单hook使用refimport React, { useState, useEffect, useRef } from ‘react’; constdateRef = useRef();dateRef.current.setFieldsValue({targetCompletionDate: moment(recordTime)});父组件： 引入 useRef 声明ref的名字

原创 JS控制只能输入数字并且最多允许小数点1位（正则）

function checkPrice(obj){ obj.value = obj.value.replace(/[^\d.]/g,""); //清除“数字”和“.”以外的字符 obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的 obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); obj.val

原创 vue 动态路由/路由权限 解决方案

https://www.jianshu.com/p/0167cc3546fehttps://www.cnblogs.com/webqmzm/p/13263916.html

原创 js获取地址栏参数

1、Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问属性名 作用 hash 设置或返回从井号 (#) 开始的 URL（锚）。 host 设置或返回主机名和当前 URL 的端口号。 hostname 设置或返回当前 URL 的主机名。 href 设置或返回完整的 URL。 pathname 设置或返回当前 URL 的路径部分。 port 设置或返回当前 URL 的端口号。 pr.

原创 BFC运行机制

一、BFC概念BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。二、触发条件body 根元素 浮动元素：float 除 none 以外的值 绝对定位元素：position (absolute、fixed) d

原创 position的属性

1.position: relative;相对定位不影响元素本身特性，不会使元素脱离文档流，没有定位偏移量时对元素无影响（相对于自身原本位置进行偏移），提升层级（用z-index样式的值可以改变一个定位元素的层级关系，从而改变元素的覆盖关系，值越大越在上面，z-index只能在position属性值为relative或absolute或fixed的元素上有效。） （两个都为定位元素，后面的会覆盖前面的定位）2.position: absolute 绝对定位使元素完全脱离文档流（在...

原创 float浮动时引起父级塌陷的解决办法

一、父级塌陷的原因：网页布局时用到float浮动属性，只要父级元素下的子元素浮动了，肯定会影响父级元素的高度。假设父级元素下有十个子元素，我们无论是全部浮动还是只浮动了一个元素，都要对父级元素采取措施防止塌陷。如果你只浮动了一个子元素，让这个浮动的子元素高度在它同级里时最高的，运行一下会发现父级塌陷了。二、解决方法：1、给父级元素定义一个死高度不推荐这种方法。高度无法确定，不能从本质上解决问题。2、在最后一个子元素后加一个空的div，给他添加样式clear，清除两侧浮动这种方法也很有

原创 兼容ie浏览器总结

一、搭建vue项目在ie浏览器运行不出来安装babel-polyfillnpm install babel-polyfill --save-dev 或者 cnpm install babel-polyfill --save-dev然后在入口main.js文件引入：import ‘babel-polyfill’，我是用了官方脚手架vue-cli，还要修改配置文件，网上一般说的是修改webpack.config.js在module.exports里添加： entry:{ ap

原创 vue中添加请求头配置解决Ie浏览器缓存未清除问题

vue配置请求头，设置请求拦截项目中要求兼容ie浏览器，但是当使用Ie浏览器的时候，会出现数据更新了，但是接口请求数据不刷新的情况，如下关键代码可以解决 if (config.method === 'get' || config.method === 'GET') { config.params = { _t: Date.parse(new Date()) / 1000, ...config.params } }import axios from 'a

原创 解决flex布局不兼容ie问题

以下浏览器支持flex布局方式IE10+、Edge、Firefox 2+、Chrome 4+、Safari 3.1+以下浏览器支持标准的flex布局方式（不需要加私有属性前缀）Edge、Firefox 28+、Chrome 29+、Safari 9+想要支持ie低版本同时使用，外布局flex，内布局floatdisplay: flex;float: left;div{ display: flex; div{ float: left; } }

原创 NavMenu 在折叠之后,鼠标滑过menu,在其他浏览器没有错误,但是在IE下,报错.Error in v-on handler: “TypeError: 对象不支持此操作“

一、bugIE系列浏览器 el-menu鼠标滑过报错：Error in v-on handler: “TypeError: 对象不支持此操作”二、解决修改element源码目录 node_modules\element-ui\lib\element-ui.common.js直接在第一行添加如下代码/* eslint-disable */(function(window) { try { new MouseEvent('test'); return fal

原创 简单谈谈el-upload文件上传问题

1.需求因为先不要上传服务器，而是选中文件，最后以FormData形式传递给后台2.说一下el-upload的属性与方法，也是解题的关键action=""是指上传莫某个服务器，我这里没用直接上传就用#表示accept=“.apk” 限制选择文件的类型。因为我这里是还没上传服务器就要提前校验，用不了before-uploadon-preview 是点击文件返回的信息，这里没用到on-remove 是删除文件返回的信息multiple 是否支持多选文件，布尔类型on-change 是文件状态改变

原创 echarts可视化适配方案

(function flexible(window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSize = (12 * dpr) + 'px

原创 Echarts配置项介绍

配置项：1.title：组件标题2.tooltip：提示框组件触发类型：tooltip.trigger = ‘item’ 图形触发，散点图饼图tooltip.trigger = ‘axis’ 坐标轴触发，柱状折线图tooltip.trigger = ‘none’ 不触发3.legendlegend: {formatter: function(name) {return '前面 '+name //格式化文本},bottom:0,top:30,left:20,right:10

原创 vue中父子传值修改props传进来的值

vue是单向数据流，一般我们也不会在子组件里面修改父组件传进来的值，但总有需要修改的时候。如果传进来是个数组，属于引用类型，修改子组件相当于把父组件也同时修改了，所以没有报错，如果是个基本类型的数据直接修改那么vue会报错。在子组件修改props的方法：1. 子组件data中拷贝一份，注意引用类型需要深拷贝，根据需求可以watch监听data() { return { newList: this.list.slice() }},watch: { list(

原创 使用 vue-router 之导航守卫 + meta 实现不同的用户角色具有不同的页面访问权限的功能

个人感觉很完整的一篇https://blog.csdn.net/a378113472/article/details/106240663或者参考https://blog.csdn.net/m0_37727198/article/details/113885315

原创 vue之watch 深度监听

今天做表单提交功能需求的时候接触到了Vue中的 watch监听方法，它可以用来监听vue实例上的数据变动。绑定按钮的disabled设定watch监听，deep:true 设置深度监听 当telphone值发生变化时触发handler方法注意：这里的function不能写成箭头函数，不然this将不在此组件内https://cn.vuejs.org/v2/api/#watchhandler函数中的意思就是每次telphone中数值发生变化时，都对其进行格式校验一次，当格式正确是，按钮.

原创 微信小程序跳转到外部链接

<web-view src="https://www.baidu.com/"></web-view>那比如这个跳转到www.baidu.com 就是行不通的了，只能是自己在开发的时候玩玩（在开发者工具中点设置-项目设置-在不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书 前面打上对勾），在正式发布时候肯定是行不通的！！！那你想跳转到自己的网站中就需要配置域名、下载校验文件了进入到小程序后台 https://developers.weixin..