一个简单的流式布局，根据每个文本的所占用的px, 计算,
添加，删除标签，直接操作 dataList 就可以，计算函数不需要变改
根据文本计算存在一点小瑕疵，大家有更好的实现，可以联系我

template

1
2
3
4
5
<div v-for="row in tagList">
    <div style="flex-direction: row; background-color: white; padding: 16px">
        <text class="tag" v-for="item in row">{{item.name}}</text>
    </div>
</div>

srcipt

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
data() {
    return {
        dataList : []
    }
},
computed : {
    tagList : function(){
        var me = this;
        var tagList = [];
        var charWidth = 30;
        var tagLastRowWidth = 0;
        var rowCount = [];
        me.dataList.forEach(function (item, index) {
            var tagWidth = item.name.length * charWidth + 16;
            tagLastRowWidth += tagWidth;
            if(tagLastRowWidth >= 720){
                rowCount.push(index);
                tagLastRowWidth = tagWidth;
            }
        });
        rowCount.push(me.dataList.length);
        var beginIndex = 0;
        rowCount.forEach(function (len) {
            tagList.push(me.dataList.slice(beginIndex, len));
            beginIndex = len;
        })
        return tagList;
    }
}

style

1
2
3
4
5
6
7
8
9
.tag {
        border-width: 1px;
        border-color: darkorange;
        color: darkorange;
        padding: 8px;
        border-radius: 4px;
        margin-right: 16px;
        font-size: 14wx;
    }