- form表单中只有一个input输入框或者其他输入框时，聚焦在input中按回车键会刷新页面：
解决办法参考：鼠标聚焦到TextBox输入框时，按回车键刷新页面原因及解决方法 ——寒色
- element中input监听回车事件，使用@keyup.enter="fn"触发Enter键事件就不会触发：
解决办法：用@keyup.enter.native=“submitForm”
<el-form-item prop="password">
<el-input type="password" v-model="password" @keyup.enter.native="submitForm" placeholder="请输入密码" >
<el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
</el-input>
</el-form-item>
- 固定头部或者底部中间部分滚动，ios容易出现不能滑动，页面卡死，样式错乱问题：
解决方法：给滚动部分设置高度，要超出100%一点点，比如101%，或者cale(100% + 1px)
具体参考：深入研究-webkit-overflow-scrolling:touch及ios滚动——夏大师 - Date和moment在ios中的兼容问题：
时间格式在安卓和谷歌不会报错，但是在ios和safari上边报错，通过vconsole看到的报错信息
错误格式：
new Date('2019-4-27')
moment('2019-4-27')
正确格式：
new Date('2019/04/27')
moment('2019/04/27')
- 正则解析路径中的参数unescape()不能用，改为decodeURIComponent()
analyticUrl: function (name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return decodeURIComponent(r[2]);
return null;
},
- swiper动态请求数据后会出现一段空白的时间
解决办法：给swiper设置v-if控制显隐，在请求开始将swiper的v-if置false，数据请求完置true
async getinform () {
try {
this.swiperFlag = false // 请求开始将swiper的v-if置false
let response = await axios.get('/notice/threeMarquee')
this.swiperFlag = true // 数据请求完置true
this.$loading.hide()
let result = response.data
if (result.success) {
this.informList = result.result
} else {
this.$messageTips.serverError()
}
this.$emit('finish-refresh', 'announce')
} catch (e) {
console.log('出错了', e);
}
},
- element 的table中多选框中某些项禁止选择
使用:selectable=“checkSelectable”，在js中checkSelectable方法中返回布尔值
<el-table :data="inviteCodeData" tooltip-effect="dark" style="width: 100%" @selection-change="codeSelection">
<el-table-column
type="selection"
width="55"
:selectable="checkSelectable"></el-table-column>
<el-table-column prop="branch" label="分公司" width="80"></el-table-column>
</el-table>
checkSelectable: function (row) {
return !row.Timeflag
},
- ajax中使用element的loading不显示，页面卡死
解决方法： async:true
async. 默认是 true，即为异步方式，ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$.ajax里的success方法，这时候执行的是两个线程。
async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。
所以注释掉asunc:false 或者直接不写，就不会阻止element的loading加载。
$.ajax({
url: '/outbranchlist/queryOutBranchList',
data: parames,
type: 'get',
dataType: 'json',
// async: false, // 同步
- iphone plus部分机型border-radius出现圆角错乱，尤其是在8p机型上尤为突出，在border-radius: 0 0 15rem 15rem;时，内部内容超过一定高度就会出现上部出现空白条，下边出现错列毛边，并且越高错列和空白行越大，如下：
解决方案：
在测试过程中发现border-radius: 15rem;不会出现这个问题，所以只能将4个角全部设置成圆角，再通过伪元素将其遮盖，宽高需自行调整
&::before{
content: '';
height: 30/@rem;
width: 20/@rem;
display: block;
background: #fff;
left: 0;
position: absolute;
top: 0;
}
&::after{
content: '';
height: 30/@rem;
width: 20/@rem;
display: block;
background: #fff;
right: 0;
position: absolute;
top: 0;
}
- iphone x机型中出现设置border部分缺失的问题
解决方案：兼容浏览器物理1px的问题，通过伪元素设置宽高200%；再缩小，然后再设置不同方向border，代码如下：
// 兼容浏览器物理像素1px
@media (-webkit-min-device-pixel-ratio: 2) {
.border, .border-top, .border-right, .border-bottom, .border-left, .border-horizontal {
position: relative;
z-index: 1;
border-width: 0;
}
.border:after, .border-top:after, .border-right:after, .border-bottom:after, .border-left:after, .border-horizontal:after {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
box-sizing: border-box;
width: 200%;
height: 200%;
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none;
}
.border:after {
border: 1px solid @border-color;
}
.border-top:after {
border-top: 1px solid @border-color;
height: 1px;
}
.border-right:after {
left: auto;
right: 0;
width: 1px;
border-right: 1px solid @border-color;
}
.border-bottom:after {
top: auto;
bottom: 0;
height: 1px;
border-bottom: 1px solid @border-color;
}
.border-left:after {
width: 1px;
border-left: 1px solid @border-color;
}
.border-horizontal:after {
border-top: 1px solid @border-color;
border-bottom: 1px solid @border-color;
}
.border-vertical:after {
border-left: 1px solid @border-color;
border-right: 1px solid @border-color;
}
}
- router-link中激活类名router-link-active使用时发现’/home’激活时，'/'的路由也会激活
解决方案：
router-link 标签中加入exact字段，类似严格模式匹配
且匹配不能使用重定向前的路径和当前跳转路由匹配，例如：
‘/‘重定向到’/home’，激活时，不能拿 '/‘和’/home’匹配 - 部分机型在频繁点击一个按钮的时候，按钮消失了
解决方案：使用fastclick解决点击问题。 - pc版中禁止input输入框中输入表情
解决方案：在测试了好几次之后发现match可以匹配到表情的输入，但是replace方法没办法替换表情，所以采用以下办法
watch: {
'newForm.userName': {
handler (val, oldVal) {
var reg = "[^\\u0020-\\u007E\\u00A0-\\u00BE\\u2E80-\\uA4CF\\uF900-\\uFAFF\\uFE30-\\uFE4F\\uFF00-\\uFFEF\\u0080-\\u009F\\u2000-\\u201f\\r\\n]"
if (val.match(reg)) {
this.newForm.userName = oldVal
}
}
},
}
- 微信中页面replace跳转返回不记录上一页，物理返回键返回仍会回到不需记录的那一页问题
如：X->A->B->C时用push或着window.location.href，在C跳回B时，如果用push，点击物理返回会跳到C，所以改用了replace，B到A时也用了replace，但此时从A到X点击物理返回键会跳到B
解决方案：replace跳转之后，再用go(-1)，两个同时使用，或者前边直接用go(-1)实现返回跳转
this.$router.replace({name: 'CsrReportIndex'})
this.$router.go(-1)
- JSON.stringify不能处理Map/Set和Function，会被处理成空，所以在使用vuex或者pinia的数据持久化时要注意
- placeholer实现换行，每行不同颜色
通过字符串模板会\n实现换行，通过背景色裁剪设置每行不同颜色，背景色范围是lineheight范围
<textarea
class="trace-area"
:placeholder="`例：
放射科&张伟,赵强,孙浩,内科&李刚,吴刚,陈阳,
或：
放射科&
张伟
赵强
内科
李强`"
@blur="onNameAreaBlur"
></textarea>
.trace-area {
padding: .24rem;
background: #F8FAFB;
margin-left: .3rem;
width: 5.8rem;
height: 3.68rem;
border: none;
border-radius: .16rem;
line-height: .4rem;
&::-webkit-input-placeholder {
linear-gradient(to bottom, #B8C1D6 0, #B8C1D6 .4rem, #8792AD .4rem, #8792AD .8rem, #B8C1D6 .8rem, #B8C1D6 1.2rem, #8792AD 1.2rem, #8792AD 1.6rem);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
}
}
placeholder样式在devtools中调试：
devtools中右上角设置按钮中-》preference中的Elements将show user agent shadow Dom勾选上，就可以展开textarea，点击里边包着的#shadow-root
- 正则报错：Safari SyntaxError: Invalid regular expression: invalid group specifier name
Firefox SyntaxError: invalid regexp group
移动端：安卓正常，iOS不行
原因
火狐、IE、IOS不支持以下写法
常用零宽断言：?<=、?<!、?!、?=
前瞻就是一种条件判断，好比if语句
(?=exp)正向前瞻 匹配后面满足表达式exp的位置
(?!exp) 负向前瞻 匹配后面不满足表达式exp的位置
解决方案：不使用零宽断言
eslint校验不推荐使用RegExp格式
// eslintrc.js中
rules: {
'prefer-regex-literals': 0 // 0是关闭校验，1是校验以warning形式提醒，2是error提醒
}
- 对于子路由需要使用keep-alive缓存的情况，不能只对父路由增加缓存，子路由也要被keep-alive包裹，不然不生效
- 直接请求后端域名可以正常请求到，但vue中的代理请求会报503错误，是因为跨域了，检查proxy中的changeOrigin是否开启
- canvas做画笔，画图那种，在pc端没有问题，在移动端获取的坐标有偏移
解决方案：
// pc端用鼠标坐标
function mouseXY(ev: SyntheticEvent) {
const mouseEvent = ev.nativeEvent as MouseEvent
return { x: mouseEvent.offsetX, y: mouseEvent.offsetY }
}
// 移动端要加偏移量
function touchXY(ev: SyntheticEvent, canvas: HTMLCanvasElement) {
const touchEvent = ev.nativeEvent as TouchEvent
const touch = touchEvent.touches[0]
const bbox = canvas.getBoundingClientRect()
const touchX = (touch.clientX - bbox.left) * (canvas.width / bbox.width);
const touchY = (touch.clientY - bbox.top) * (canvas.height / bbox.height);
return { x: touchX, y: touchY }
}
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
