1 在使用echarts（5.0+）雷达图时radar配置项的axisName的overflow配置无效（未解决）
需求：
因雷达图的name名称过长所以产品需要给name设置3个字符+省略号的形式，但是还得要鼠标悬浮在name上显示出来完整的name（需要设置triggerEvent: true开启鼠标事件）
解决方案1：
在echarts官方文档中有设置overflow：'truncate'（需要设置width的前提下），再设置ellipsis：'...'。这个方法目前不可用，因为设置width无效，或者是overflow无效,失败
解决方案2：
使用dom操作chart，可惜获取不到convas里面的内容，失败
解决方案3：
使用 chart.on('mouseover').function(params){} 在鼠标悬浮再name的时候会触发事件，这时可以在页面上绘制一个新的div（提示框），当targetType == "axisName"的时候div显示出来（使用params.event.offsetY和params.event.offsetX确定div显示的位置），鼠标移出的时候再关闭div显示，这种方法可以操作，但是有个问题就是无法关闭原生的提示框成功了一半
2 scollIntoview（）和scrollTop问题（已解决）
需求：
在页面开发时需要点击一个页面元素后返回到页面顶部
解决方案1：
使用bom的scrollTop方法在页面底部时候点击回到上面，这个方法适用于门户类的网站，我开发这个大屏好像是限定了高度，导致scrollTop的值一直是0，所以无效果失败
解决方案2（推荐）：
使用id锚点，这种方法还不错，可以加个平滑过渡成功解决
document.querySelector("#topAnchor").scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
解决方案3：
使用element的Backtop，这种需要加个按钮，暂时不知道怎么在代码中调用
3 echarts饼图中，添加默认的中间显示数值，然后切换时候中间跟着切换
需求：
默认显示一个突出的地方，鼠标切换其他地方时候中间数据跟着换
解决方案
//注意：这段代码十分关键，
series: [
{
data: data.map(item => {
return {
...item,
emphasis: {
show: true,
scaleSize: 9,
label: {
show: true
}
}
};
}),
}
]
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0
});
// this.chart.dispatchAction({
// type: "highlight",
// seriesIndex: 1,
// dataIndex: 0
// });
this.chart.on("mouseover", params => {
// 移入后取消默认第一项高亮变大效果
if (params.seriesType === "pie") {
// 如果鼠标移入的不是第一项，就取消第一项的高亮效果
if (params.dataIndex !== 0) {
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: 0
});
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 1,
dataIndex: 0
});
}
// 开启内、外圈选中效果
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 1,
dataIndex: params.dataIndex
});
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: params.dataIndex
});
}
});
this.chart.on("mouseout", params => {
// 鼠标离开每一项后关闭内、外圈移入效果
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 1,
dataIndex: params.dataIndex
});
this.chart.dispatchAction({
type: "downplay",
seriesIndex: 0,
dataIndex: params.dataIndex
});
// 鼠标离开每一项后继续默认第一项选中高亮效果
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 0,
dataIndex: 0
});
this.chart.dispatchAction({
type: "highlight",
seriesIndex: 1,
dataIndex: 0
});
});
4雷达图添加对数据指标的筛选（雷达图的每一条线，不是正常图例）
需求：
左边是一个el-checkbox的多选框，对应的是雷达图的多个指标，取消某一项单选后，雷达图去掉一个指标
解决方案
思路就是，每当check发生变化之后（和完整的checkbox对比），就把整个checkboxs的内容返回去掉选择的一个后去重新调用接口，后台会重新查一遍
//check变动时触发
checkboxChange(event) {
//如果当前选择这个check存在与完整的boxs列表中
if (this.citiesE.includes(event)) {
//就把在完整列表中的这个check删除掉然后返回后重新调用接口
this.citiesE = this.citiesE.filter(val => {
return val != event;
});
} else {
//如果不存在与这个列表中，就证明是之前没选的，选中之后把整个列表赋值过去，调用接口
this.citiesE.push(event);
}
this.getLoad();
},
5.在vue中使用 for in的时候，限制循环
需求：
在使用for in 布局的时候，经常会有flex布局不好用的时候（行列不好控制，不能用%撑开），这时候就需要限制循环，控制成一行一行或者一列一列的样式，但是如果使用v-if的话会有报错，ESLint对代码的规范可能也通不过
解决方案：
从源头控制输出，比如：每五个for循环出来的div为一行那么可以在数据输出的时候控制数量然后分行进行输出，主要是用到了slice()来分割数组（这种方案如果遇到特别多的list可能会比较麻烦）
<div class="chain-box item_box">
<el-row>
<el-col
:span="6"
class="item"
v-for="(item, index) in list.slice(0, 5)"
:key="index"
>
</el-col>
</el-row>
<el-row>
<el-col
:span="6"
class="item"
v-for="(item, index) in list.slice(5, 10)"
:key="index"
>
</el-col>
</el-row>
</div>
6.大屏适配问题（关于门户的背景图固定宽高）
需求：
在做过的一个项目中，门户的首页上的一些页面元素，需要和背景的某一个位置重合在一起，所以背景图必须保持固定，不能缩放，也不能自适应，必须固定宽高才能和页面元素重合
解决方案：
略有些繁琐：
- 确定背景图在1k下面的宽和高（1920x1080），也可以动态改变基准值
- 找到1k分辨率下元素固定在页面的位置（position：absoulate;left:100px;top:100px）
- 再找到2k分辨率下元素固定的位置（先手动设置背景图的宽和高）（left:200px;top:222px）
- 然后开始计算宽
2k分辨率下的left（222px）- 1k分辨率下面的left（100px）=122px（两个分辨率下面的对容器左边的内容的距离） - 然后取到
2k分辨率下dom或者bom的宽（2560px） - 1k分辨率下面bom的宽（1920） = 640px - 然后
640px / 122px = 5.245... - 根据得到的这个值：
(用dom或者bom的宽（document.body.scrollWidth）- 基准宽) / 5.245 + 基准的元素left值（100px） - 最终得到的值就是对于1k-2k分辨率之间的对于元素左偏值的
- 应该可以写个算法什么的，但是工作比较忙就没有考虑后续了，希望以后有机会可以改一下吧
7.大屏适配问题
潘多拉的魔盒~芜湖
在我其他文章
8.还是适配问题-关于苹果显示比例的问题（未解决）
有一种情况：在苹果电脑的显示百分比在125到150或者更高时，打开页面的话，使用百分比布局可能会导致页面超出bom层，但是由于dom层的宽还是保持在dom的宽上，可能会导致页面右边部分的内容缺失，也能不会出现滚动条
9.在调用获取文件接口时，返回两种结果（json，blob）的处理
/** 接口文件 */
return request({//调用公用的request方法
baseURL: '/',
headers: {
'api-version': 'V1'
},
url: 'urlurlurlurlurl',
method: 'post',
data: data,
responseType: ['json', 'blob'] //这样返回了两种结果，对两种结果判断
}).then(res => {
console.log(res, fileName)
handleDownloadFile(res, fileName)//文件下载
// resolve()
})
/** request文件 */
service.interceptors.response.use(response => {
//判断
if (response.headers['content-type'].includes('text/csv')||response.config.responseType === 'blob') {
return response
}
const res = response.data
if (res.code !== 200) {
Message({
message: res.message || 'Error',
type: 'error',
duration: 4 * 1000
})
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res
}
},
error => {
console.log('err' + error) // for debug
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
10.在使用Promise的时候 循环调用异步函数导致最终返回结果顺序不一致
- 这个问题真的很烦，找了半天，最后想到可能是异步问题
我的代码如下-循环每次传入一个值，然后返回一个结果，这样想的不对
问题似乎是在循环调用 getLeafIdData 方法时，返回的结果顺序和传入的顺序不一致。这是因为 getLeafIdData 方法是一个异步函数，它返回一个 Promise 对象，而在循环中调用它时，并不会等待每个 Promise 对象都解决后再继续执行后续代码，所以打印 temp 的结果可能是空数组。
为了确保返回的结果顺序和传入的顺序一致，您可以使用 Promise.all() 方法来等待所有的异步操作完成，并按照传入的顺序处理结果。
api.接口(参数).then((res) => {
this.dataListTwo = res.data;
this.dataListDatas = [];
let temp = [];
//传递所有
for (let index = 0; index < res.data.length; index++) {
this.getLeafIdData(res.data[index].id)
.then((value) => {
temp.push({
name: that.dataListTwo[index].name,
items: that.dataListTwo[index],
value: value,
});
// 在Promise对象变为resolved状态后，这里可以使用获取到的值
})
.catch((error) => {
// 捕获Promise对象变为rejected状态后的错误
console.error(error);
});
}
that.dataListDatas = temp;
});
async getLeafIdData(params, pagesize, curpage) {
let { data } = await api.接口(参数);
return data;
},
代码改为
api.接口(参数).then((res) => {
this.dataListTwo = res.data;
this.dataListDatas = [];
let promises = [];
for (let index = 0; index < res.data.length; index++) {
let promise = this.getLeafIdData(res.data[index].id)
.then((value) => {
return {
name: res.data[index].name,
items: res.data[index],
value: value,
};
})
.catch((error) => {
// 捕获Promise对象变为rejected状态后的错误
console.error(error);
});
promises.push(promise);
}
Promise.all(promises)
.then((results) => {
console.log(results);
this.dataListDatas = results;
})
.catch((error) => {
console.error(error);
});
});
在这个修改后的代码示例中，首先创建了一个空数组 promises，用于存储每个异步操作返回的 Promise 对象。然后，在循环中创建并添加每个异步操作的 Promise 对象到数组中。最后，使用 Promise.all(promises) 方法等待所有的异步操作完成，并将所有返回的结果按照传入的顺序存储在 results 数组中。在 then 方法中，可以处理并打印最终的结果，并将其赋值给 this.dataListDatas。
11.flex同行占用问题
如图所示要的效果是在title增加时 图片自动缩短，关键代码-image-container的css增加了flex-shrink: 1;让图片外部的盒子沾满 图片根据盒子伸缩
title代码
<div class="boxContent_block_title">
<img
class="boxContent_block_title_icon"
src="../../../assets/hot/titleicon.png"
alt=""
/>
<div class="boxContent_block_title_name">
1123
</div>
<div class="image-container">
<img
class="boxContent_block_title_line"
src="图片"
alt=""
/>
</div>
<div class="article_l_more" ">
<div>more</div>
<img
src="图片"
alt=""
/>
</div>
</div>
样式代码
.boxContent_block_title {
display: flex;
margin: 0px 22px 0 32px;
// padding-top: 32px;
align-items: center;
.boxContent_block_title_icon {
}
.boxContent_block_title_name {
// flex-grow: 1;
margin: 0 13px 0 8px;
font-size: 22px;
font-family: Microsoft YaHei;
font-weight: bold;
color: #181818;
white-space: nowrap;
// overflow: hidden;
// text-overflow: ellipsis;
}
.article_l_more {
display: inline-block;
width: 70px;
float: right;
cursor: pointer;
font-size: 17px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #444444;
line-height: 0px;
&:hover {
color: rgb(31, 31, 212);
}
}
.article_l_more img {
// margin-left: 4px;
vertical-align: top;
float: right;
}
.image-container {
flex-shrink: 1;
height: 18px;
overflow: hidden;
margin-left: 10px; /* 根据需要设置标题和图片之间的间距 */
margin-right: 10px;
img {
width: 99%;
height: 18px;
}
}
// .boxContent_block_title_line {
// flex-shrink: 0;
// // width: auto;
// height: 18px;
// margin-right: 13px;
// }
}
12. require引入变量问题
require在引入静态资源时使用变量会报错
问题：
console.log(require(this.$props.divBackground.content));
Error in mounted hook: "Error: Cannot find module './images/navbg.png'"
原因是
webpack 是一个构建工具，而他的核心思想是一切都是模块，根据模块的依赖关系进行打包，而这些模块必须要是本地资源，既然是本地资源，就肯定是确定的资源，而没有必要使用未知的变量资源。
解决方法
require(this.$props.divBackground.content+'')
或
require(KaTeX parse error: Expected '}', got 'EOF' at end of input: {this.props.divBackground.content})
13.在本地能找到js静态文件，但是服务器上找不到，在vue设置了publicPath的路径导致在public里面的index.html里面引入js文件找不到（少了一个路径字符）
因为nginx同服务器上放了很多项目所以要区分路径，在获取静态资源的时候也需要拼接一个/test/
publicPath: process.env.NODE_ENV === "production" ? "/test/" : "/",
在打包之后的index.html文件中没有拼/test/
错误的 <script src=/gxjs/jquery-1.4.4.min.js></script>
正确的 <script src=/test/gxjs/jquery-1.4.4.min.js></script>
解决方法：
在index.html中设置一下全局的静态变量 根据不同的启动或者打包方式定义这个路径
<script src="<%= process.env.VUE_APP_Pack_META%>gxjs/jquery-1.4.4.min.js"></script>
.env.production中
VUE_APP_Pack_META='/test/'
14.在使用el-dropdown-menu下拉的时候，修改不了下拉的框的问题
原因是el-menu在样式的最外层 如果想修改的话必须影响到所有的el-menu样式 不能用 scoped选项，必须设置类名然后用类名去操作这个el-menu
<el-dropdown placement="top">
<span class="el-dropdown-link">
<a></a>
</span>
<!-- 切记这里自定义了类名，不能重复 -->
<el-dropdown-menu
slot="dropdown"
class="dropdownTopPbulicMenu"
>
<el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<style lang="less">
//类名不能重复 否则样式会乱 el-menu问题，因为他渲染在了整个页面上
.el-popper.dropdownTopPbulicMenu {
// top: 67px !important;
background-color: rgba(255, 255, 255, 1); // 背景颜色
border: 1px #c9def3 solid;
.el-dropdown-menu__item {
//自己的样式
border-bottom: 1px solid #e6e4e3;
}
.el-dropdown-menu__item:last-of-type {
border-bottom: none !important;
}
// .popper__arrow::after {
// border-bottom-color: #0f93ee !important;
// border-top-color: #0f93ee !important;
// }
// .el-dropdown-menu__item:not(.is-disabled):hover {
// background: #40a8ee !important;
// }
}
</style>
13. 在前端使用transition时候之前的数据延迟删除了
注意：必须要设置key
我的实现方法是 changeColor 鼠标悬浮进入时，出发fade的key发生变化 然后数据刷新，动画进入
问题：在鼠标changeColor 鼠标悬浮进入时，上一次保存的数据没有第一时间删除掉，在动画执行完之后才删除了
解决：是因为 fade-leave-active 这个属性会导致之前的数据需要处理离开时候的动画
问题2：鼠标移入导致页面其他div内容右移
解决：因为默认有原来的页面元素移出的效果在，所以原元素会在下面占位，超出了原本元素div，所以需要设置.fade-leave-active 的 display为none
v-enter-active ：进入动画的生效状态
v-leave-active：离开动画的生效状态
v-enter-from ：刚进入动画的开始状态
v-leave-to：离开动画时的结束状态
v-enter-to ：刚进入动画的结束状态
v-leave-from ：离开动画的结开始态
<template>
<div>
<div class="banner">
<div class="banner_content">
<transition name="fade">
<div
v-if="currentValue"
:key="currentValue.key"
class="leftcontent"
>
<div class="leftcontentTtitle">
{{ currentValue.title }}
</div>
<div class="leftcontentContent">
{{ currentValue.content }}
</div>
</div>
</transition>
<ul class="tab">
<li
v-for="(item, index) in Uiitems"
:key="index"
@mouseover="changeColor(index)"
>
<span
:style="{
color:
currentIndex === index
? hoverColor
: normalColor,
}"
>{{ item.name }}</span
>
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'home',
components: {},
mixins: [],
props: {},
data() {
return {
Uiitems: [
{
name: '1',
value: {
title: '1',
content:
'11111111111111111',
key: 1,
},
},
{
name: '2',
value: {
title: '2',
content:
'22222222222222222222',
key: 2,
},
},
{
name: '3',
value: {
title: '3',
content:
'3333333333333333333333',
key: 3,
},
},
{
name: '4',
value: {
title: '4',
content:
'44444444444444444',
key: 4,
},
},
{
name: '5',
value: {
title: '5',
content:
'12321321321',
key: 5,
},
},
],
normalColor: '#fff', // 默认颜色
hoverColor: '#6FF', // 悬停颜色
currentIndex: null, // 当前悬停的索引
currentValue: {},
};
},
computed: {},
watch: {
},
created() {
this.changeColor(0);
},
mounted() {},
methods: {
changeColor(index) {
this.currentIndex = index;
this.currentValue = this.Uiitems[index].value;
},
},
};
</script>
<style lang="less" scoped>
.banner {
height: 350px;
background: url(../../assets/banner.jpg) no-repeat top;
background-size: auto;
// position: relative;
.banner_content {
width: 100%;
max-width: 1200px;
height: 100%;
margin: 0 auto;
position: relative;
.leftcontent {
max-width: 630px;
float: left;
text-align: justify;
padding-top: 7%;
transition: opacity 0.1s ease; /* 这里的时间需要和setTimeout的时间保持一致 */
.leftcontentTtitle {
font-size: 28px;
font-weight: 700;
font-style: normal;
color: #fff;
}
.leftcontentContent {
color: #fff;
margin-top: 15px;
max-height: 120px;
line-height: 28px;
font-size: 15px;
}
}
//动画
.fade-enter-active {
animation-duration: 1s;
animation: fade-animation 1s ease both;
animation-fill-mode: both;
}
.fade-leave-active {
display:none;
// animation-duration: 1s;
// animation: fade-animation 1s ease both;
// animation-fill-mode: both;
}
//渐入
@keyframes fade-animation {
0% {
opacity: 0;
transform: translate3d(0, 50px, 0);
}
100% {
opacity: 1;
transform: none;
}
}
.tab {
list-style: none;
width: 480px;
// float: right;
height: 350px;
position: absolute;
right: 0;
li {
cursor: pointer;
width: 80px;
height: 50px;
line-height: 50px;
span {
width: 80px;
height: 50px;
}
}
li:nth-child(1) {
position: absolute;
bottom: 135px;
// left: 40px;
}
li:nth-child(2) {
position: absolute;
bottom: 230px;
left: 40px;
}
li:nth-child(3) {
position: absolute;
bottom: 310px;
left: 200px;
}
li:nth-child(4) {
position: absolute;
bottom: 230px;
left: 370px;
}
li:nth-child(5) {
position: absolute;
bottom: 135px;
left: 410px;
}
}
}
}
</style>
13. 在前端接口被重复调用，响应时长不同，结果被覆盖的问题
vue 在代码逻辑中我点击一个按钮切换数据时快速点击另一个按钮 因为接口访问速度的问题 导致第二次点击获取的数据被第一次获取的数据覆盖了（第一段数据加载速度比第二段慢）
使用全局的唯一参数和传入的唯一参数做判断，如果一致的情况下才显示，不一致就制空
get(setParams).then((res) => {
// 全局和局部
if (this.eventData.uid == setParams.uid) {
this.listData = res.data.data;
if (this.nowLevel == 3) {
if (res.data.data[0]) {
this.level3Data = res.data.data[0];
console.log(res.data.data[0]);
this.totlalCount = res.data.data[0].totlalCount;
}
}
} else {
this.listData = {
childList: [],
};
}
this.listLoading = false;
});
13. transition因为设置了display=none导致动画失效
因为display会销毁组件 所以需要使用opacity代替display
鼠标移入移出事件
handleMouseEnter(uid) {
//display会导致动画失效 opacity设置透明度的话就可以
document.getElementById('navTablesRight').style.opacity = 0;
document.getElementById('navTables').style.opacity = 0;
//综合版只有前三个有下拉列表
if (uid == 'A104') {
document.getElementById('navTablesRight').style.opacity = 1;
} else {
document.getElementById('navTables').style.opacity = 1;
}
},
handleMouseLeave(uid) {
if (uid == 'A104') {
document.getElementById('navTablesRight').style.opacity = 0;
} else {
document.getElementById('navTables').style.opacity = 0;
}
},
},
.navTablesRight {
width: 1200px;
height: 190px;
background: rgba(22, 30, 98, 0.9);
position: absolute;
z-index: 1000;
transition: opacity 0.3s ease;
transform: translateY(27%);
position: absolute;
padding: 20px 40px;
}
14. echarts使用地图时没有地图json文件了
起因是我的项目原本是一个echarts4.7版本的map，但是我这个项目需要用桑基图，4.7版本的桑基图不好看，所以就升级到了5.2，然后之前的地图文件找不着了，就报错了
- import “echarts/map/js/world.js”;
原来是这个地址
我的解决方式是直接从依赖文件中重新找到这个文件并放到本地，然后再main.js文件中引入
这种方式有问题：我在本地测试使用的时候，可以访问地图，可以显示，但是我部署到linux上就不显示了，页面白屏
可以使用多版本echarts解决地图问题
通过安装多个版本echarts，并在不同场景使用不同的版本。首先，安装不同版本依赖
npm install echarts@5.2
npm install echarts4@npm:echarts@^4.9.0
在main.js引入地图文件
import * as echarts from ‘echarts’
// 引入地图文件
import “echarts4/map/js/world”;
15. 在前端npm拉包的时候，需要拉公司npm资源库中的包，但是因为换地址导致拉包错误，使用指定的地址写在package.json拉包
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"dev": "vue-cli-service serve"
},
"dependencies": {
"drcnet-common": "http://0.0.0.0:8081/repository/npm-group/drcnet-common/-/drcnet-common-1.0.5.tgz",
//这里写的是公司的地址和端口号
//http://0.0.0.0:8081/repository/npm-group/drcnet-common/-/确保这个地址可以访问到并且下面有需要的依赖包，这种方法是确定这个文件资源的位置并下载
//确定在jenkins上面可以访问到这个地址
"element-ui": "^2.12.0",
"file-loader": "^3.0.1",
"fullpage.js": "^3.0.4",
"gsap": "^2.1.2",
"jsonp": "^0.2.1",
"node-sass": "^4.13.1",
"pdfjs-dist": "^2.0.943",
"vue": "^2.6.6",
"vue-router": "^3.0.1",
"vuex": "^3.0.1",
"axios": "0.18.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.5",
"@vue/cli-plugin-eslint": "^3.0.5",
"@vue/cli-service": "^3.0.5",
"@vue/eslint-config-airbnb": "^4.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"sass-loader": "^7.1.0",
"vue-cli-plugin-element": "^1.0.1",
"vue-template-compiler": "^2.5.21"
}
}
16. 在后端返回接口过慢的时候，发生了第一次点击的值返回的速度比第二次点击返回的数据慢，在第二次返回的数据显示之后，第一次的数据才刷新出来，然后把第二次的数据给覆盖掉了，用时间戳解决这个问题
设置时间戳，把时间戳加载点击事件的时候，第一次和第二次的点击事件不可能一样，所以只有点击的时间相同的情况下才会触发数据变更
在这里插入代码片
data() {
return {
lastClickTime: "",
}
}
//点击事件
methods: {
async toCountry(item) {
this.lastClickTime = new Date();
await this.getSankeyData();
},
async getSankeyData() {
await this.initData();
let lastClickTime = this.lastClickTime; //最后一次点击时间，防止频繁操作
/**
* ioreId: 1是进口 0是出口
*/
// 左侧桑及
let leftParams = {
countryId: this.countryActive,
ioreId: 1,
};
await getSankeyInfo(leftParams).then((res) => {
console.log(lastClickTime.getTime());
console.log(this.lastClickTime.getTime());
console.log(lastClickTime == this.lastClickTime);
if (lastClickTime == this.lastClickTime) {
//判断时间是否一致，如果一致，则进行操作（不一致则代表是先请求的接口后返回，不进行操作即可
this.leftSankeyData = res.data.data;
}
});
}
17. 在safari下，writing-mode的css属性失效
writing-mode: horizontal-tb;
属性完全失效，用不了，在mac中只能增加特殊处理
writing-mode：设置横纵
this.$nextTick(() => {
var isSafari =
/Safari/i.test(navigator.userAgent) &&
!/Chrome/.test(navigator.userAgent);
// 使用正则表达式进行匹配
let alltables = document.getElementsByClassName('tablerows');
for (let index = 0; index < alltables.length; index++) {
const element = alltables[index];
element.style.minWidth = '1px';
if (isSafari) {
} else {
//如果不是safari才添加属性
element.style.writingMode = 'vertical-lr';
}
}
let alltablesrow = document.getElementsByClassName('tablerow');
for (let index = 0; index < alltablesrow.length; index++) {
const element = alltablesrow[index];
element.style.minWidth = 0;
if (isSafari) {
} else {
element.style.writingMode = 'horizontal-tb';
}
}
if (navigator.userAgent.includes('Safari')) {
}
});
扫一扫
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
