富文本——小程序中使用特殊符号及标签

前言：

　　在小程序中输出一段文字，其中的空格和回车会失效，今天就解决这个问题。

正文：

　　主要用<rich-text>组件

<rich-text :nodes="node" space="nbsp"></rich-text>

　　第一种使用方式：

//此为官方推荐，但是不能解决连续空格和回车问题
　　data() {
        return {
            node: [{        //最好是Array形式
                name: "div",    //1.此处为H5标签名   2.不能加<>
                attrs: {        //属性
                    style: 'display:block; line-height: 60px; color: red; text-align:center;'
                },
                children: [{    //子节点
                    type: 'text',
                    text: 'Hello&nbsp;uni-app!'
                },
                {
                    name: "br"
                },
                {
                    name: "img",
                    attrs: {
                        style: "width:50px; height:50px;",
                        src: "http://p3.qhimgs0.com/dr/280_200_60/t0111a9683741bad11d.jpg"
                    }
                }
                ]
            }]
        }
    },

　　第二种使用方式：

　　//此方式会影响效率，但是可以解决连续空格问题
　　data() {
        return {
            node: "Hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uni-app!<br>Hello&nbsp;&nbsp;uni-app!",
        }
    }