导览
1、去掉img标签src为空时的默认边框
2、 判断是否点击在区域内
3、点击和长按
4、table圆角效果
5、拖拽
6、元素flex布局以后，在元素上面的滚动不能联动其他区域
7、vue添加二级动态路由的时候报错： Duplicate named routes definition
8、文字超出内容时，居中省略
9、vue项目国际化 vue-i18n 使用：https://juejin.cn/post/6992863276300238862
1、去掉img标签src为空时的默认边框
img[src=''],
img:not([src]) {
opacity: 0;
}
2、 判断是否点击在区域内
// 监听单击事件
this.listenClick = (e) => {
let searchResult = this.$refs.parent;
if (!searchResult.contains(e.target)) {
// 点击在了列表区域外
} else {
// 点击在了列表区域内
}
};
//addEventListener的第3个参数表示出发顺序，默认为false。如果为false则listenClick后于具体的元素事件执行，如果为true则先于具体的事件执行
document.addEventListener('click', this.listenClick, true);
3、点击和长按
移动端 touch
var timeOutEvent=0;//定时器
// html
// gotouchstart//手指放到屏幕上时触发
//touchmove: //手指在屏幕上滑动式触发
//touchend: //手指离开屏幕时触发
//touchcancel: //系统取消touch事件的时候触发，这个好像比较少用
<div @touchstart="gotouchstart" @touchmove="gotouchmove" @touchend="gotouchend"></div>
//js
gotouchstart(){
let that = this;
clearTimeout(timeOutEvent);//清除定时器
timeOutEvent = 0;
timeOutEvent = setTimeout(function(){
//执行长按要执行的内容，
...
},600);//这里设置定时
},
//手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
gotouchend(){
clearTimeout(timeOutEvent);
if(timeOutEvent!=0){
//这里写要执行的内容（尤如onclick事件）
}
},
//如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
gotouchmove(){
clearTimeout(timeOutEvent);//清除定时器
timeOutEvent = 0;
},
pc端分别对应的事件为
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：鼠标移动事件。
全部鼠标事件
click：单击事件。
dblclick：双击事件。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：鼠标移动事件。
mouseover：移入事件。
mouseout：移出事件。
mouseenter：移入事件。
mouseleave：移出事件。
contextmenu：右键事件
4、table圆角效果
table {
width: 100%;
/* 消除单元格之间的空隙 */
border-collapse: collapse;
/* 消除掉外边框 */
border-style: hidden;
//让每个单元格平分宽度
table-layout: fixed;
position:relative;
box-sizing: border-box;
&::before{
//利用伪元素产生圆角效果
content:'';
display:inline-block;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
box-sizing: border-box;
border-radius: 6px;
border: 1px solid red;
}
th,
td {
border: 1px solid red;
min-height: 48px;
line-height: 20px;
}
tr:last-child td{
border-bottom:none;
}
}
}
5、拖拽：https://mp.weixin.qq.com/s/bfhh0QkeV1vAEcaEClZMxg
6、元素flex布局以后，在元素上面的滚动不能联动其他区域。需要把滚动加到页面根部，这样flex布局的元素滚动就可以和其他区域联动。但是会带来一个问题，当页面有弹窗时，不能阻止下面区域的滚动，此时要手动禁止页面滚动和放开页面滚动。
/**
* @description: 禁止页面滚动
*/
export const rejectWindowScroll = function () {
const documentElement = document.documentElement;
documentElement && (documentElement.style.height = '100vh'); // 禁止页面滑动
documentElement && (documentElement.style.overflow = 'hidden');
};
/**
* @description: 允许页面滚动
弹窗消失的时候如果立刻放开滚动，有可能会让弹窗有左右偏移的效果，所以要对allowWindowScroll 做延时生效
*/
export const allowWindowScroll = function () {
const documentElement = document.documentElement;
documentElement && (documentElement.style.height = '');
documentElement && (documentElement.style.overflow = 'overlay');//防止因为进度条占据页面空间造成其他元素的抖动，但overlay是有兼容性问题的。具体可通过can i use 去查询
};
7、添加二级动态路由
①、判断子路由是否已经存在当前的路由中，如果已经存在不做塞入
②、添加一个自定义方法，来清空之前的路由
以下的写法是在vue2框架下：
import VueRouter from 'vue-router';
//先清空
this.$router.matcher = new VueRouter().matcher;
//再添加
routerList.forEach((item) => {
this.$router.addRoute(item);
});
网友评论