vue的部分文字选中效果-选中变色

野生程序猿-杂烧4年前随意分享328

我们在检索或者要突出部分文字重要的时候,都会有选中变色的效果。vue的文字选中变色研究了一下,没有找到很快速的方法。只能把文字字符串变成了list,然后js循环每个字符,把需要变色的字符找到。

部分文字选中变色.png

<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;

			}


标签: vue

相关文章

vue编译成微信小程序的坑

uniapp最大的好处是方便,最大的问题就是编译后多端的异常难以排查。h5端一切正常,在其他端异常。代码不存在语法上的错误,几乎都是平台的差异性导致的,这个时候多半是经验积累不够,坑踩得不够多。很多时...

前端的多端适配-硬件接口篇

前端的多端适配-硬件接口篇

我们在多端开发的时候经常会遇到硬件接口的坑,比方调用扫一扫。h5网页要扫一扫,小程序要扫一扫,app也要扫一扫。我们 正常都是一边开发,一边h5端网页调试。但是h5端根本没有办法扫一扫啊?没有支付啊?...

vue通过组件的方式制作教学软件翻牌游戏环节

vue通过组件的方式制作教学软件翻牌游戏环节

为了方便学生记忆学习,将记忆知识点做成了翻牌游戏形式。由于记忆点知识比较多,我们可以设计成多个关卡,每个关卡就是一些知识点配置,通过组件的形式加载,更为合理,更为方便。【fanpai.vue】<...