参考资料:
https://segmentfault.com/q/1010000038543596?_ea=87295903
第一种方法:
手写:(温馨提示:这里的style不能写在scoped里,否则css样式无效)
<template>
<div>
<el-button
v-for="item in list"
:key="item.id"
@click="clickBtn(item.value)">{{ item.value }}</el-button>
<div v-html="voiceContent"></div>
</div>
</template>
<script>
export default {
data() {
return {
list: [{id: 1, value: '你们'}, {id: 2, value: '什么'}, {id: 3, value: '来'}],
select: '',
text: '出来没有?你们什么时候来的?',
selectIndex: 1
};
},
computed: {
voiceContent() {
const regText = this.list.map(item => item = item.value).join('|');
let index = 0;
return this.text.replace(new RegExp(regText, 'g'), (a, b, c) => {
if (this.select == a) index++;
return `<span class="${this.select == a && this.selectIndex == index ? 'red' : 'yellow'}">${a}</span>`;
});
}
},
methods: {
clickBtn(value) {
const num = this.text.match(new RegExp(value, 'g')).length;
if (this.select == value && num > this.selectIndex) {
this.selectIndex++;
} else {
this.select = value;
this.selectIndex = 1;
}
}
}
};
</script>
<style>
.yellow{
color: yellow;
}
.red{
color: red;
}
</style>
效果图:
第二种方法:
少侠,看看这个:https://github.com/Lushenggan...
在线体验:
laboratory
有用帮忙点个星星~