vue的部分文字选中效果-选中变色
我们在检索或者要突出部分文字重要的时候,都会有选中变色的效果。vue的文字选中变色研究了一下,没有找到很快速的方法。只能把文字字符串变成了list,然后js循环每个字符,把需要变色的字符找到。
<view class="learn_body_all" v-for="info_one1 in info"> <view class="learn_body_all_title1" v-if="info_one1.text" > {{info_one1.text}} </view> <view v-for="info_one2 in info_one1.child"> <view class="learn_body_all_title2" v-if="info_one2.text">{{info_one2.text}}</view> <view class="learn_body_all_content" v-for="info_one3 in info_one2.child"> <view class="learn_body_all_content1" v-if="type==1 || type==3"> <text v-for="ss in info_one3[4][0]" :class="ss.class">{{ss.text}}</text> </view> <view class="learn_body_all_content2"> <text v-for="ss in info_one3[4][1]" :class="ss.class">{{ss.text}}</text> </view> <view class="learn_body_all_content3"> <text v-for="ss in info_one3[4][2]" :class="ss.class">{{ss.text}}</text> </view> </view> </view> </view>
【js分割记忆字段,记忆字段是方便学生记忆,这里选中变色效果】
,fenge_jiyiziduan(ziduan_str,fenge_str) { let result=[{class:'',text:ziduan_str}]; if(fenge_str) { let fenge_arr=fenge_str.split("|"); for(let i in fenge_arr) { let this_ziduan=fenge_arr[i]; //console.log(this_ziduan); if(this_ziduan==ziduan_str) { result=[{class:'jiyidian',text:ziduan_str}]; break; }else{ //存在,不存在 if(ziduan_str.indexOf(this_ziduan)==0) { var this_arr=ziduan_str.split(this_ziduan); result=[]; if(this_ziduan) { result.push({class:'jiyidian',text:this_ziduan}); } for(let j in this_arr) { result.push({class:'',text:this_arr[j]}); } break; }else if(ziduan_str.indexOf(this_ziduan)>0){ this_arr=ziduan_str.split(this_ziduan); result=[]; let num=0; for(let j in this_arr) { num++; if(this_arr[j]) { result.push({class:'',text:this_arr[j]}); } if(num!=this_arr.length) { result.push({class:'jiyidian',text:this_ziduan}); } } break; } } } } //console.log(result); return result; }