【資料圖】

Hi,我是51CTO新人，非常開(kāi)心能和大家一起學(xué)習(xí)，以后請(qǐng)大家多多關(guān)照哦，本人目前在一家中型企業(yè)擔(dān)任web前段開(kāi)發(fā)工程師，主要工作任務(wù)開(kāi)發(fā)小程序，后臺(tái)管理系統(tǒng)，數(shù)據(jù)大屏可視化，維護(hù)升級(jí)舊項(xiàng)目。

最近公司項(xiàng)目有需要，限定文本寬度，用戶(hù)輸入文本自動(dòng)計(jì)算插入換行字符，可能有人疑問(wèn)，css不是會(huì)自動(dòng)換行的屬性，我們的項(xiàng)目是需要把文字和圖片結(jié)合自動(dòng)化生成全新的插畫(huà)，特殊的場(chǎng)景需要字段之間需要換行符分開(kāi)來(lái)區(qū)分當(dāng)前文本換行標(biāo)志，看代碼，代碼有備注

<script>    var query;    export default {        data() {            return {                str:"",                height:null,                width:null,                data:"",                lineHeight:25 //記錄行高判斷是否產(chǎn)生換行            };        },        methods: {            setData(obj) {                let that = this;                let keys = [];                let val, data;                Object.keys(obj).forEach(function(key) {                    keys = key.split(".");                    val = obj[key];                    data = that.$data;                    keys.forEach(function(key2, index) {                        if (index + 1 == keys.length) {                            that.$set(data, key2, val);                        } else {                            if (!data[key2]) {                                that.$set(data, key2, {});                            }                        }                        data = data[key2];                    })                });            },            getBoxHeight() { //獲取左右兩邊高度                return new Promise((resolve, reject) => {                    query = wx.createSelectorQuery();                    query.select("#one").boundingClientRect();                    query.exec((res) => {                        this.height = res[0].height                        this.width = res[0].width                        this.setData({                            height: res[0].height,                            width: res[0].width,                        })                        resolve();                    });                })            },            async getWrapString(str,styles){                if(!str||str.length<=0) return "";                this.data = str                //下面將上面初步處理的字符串進(jìn)行字符分割。                var words = [],temp = str.split(" ");//根據(jù)單詞邊界進(jìn)行初次分割，分割后的non-CJK字符會(huì)變成一個(gè)整體，但CJK字符需要進(jìn)行二次分割                //2.對(duì)英文單詞或一串中文進(jìn)行二次分割                for(var i=0;i {                    item.width = widthlist[index]                })                string = string.substring(0,string.length-1);                console.log(lines)                console.log(oneline)                console.log(widthlist)                console.log(string)                console.log(list)                //4.2移除行容器                this.str = ""                //返回計(jì)算結(jié)果                // return list;            },            //傳入一個(gè)字符串，判斷是否包含CJK字符串，CJK即中國(guó)日本韓國(guó)文字字符。            isCJKCharacter(ch){                /*                參考網(wǎng)站：https://blog.csdn.net/iteye_4476/article/details/81652883，來(lái)源Unicode官網(wǎng)                CJK字符不同于其他字符，CJK字符可以在任意地方換行，不像英文字符等正常情況必須在單詞后換行                截止20190725，根據(jù)我查到的資料（Unicode 5.0版），js中的Unicode為2個(gè)字節(jié),CJK字符在2個(gè)字節(jié)的unicode中包括以下范圍                //大多數(shù)情況下，可以取1.~5.來(lái)判斷CJK字符                1.標(biāo)準(zhǔn)CJK文字                    1.1 [\u3400-\u3db5] => CJK統(tǒng)一表意文字?jǐn)U展A (發(fā)行版3.0)                    1.2 [\u4e00-\u9fa5] => CJK統(tǒng)一表意文字 (發(fā)行版1.1) (常用來(lái)簡(jiǎn)單判斷中文字符)                    1.3 [\u9fa6-\u9fbb] => CJK統(tǒng)一表意文字 (發(fā)行版4.1)                    1.4 [\uf900-\ufa2d] => CJK兼容文字 (發(fā)行版1.1)                    1.5 [\ufa30-\ufa6a] => CJK兼容文字 (發(fā)行版3.2)                    1.6 [\ufa70-\ufad9] => CJK兼容文字 (發(fā)行版4.1)                    (以下兩項(xiàng)編碼超過(guò)兩個(gè)字節(jié)，js中暫時(shí)不能用，但是還是寫(xiě)一下(js中無(wú)法使用的編碼范圍前面有雙斜杠//標(biāo)志)：                    //1.7 [\u20000-\u2a6d6] => CJK統(tǒng)一表意文字?jǐn)U展B (發(fā)行版3.1)                    //1.8 [\u2f800-\u2fa1d] => CJK兼容補(bǔ)充 (發(fā)行版3.1))                 2. [\uff00-\uffef] => 全角中英文標(biāo)點(diǎn)符號(hào)、半寬片假名、半寬平假名、半寬韓文字母                3. [\u2e80-\u2eff] => CJK部首補(bǔ)充                4. [\u3000-\u303f] => CJK標(biāo)點(diǎn)符號(hào)                5. [\u31c0-\u31ef] => CJK筆劃                6. [\u2f00-\u2fdf] => 康熙部首                7. [\u2ff0-\u2fff] => 漢字結(jié)構(gòu)描述字符                8. [\u3100-\u312f] => 注音符號(hào)                9. [\u31a0-\u31bf] => 注音符號(hào)(閩南語(yǔ)客家語(yǔ)擴(kuò)展)                10. [\u3040-\u309f] => 日文平假名                11. [\u30a0-\u30ff] => 日文片假名                12. [\u31f0-\u31ff] => 日文片假名拼音擴(kuò)展                13. [\uac00-\ud7af] => 韓文拼音                14. [\u1100-\u11ff] => 韓文字母                15. [\u3130-\u318f] => 韓文兼容字母                //16. [\u1d300-\u1d35f] => 太玄經(jīng)符號(hào)                17. [\u4dc0-\u4dff] => 易經(jīng)六十四卦象                18. [\ua000-\ua48f] => 彝文音節(jié)                19. [\ua490-\ua4cf] => 彝文部首                20. [\u2800-\u28ff] => 盲文符號(hào)                21. [\u3200-\u32ff] => CJK字母及月份                22. [\u3300-\u33ff] => CJK特殊符號(hào)(日期合并)                23. [\u2700-\u27bf] => 裝飾符號(hào)(非CJK專(zhuān)用)                24. [\u2600-\u26ff] => 雜項(xiàng)符號(hào)(非CJK專(zhuān)用)                25. [\ufe10-\ufe1f] => 中文豎排標(biāo)點(diǎn)                26. [\ufe30-\ufe4f] => CJK兼容符號(hào)(豎排變體、下劃線、頓號(hào))                */                var cjk = {                    NO1Unihan: ["\\u3400-\\u3db5","\\u4e00-\\u9fa5","\\u9fa6-\\u9fbb","\\uf900-\\ufa2d","\\ufa30-\\ufa6a","\\ufa70-\\ufad9","",""],                    NO2UFF00: ["\\uff00-\\uffef"],                    NO3U2E80: ["\\u2e80-\\u2eff"],                    NO4U3000: ["\\u3000-\\u303f"],                    NO5U31C0: ["\\u31c0-\\u31ef"],                    NO6U2F00: ["\\u2f00-\\u2fdf"],                    NO7U2FF0: ["\\u2ff0-\u2fff"],                    NO8U3100: ["\\u3100-\\u312f"],                    NO9U31A0: ["\\u31a0-\\u31bf"],                    NO10U3040: ["\\u3040-\\u309f"],                    NO11U30A0: ["\\u30a0-\\u30ff"],                    NO12U31F0: ["\\u31f0-\\u31ff"],                    NO13UAC00: ["\\uac00-\\ud7af"],                    NO14U1100: ["\\u1100-\\u11ff"],                    NO15U3130: ["\\u3130-\\u318f"],                    NO16U1D300: [""],//\\u1d300-\\u1d35f                    NO17U4DC0: ["\\u4dc0-\\u4dff"],                    NO18UA000: ["\\ua000-\\ua48f"],                    NO19UA490: ["\\ua490-\\ua4cf"],                    NO20U2800: ["\\u2800-\\u28ff"],                    NO21U3200: ["\\u3200-\\u32ff"],                    NO22U3300: ["\\u3300-\\u33ff"],                    NO23U2700: ["\\u2700-\\u27bf"],                    NO24U2600: ["\\u2600-\\u26ff"],                    NO25UFE10: ["\\ufe10-\\ufe1f"],                    NO26UFE30: ["\\ufe30-\\ufe4f"]                };                var reg,str="[";                for(var k in cjk){                    str+=cjk[k].join("");                }                str+="]+";                if(str!="[]+"){                    reg = new RegExp(str,"m");                    return reg.test(ch);                }                return null;            }        },        onLoad() {                    },        onShow() {            this.getWrapString("as中文加快速度\n愛(ài)上對(duì)方過(guò)后就山東科技撒的謊撒嬌肯定會(huì)撒嬌肯定會(huì)啥接電話撒接電話按時(shí)接電話阿薩德毫無(wú)二帶娃U盾揮灑接電話殺菌燈哭了去玩兒童與歐普諷德誦功邯鄲市規(guī)劃光伏發(fā)電更好的發(fā)幾個(gè)aahsdashdgsahdgsahdgahsdashdgsahdgsahdgsahdg自行車(chē)VB\n你們",{"font-size":"12px","width":"80px"})        }    }</script>

效果如下

新的一年，我們一起加油！！！