获取当前时间时间戳，返回遵循ISO 8601扩展格式的日期
new Date(Date.now()).toISOString()
使用moment库转换回来
this.moment(new Date(Date.now()).toISOString()).format("YYYY-MM-DD")
js去掉富文本中html标签和图片
filterHtmlTag(val) {
if(!val){
return false;
}
// 过滤掉富文本中的所有标签
var filter = val
.replace(/<(p|div)[^>]*>(<br\/?>| )<\/\1>/gi, "\n")
.replace(/<br\/?>/gi, "\n")
.replace(/<[^>/]+>/g, "")
.replace(/(\n)?<\/([^>]+)>/g, "")
.replace(/\u00a0/g, " ")
.replace(/ /g, " ")
.replace(/<\/?(img)[^>]*>/gi, "")
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/'/g, "'")
.replace(/"/g, '"')
.replace(/<\/?.+?>/g, "");
var filterOver =
filter.length > 400 ? filter.slice(0, 400) + "..." : filter;
return filterOver;
},控制伪元素的显示隐藏，并且可以对伪元素添加点击事件
我们需要在css做这种处理
父元素添加：pointer-events: none; 伪元素添加：pointer-events: auto;
<div
@click="ele.unfoldButton=false"
v-html="
filterHtmlTag(ele.filterInfo) ||
filterHtmlTag(ele.labels[0].value)
"
class="text-part"
:class="ele.unfoldButton?'setButton':''"
></div>
.text-part {
height: 115px;
background-color: rgb(242, 242, 242);
padding: 10px;
padding-bottom: 25px;
overflow: hidden;
position: relative;
pointer-events: none;
}
.setButton::after {
content: "V";
position: absolute;
pointer-events: auto;
font-weight: bold;
bottom: 5px;
left: 50%;
font-size: 20px;
color: var(--mainColor);
display: inline-block;
width: 25px;
height: 20px;
line-height: 20px;
cursor: pointer;
border-radius: 50%;
margin-right: 5px;
margin-left: 5px;
text-align: center;
}页面上渲染失败[object Promise]
代码里是这样写的
{{filterHtmlTag(ele.filterInfo, ele.unfoldButton)}}
//改变文字颜色
changeWordColor(str, stringPart) {
str = str.replace(
stringPart,
'<span style="color: var(--mainColor);">' + stringPart + "</span>"
);
return str;
},
async filterHtmlTag(val, slice = false, searchStatus = this.openSearch) {
if (!val) {
return false;
}
// 过滤掉富文本中的所有标签
var filter = val
.replace(/<(p|div)[^>]*>(<br\/?>| )<\/\1>/gi, "\n")
.replace(/<br\/?>/gi, "\n")
.replace(/<[^>/]+>/g, "")
.replace(/(\n)?<\/([^>]+)>/g, "")
.replace(/\u00a0/g, " ")
.replace(/ /g, " ")
.replace(/<\/?(img)[^>]*>/gi, "")
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/'/g, "'")
.replace(/"/g, '"')
.replace(/<\/?.+?>/g, "");
// 是否折叠
var filterOver =
filter.length > 400 ? filter.slice(0, 400) + "..." : filter;
//如果是搜索状态
if (searchStatus) {
filterOver =this.changeWordColor(filterOver, this.propertyValue);
filter = this.changeWordColor(filter, this.propertyValue);
}
return slice ? filterOver : filter;
},最发现是方法中我写了async，这方法变成异步了，所以才这样输出了，所以啊兄弟们没用的东西一定要删了，使用的时候获取实时的数据，别用async,即可解决此异常
将elementui的tab切换与走马灯结合起来
<el-tabs v-model="activeItemId" @tab-click="handleClick">
<!-- 循环 -->
<el-tab-pane label="111" name="1"
> <el-carousel
v-if="ele.dbValueVOS && ele.dbValueVOS.length !== 0"
ref="marquee"
@change="val => setContentInfo(val, index)"
trigger="click"
height="150px"
indicator-position="none"
:autoplay="false"
arrow="always"
>
<el-carousel-item
v-for="item in ele.dbValueVOS"
:key="item.id"
>
<h4>{{ item.propertyName }}</h4>
</el-carousel-item>
</el-carousel>
</el-tab-pane>
</el-tabs>
handleClick(tab, event) {
// 点击tab切换，给走马灯部分指定下标
this.$refs.marquee[0].setActiveItem(this.activeItemId);
// // 将tab的下标指定为走马灯的下标
// this.active = e // tab切换的下标
//获取列表
console.log(tab, event);
},
修改JS数组中的一个对象的元素的值，其他对象的元素值都跟着变了
数组改完相应下标的的对象,其他下标数据也变了
使用$set给数组里的对象赋值,也改变了其他对象
vue $set 给数组集合对象赋值影响到其他元素
vue数据改变影响其他数据的问题
vue 变量赋值变量，两个变量就会互相影响
vue只是给一条数据赋值却影响到了其他数据
setContentInfo(valIndex, parentIndex) {
var {propertyValue} = this.reportList[parentIndex].dbValueVOS[valIndex];
// TODO:给对象中的值赋值，走马灯切换后显示
// this.$set(this.reportList[parentIndex], "filterInfo", propertyValue);
},离大谱了，就是个普通赋值，方法只调了一次，就算指定只给下标为0的数据赋值也影响到了其他数据
颠覆我的认知了，科学不存在了
解决方法如下，直接深拷贝一条，去给数组相应下标的整个对象替换
setContentInfo(valIndex, parentIndex) {
var {propertyValue} = this.reportList[parentIndex].dbValueVOS[valIndex];
let realData =JSON.parse(JSON.stringify(this.reportList[parentIndex]));
realData.filterInfo=propertyValue;
// TODO:给对象中的值赋值，走马灯切换后显示
// this.$set(this.reportList[parentIndex], "filterInfo", propertyValue);
this.$set(this.reportList, parentIndex, realData);
},
