前端开发随缘笔记

关于element和antd等ui插件的使用

多个表单校验问题

使用方法

1. 表单少可以使用参数为flag = true或者false进行判断;或者嵌套调用验证
2. 表单太多使用保存ref的列表进行循环校验，使用flag标记，一旦出错就提示
3. 表单有限且独立则考虑promise的promise.all()
4. table里面的form表单验证需要:ref="scope.row.code"寻找不唯一的变量(tableData里面看看)；然后循环验证this.$refs[res.code]；如果设置一个固定的值ref，调用的时候通过this.$refs.formData[0]不知道能不能取到，待验证。。。。

        var form1 = new Promise((resolve, reject) => {this.$refs.tableForm.validate((valid) => {if (valid) {resolve();}});});var form2 = new Promise((resolve, reject) => {this.$refs.ruleForm.validate((valid) => {if (valid) {resolve();}});});Promise.all([form1,form2]).then(function(){window.alert("验证通过了");});

遇到的问题

• Error in v-on handler: “TypeError: Cannot read property ‘validate’ of undefined”
  原因很多：ref和refs名字填写不一致或不唯一；选择this.$refs[xxx]或者this.$refs.xxx不对；上传按钮不在form中，或在form中，@click="submitForm(‘ruleForm’)，ruleForm没用单引号引起来等

关于日期选择的限制

以第一个选择日期为轴，第二个日期可选范围限定在一个月

