获取当前时间时间戳,返回遵循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-carouselv-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-itemv-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);},