更新记录

v1.0.0（2023-11-29）

(2023.11.29): v1.0.0 - 初步实现核心方案

平台兼容性

nvue 纯css文本自然换行组件方案1

• 由于 nvue 的各种限制，要想实现文本自然换行效果，没 web 那么容易
• 该组件提供了一种纯css实现的方案，如果有人需要，我下次再提供优化方案2
• （工作之余做的，精力有限，若无关注和收益，自然也不会有动力继续做下去了）

案例代码

<template>
    <Layout>
            <Navbar></Navbar>
            <KlTextWrapRowsCv :list="list"></KlTextWrapRowsCv>
    </Layout>
</template>

<script>
    import Layout from '../../components/kl-text-wrap-rows-cv/layout.vue'
    import Navbar from '../../components/kl-text-wrap-rows-cv/navbar.vue'
    import KlTextWrapRowsCv from '../../components/kl-text-wrap-rows-cv/kl-text-wrap-rows-cv.vue'
    export default {
        components: {
            Layout,
            Navbar,
            KlTextWrapRowsCv
        },
        data() {
            const list = []
            const mockText = [
                "投币啦3连投币啦three money let's go投币啦3连投币啦three money let's go投币啦3连",
                "投币啦3连投币啦three money let's go投币啦3连投币啦three money let's g",
                "three money letthree money letthree money let",
                "three money letthree money letthree money let",
                "three money letthree money letthree money let"
            ]
            let text = ''
            for(let i=0; i<6; i+=1) {
                list.push({
                    key: `kltw-item-${i}`,
                    label: '爱看小电视：',
                    text:mockText[parseInt(1+Math.random()*3)],
                    leftTagList: [{
                        key: 'kl-item-tag-1',
                        type: 'food',
                        text: '100+KG',
                        img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAgNJREFUWEfFlo1NQzEMhN1JgEmASYBJgEmASYBJYBPQh3KV4/w4r0Xtkyo9vSa+s++ceGdnfnb/hH9Z4nxvjXcoAQDvzOym/DwuJD7M7NPMXjNCWwkI+MnMAPJgvEPo2sxYxzvfIPE8IrKFAAHfV4IWME8Wwl0SqwQETmlvs7KG/x/NTBW7intXCJDJV9F1K7jwFAM5HjyJFQKUnQANexdImlOhUSfcm9lLIbA3Z0ZAm8ic4P7xGscuGBmvSSYjoNJXZSsV4T+yxVzKKDOepNgnlBH4iSUrqZIJz8gTDZArUbV3RkDlR3uv6+h7NDjuZ230TvV9RkDtE9dgJJ4oSySgKsQE1NJ/cWcERkBoPz3dHBMkjAauiGUVgG3UGQ3piOHxGghMJZwRAJwq9DTsEYsSyCsRo5J2RmDkZH0fnu+uUzBv9Eol7aFtSHZk0vMCBAEZnZ6VhzICo1aK17KOYM0HZI534rHctHBGACCZrtd2fjDhXSdiz6DdCykjgJyz+2DLzax7oKrMCgFAtJkqxEtphQSeIJHmUlshoAoAjMaZ++ON6TNvyGcE4h0u9wOCzpoJIyh6MxtqEhpWbuUyYrOfbuMcIKdrKBWZdCCd3QXd6aUjtiahi9L3IvM2mYyqML0KrIKvmC9dEwmcFDxKcHLwSGA0fqVlPGZB1obHxF7ae3YCvw2ulyGA+jFVAAAAAElFTkSuQmCC',
                        styles: {
                            root: 'background-color:#aed5e9;',
                            text: 'color:black;'
                        }
                    },
                    {
                        key: 'kl-item-tag-2',
                        type: 'thing',
                        text: '10',
                        img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAgCAYAAACVU7GwAAAAAXNSR0IArs4c6QAAAoRJREFUWEelWItNAzEMtSeBTgKdBDoJ7SSUSSiTUCYxeqfk5Dh24kCk6qr2kry89/y5Y/rDEJFHInohoucyHdd7+Y7rjYi+mBnX5cHZGQrIOTunAL0y82VhDqVAicgbEa2AsRjAXhrcFJSIfCqZ7GaQR0sEGaukHjk3Zj7OWAtBFbnenU1w6gszX+3iIoL7X9XvAGxBYv6RmasHO4wjUJYhLHKKzFsO8a12gFwnEQFIyI/gqOPOzIeIMReUI9mUdmcO2NikLYBxSA0sXLMDVU4GGerIALKBsLGkmQiAnb3I9ECJXoyZh8EgIvAMWNDj4HnGkdiVsdnQCf1dAk//IFXM5sBjWomOVQsKRq26h7INIhOB0EWlE6U6iDq2dlCOl5oNVEbHSbVh654pQMX4lq2GXQ3KmlXnEQ/EHt6jVBHIjvV0+mgMr0HZxDdLvPjfjZ5oYmEbgfFgylZjFQ1K+2kEaKmOKbmeTLbXe6RA1ZoGmquMP6hzo/LgGBrzvVJlb23MHjG1JMtCutA+xPfq1RCUDtMud2QMVu9xCjP+2mQnog+wbe4J5dOgpqVlYGav1emYFxHt4YaEKCUMq/gAkM0/uNXN8CKiy1mYEmzuSCfDEmFeDYwAWfBNrRyVmSW2Rq3LpMyQLfoWlD1Bii2nUwgDxSlnnd8sKEiom7Fp61qks9Ug27p0LGG9TJM3BTaKJJUmvETqKhG1w/bkIbBZd1GY9ADl2+HBIm7Ns6CsaYNGcP3BQQGzzf6emWtvbTLzttmk95raYdZ/13cG3tOx12/hN3yiB9JUpZg+IRfW0ABGHWemLC61OylQSk68aVkBtwSmni4NStOhPAN566f6Ddd/vQr6BfEwkDAPCvKcAAAAAElFTkSuQmCC',
                        styles: {
                            root: 'background-color:#f38f2b;',
                            text: 'color: white;'
                        }
                    }],
                    rightImageList: [
                        {
                            key: 'kl-item-rimg-1',
                            img: 'data:image/png;base64,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'
                        }
                    ]
                })
            }
            return {
                list
            }
        }
    }
</script>