vue开发：选中的数组对象中总文字超过20个字只截取前20个
最近开发的需求，文本选中的文字只截取前面的前20个，因为文本有多段，所以每一段都放在一个数字里面，最后放入一个大的数组，形成一个数组对象：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue开发：选中的数组对象中总文字超过20个字只截取前20个</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
margin: 50px;
}
</style>
</head>
<body>
<div id="app">
<span v-for="(item, index) in selectedText" :key="index">
<span v-for="(item2, index2) in item.childId" :key="index2">{{item2}}</span>
</span>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
selectedText: [
{
childId: [
"我",
"们",
"过",
"了",
"江",
"，"
]
},
{
childId: [
"然",
"后",
"进",
"了",
"车",
"站",
"。"
]
},
{
childId: [
"我",
"买",
"票",
"，",
"他",
"忙",
"着",
"照",
"看",
"行",
"李",
"。",
"行",
"李",
"太",
"多",
"了",
",",
]
}
]
}
},
created() {
// 获取选中文字的长度
let allLength = 0;
// 获取文字不超过20个字的那个下标
let iIndex = 0;
// 获取文字不超过20个字的那个item
let endObj = {};
// 获取文字不超过20个字的前面集合的总字数
let newLength = 0;
for (var i = 0; i < this.selectedText.length; i++) {
allLength += this.selectedText[i].childId.length;
if (allLength > 20) {
iIndex = i;
endObj = this.selectedText[i];
break;
}
if (allLength <= 20) {
newLength = allLength;
}
}
// 获得符合条件的集合
let selectedText = this.selectedText.slice(0, iIndex);
// 还剩多少到20
let residue = 20 - newLength;
// 获得还需要的集合
let needChildId = endObj.childId.slice(0, residue);
endObj.childId = needChildId;
selectedText.push(endObj);
this.selectedText = selectedText;
console.log(this.selectedText, 'selectedText---')
},
methods: {
}
})
</script>
</body>
</html>