Weex richtext 富文本某个字加重显示

• 先来看一下效果图

  
  image.png

直接上代码

<template>
        <div style="width: 690px; margin-left: 30px; flex-wrap: wrap; flex-direction: row; margin-top: 300;">
            <div v-for="(item, index) in configList" :key="index" style="margin-left: 0px; margin-right: 0px; height: 40; align-items: center; justify-content: center;">
                <text :style="{fontSize: item.fontSize, color: item.color}">{{item.value}}</text>
            </div>
        </div>
</template>

<script>

    export default {

        data() {
            return {
                richStr: '测试测试Weex啊发送到发送发大水测试Weex测试Weex测试你是谁测试Weex测试Weex测试, 测试测试Weex测试Weex测试Weex测试我试试额立刻就发牢骚的空间放辣椒水淀粉卢卡斯地方测试Weex测试Weex测试',
                configList: [],
            }
        },
        created() {
            this.setupConfigList()
        },

        methods: {

            setupConfigList(){
                //着重显示的文字
                let tip = '测试'

                let tmpTip = '◉' + tip + '◉'
                let tmpArr = this.richStr.replace(new RegExp(tip, 'g'), tmpTip).split('◉')
                var strArr = tmpArr.filter(e => {
                    return e != ''
                })
                // console.log(JSON.stringify(strArr))
                this.configList = []
                strArr.map(e => {
                    let eArr = e.split('')
                    if (e == tip) {
                        for (var i = 0; i < eArr.length; i++) {
                            this.configList.push({
                                value: eArr[i],
                                fontSize: 30,
                                color: 'red'
                            })
                        }
                    } else {
                        for (var i = 0; i < eArr.length; i++) {
                            this.configList.push({
                                value: eArr[i],
                                fontSize: 28,
                                color: '#333333'
                            })
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped>
</style>

• 如果需要下划线， 或者点击时间可以在configList对象里面配置相关属性， 来支持！