<el-date-pickersize="small"v-model="datePicker"value-format="yyyy-MM-dd HH:mm:ss"type="datetimerange"range-separator="-"start-placeholder="开始日期"end-placeholder="结束日期":picker-options="pickerOptions">
</el-date-picker>data() {var that = this;return {datePicker: [],timeOptionRange: '',pickerOptions: {disabledDate(time) {let timeOptionRange = that.timeOptionRange;let secondNum = 60 * 60 * 24 * 30 * 1000;if (timeOptionRange) {return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum;}}, onPick(time) {//当第一时间选中才设置禁用if (time.minDate && !time.maxDate) {that.timeOptionRange = time.minDate;}if (time.maxDate) {that.timeOptionRange = null;}}          },};},

学习于：https://blog.csdn.net/u012260238/article/details/90270577

关于12小时和24小时

HH:mm:ss是24小时，hh:mm:ss是12小时

input

当input框type=number时

一般需要添加校验和样式限制；例如：不能是负数，右侧不需要显示上下按钮，不需要滚轮增减数字等
其中：
不为负数的数字(包含小数)：oninput =“value=value.replace(/[^0-9.]/g,’’)”；
禁止滚轮： @mousewheel.native.prevent
取消上下按钮样式：

  input::-webkit-outer-spin-button, input::-webkit-inner-spin-button{    -webkit-appearance: none !important;            }

输入有限位数字：。。。

在table中加入input

     <el-table-column label="测试" prop="releaseValue"><template  slot-scope="scope"><div class="input-box"><el-form :model="scope.row" :rules="rules"><el-form-item prop="releaseValue"><el-input type="number" size="small"  v-model.number="scope.row.releaseValue" @mousewheel.native.preventoninput ="value=value.replace(/[^0-9.]/g,'')"/></el-form-item></el-form></div></template></el-table-column>

知识点：slot-scope=“scope” :model=“scope.row” 作用域插槽
父组件调用子组件内部的数据(data中的某个上传的数据)，
子组件的数据通过slot-scope属性()传递到父组件
为什么不用emit传值。。因为这样更优雅

遇到的问题

• 输入数字仍然提示为空值
  因为input默认的是输入域字符串，如果填充的是数字类型就无法校验通过

table

合并单元格

某列合并相同内容的单元格

<el-table:span-method="objectSpanMethod" 
>...</el-table>objectSpanMethod({ row, column, rowIndex, columnIndex }) {if (columnIndex === 1) {  // 选择合并第二列的相同内容的数据try {if ( this.dataSource[row.Name] && rowIndex === 0 ) {return {rowspan: Object.keys(this.dataSource[row.Name]).length + 1,colspan: 1};} else {return {rowspan: 0,colspan: 0};}} catch (error) {return {rowspan: 1,colspan: 1};}}}

row：当前行数据（需要用到的数据）
column： 当前列参数（貌似用不上）
rowIndex, columnIndex 可以说是table的行列坐标系（0, 0）->(0, n) -> (1, 0) ->…->(m,n)
思路：找到需要合并的列，例： columnIndex = 1，通过判断一列有多少个相同内容从而控制rowspan和colspan的值（根据接口具体返回的数据写）
[rowspan, colspan]: 当[0, 0]时，表示当前列的该行不显示
当[2, 1]时，当前列的当前行向下合并两行，列为1不合并；即n>1为合并n个，1为不合并， 0为隐藏
详情查看：https://www.cnblogs.com/mmzuo-798/p/11686021.html

在写样式时出现的问题

登录页面用户名密码自动填充时(白底)样式修改

学习于：https://blog.csdn.net/zhengjie0722/article/details/90319321
方法一：关闭自动填充

<input type="text" autocomplete="off">

方法二：纯色的阴影覆盖底色(背景需要透明就不适用了)

 .ant-input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px rgb(246, 246, 246) inset;-webkit-text-fill-color: #333;}

方法三：设置input样式动画；通过延时让用户不感知

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active {-webkit-transition-delay: 99999s;-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;

禁止点击

禁止整屏点击可以使用position: fixed;制作一个遮罩层
禁止某一块儿区域点击：使用pointer-events: none

出现并修改滚动条样式

在采用固定高宽后使用overflow: hidden; overflow-y:scroll

<style>div {overflow:auto;overflow-y:scroll;}
</style>

最好使用auto；而不是hidden；hidden需要设置宽高

<ul style='width: 100px;height:100px;overflow-y:scroll;'><li v-for="(item, index) in 10" :key="index"><span>item</span></li>
</ul>
<style>ul {&::-webkit-scrollbar{width:5px;height:1px;border-radius: 5px;background: rgba(181, 193, 208, 0.3);}&::-webkit-scrollbar-track{border-radius:5px;background: rgba(181, 193, 208, 0.3);}&::-webkit-scrollbar-thumb{border-radius:5px;background: rgba(255, 255, 255, 0.7);}}
</style>

::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb）
::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处
::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件

table中去除hover行背景样式（antd-vue和element）

element需要在.el-table tbody tr:hover>td {background: transparent}
antd同element

通用常用的功能

web端和移动端关于input的事件

input的校验

正整数校验(不为负数不能输入小数点)

onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')"
// 还有一个思路是onkeyup匹配最后一个字符，不为数字则替换为空

纯数字校验

注：当type为number时输入.或者-不触发onkeyup事件，输入数字时12-12-12会校验合格

移动端自适应方案

学习于：https://www.cnblogs.com/huangenai/p/9700883.html
插件： postcss-pxtorem
功能：将px转化为rem
npm install postcss-pxtorem --save
注意：带有尺寸的参数不要写在html标签的style中；类似于icon的尺寸需要在样式中定义

新建rem.js文件

const baseSize = 32  // font-size基础尺寸
// 设置 rem 函数
function setRem () {// 当前页面宽度相对于 750 宽的缩放比例，填写真实设计图需要的尺寸，然后写css时，就可以直接用设计图尺寸了。const scale = document.documentElement.clientWidth / 750   // 设置页面根节点字体大小document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {setRem()
}

导入到main.js
import ‘./rem’
修改.postcssrc.js 文件

    "postcss-pxtorem": {"rootValue": 32,"propList": ["*"]}

让textarea的高度跟随内容变化而增减

学习于：https://blog.csdn.net/qq_37164847/article/details/107681457?utm_source=app

    getTextarea () {var textareaList = document.getElementsByTagName('textarea')if (textareaList.length !== 0) {for (let i = 0; i < textareaList.length - 1; i++) {this.autoTextarea(textareaList[i])}}},autoTextarea (elem, extra, maxHeight) {extra = extra || 0var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in windowvar isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera')var addEvent = function (type, callback) {elem.addEventListener ? elem.addEventListener(type, callback, false) : elem.attachEvent('on' + type, callback)}var getStyle = elem.currentStyle ? function (name) {var val = elem.currentStyle[name]if (name === 'height' && val.search(/px/i) !== 1) {var rect = elem.getBoundingClientRect()return rect.bottom - rect.top - parseFloat(getStyle('paddingTop')) - parseFloat(getStyle('paddingBottom')) + 'px'};return val} : function (name) {return getComputedStyle(elem, null)[name]}var minHeight = parseFloat(getStyle('height'))elem.style.resize = 'none'var change = function () {var scrollTop; var heightvar padding = 0var style = elem.styleif (elem._length === elem.value.length) returnelem._length = elem.value.lengthif (!isFirefox && !isOpera) {padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'))};scrollTop = document.body.scrollTop || document.documentElement.scrollTopelem.style.height = minHeight + 'px'if (elem.scrollHeight > minHeight) {if (maxHeight && elem.scrollHeight > maxHeight) {height = maxHeight - paddingstyle.overflowY = 'auto'} else {height = elem.scrollHeight - paddingstyle.overflowY = 'hidden'};style.height = height + extra + 'px'scrollTop += parseInt(style.height) - elem.currHeightdocument.body.scrollTop = scrollTopdocument.documentElement.scrollTop = scrollTopelem.currHeight = parseInt(style.height)};}addEvent('propertychange', change)addEvent('input', change)addEvent('focus', change)change()}

通过ajax保存数据，如何保存textarea的换行并返回显示

需求说明：通过textarea填写有换行需求的时候，想要返回接口查看还能换行(正常换行符不会被保存)；也希望能在table展示中换行


问题原因：textarea中的换行是/r/n；而展示在html中是需要用<br/>换行的，如果想在table中展示还需要换成/r/n
解决方案：
保存的时候使用：

replace(/\r\n/g,'<br/>').replace(/\n/g,'<br/>').replace(/\s/g,' ')

接口获取数据后，回填到textarea或者展示table中时，再进行替换：

replace(/<br\/>/g,'\r\n')

样式小技巧

样式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;outline: none;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }

先来个垂直对齐

flex：display: flex;align-items: center;
transform实现对齐：单行文本、段落到box；设不设置尺寸都行（推荐）

position: relative;
top: 50%;
transform: translateY(-50%);  // 向y轴平移自身高度的一半
// 版本兼容Chrome 4, Opera 10, Safari 3, Firefox 3, and Internet Explorer 9；基本没问题

如果想要垂直居中对齐;水平对齐需要设置宽度

position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 100px;

margin-top：对齐元素设置尺寸；可用margin-top进行移动其高度的一半
知识点：负的margin-top和margin-left是移动；margin-bottom和margin-right是裁剪

position: absolute;
top: 50%;
margin-top: -{width} / 2

三角形（用伪元素）

利用border特性；不设容器宽高尺寸，只设border尺寸，一面有颜色三面透明，必要时可以旋转

<div class="triangle"></div>
.triangle { border-color: transparent transparent green transparent;border-style: solid;border-width: 0px 300px 300px 300px; height: 0px; width: 0px;
}

使用伪元素给选择框右边添加三角形

.demo:after{content: '';display: inline-block;width: 0;height: 0;border: 8px solid transparent;border-left: 8px solid #AFABAB;
}

用上面的方法可以做出聊天气泡框；即用上面方法生成的三角形覆盖在原有border上

文本超出范围用…表示

overflow:hidden   （超出部分隐藏）
white-space:nowrap    （强制不换行）
text-overflow:ellipsis     （文本超出用三个省略号代替）

让滚动条消失

::-webkit-scrollbar{width:0;height:1px}
::-webkit-scrollbar-thumb{border-radius:5px;-webkit-box-shadow:inset 0 0 5px rgba(0,0,0,.2);background:rgba(0,0,0,.2)}
// IE：
HTML {  
scrollbar-base-color: #fff;  
scrollbar-base-color: #fff;  
scrollbar-3dlight-color: #fff;  
scrollbar-highlight-color: #fff;  
scrollbar-track-color: #fff;  
scrollbar-arrow-color: #fff;  
scrollbar-shadow-color: #fff;  
scrollbar-dark-shadow-color: #fff;  
} 

要学会用:not和:nth-child(n)

给类似于li写样式时，往往不想给第一个或者最后一个写部分样式
或者你想给某个子元素设置样式

 li:not(:last-child) {}li:nth-child(n)) {}li:nth-last-child(n) // 倒数第n个

复选框样式修改

复选框在不同浏览器默认样式不同且不可编辑；网上方法很多，选个简单的
注：\2713 细对勾 \2714 粗对勾
其他样式见：
https://blog.csdn.net/ping_vip/article/details/78893401

<input id="demoTest" type="checkbox">
<style>input[type='checkbox'] {border: none;outline: none;width: 30px;height: 30px;opacity: 0.6;background: #a8b0b9;}input[type='checkbox']:checked::after{content: '\2714';display: block;color: #ffffff;background-color: rgba(49,137,253, 0.8);text-align: center;line-height: 30px;// width: 30px;// height: 30px;}
<style>

字体家族的样式往往能继承，所以像font-size和line-height设置在body中

鼠标cursor属性

pointer ：小手指；
help：箭头加问号；
wait：转圈圈；
move：移动光标；
crosshair：十字光标

背景色渐变 background: linear-gradient(90deg, #004B80 0%, #0060A4 100%) ;

不填角度默认从上到下渐变
从左往右渐变：90deg;
从上往下渐变：180deg;

另一种写法有linear-gradient(to right, #004B80 0%, #0060A4 100%) 但是我使用的时候未生效

修改字间距 letter-spacing

可为负数

移动端问题

调试

插件安装
调试方法：1、设置-关于手机界面找到版本号，连续点击7次就可以开启开发者选项；2、先使用Baacloud工具连接；3、chrome://inspect/#devices 点击inspect调试

1. android打包登录页进不去，android9不支持http协议
   解决方法：给AndroidManifest.xml的<application>标签添加android:usesCleartextTraffic=“true”

2. android10预览图片时，无法显示图片内容
   解决方法：给AndroidManifest.xml的<application>标签添加android:requestLegacyExternalStorage=“true”

兼容

1、input:radio、input:checkbox等每个浏览器的默认样式不一样，部署到手机pad上也不一样；
部分需求可以通过上面的样式小技巧中的复选框样式修改的方法用css进行修改，但是很多是无法修改的，就可以使用： -webkit-appearance: none; 将浏览器默认样式去除
注：这是一个不规范的属性；在部分浏览器下不支持

样式重置

移动端很多默认样式无法修改，导致安装到移动端样式很丑，可以进行样式重置后修改
原博客：https://www.cnblogs.com/lishu930/p/5798257.html
1.-webkit-tap-highlight-color
-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0，去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)

-webkit-tap-highlight-color:rgba(255,0,0,0.5); //利用此属性，设置touch时链接区域高亮为50%的透明红，只在ios上起作用。android上只要使用了此属性就表现为边框。在body上加此属性，这样就保证body的点击区域效果一致了

2.outline：none

(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性，需要在a标签上添加hidefocus=“true”

(2)input，textarea{outline:none} 取消chrome下默认的文本框聚焦样式

(3)在移动端是不起作用的，想要去除文本框的默认样式可以使用-webkit-appearance，聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性，其实是多余。

3.-webkit-appearance

-webkit-appearance: none; //消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式

不同type的input使用这个属性之后表现不一。text、button无样式，radio、checkbox直接消失

4.-webkit-user-select

-webkit-user-select: none; // 禁止页面文字选择 ，此属性不继承，一般加在body上规定整个body的文字都不会自动调整
5.-webkit-text-size-adjust
-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整
6.-webkit-touch-callout
-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单
7.-webkit-overflow-scrolling
-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)

8.移动端textarea区域中无法输入文字，解决方案：在style.css中添加
*:not(input,textarea) {
-webkit-touch-callout: none;
-webkit-user-select: none;
}

关于VUE的用法

关于computed和watch

使用computed的场景: 多属性监听；复杂逻辑处理。
watch可进行深入监听：

watch:{msg:{handler(val, oldval){......},deep:true, //开启深度监听immediate: true // 以当前的初始值执行handler的函数}
}

关于自定义指令

用途：操作dom，可复用；
https://blog.csdn.net/baidu_31333625/article/details/70473839