Uniapp input的maxlength問題

前情

uni-app是我很喜歡的跨平臺框架，它能開發小程序，H5,APP(安卓/iOS),對前端開發很友好，自帶的IDE讓開發體驗也很棒，公司項目就是主推uni-app。

坑位

最近在做一個input字數限制的需求，但是對於如果你輸入有emoji表情的時候會出現在APP端和h5端表現不一致，app端表情算一個長度，而H5端則算2個。

Why?

猜測是uniapp的兼容BUG，app端和h5端未處理成一致

解決方案

對於有emoji的場景暫時放棄使用 maxlength，通過使用v-model+watch+lodash來實現，lodash字符串轉數組的時候會把表情當一位處理，於是有如下代碼。

template代碼如下:

...
<input class="uni-input" placeholder="請設置羣名稱" v-model="newName" />
...

• script中代碼如下，對於爲什麼要延時100毫秒見的另一篇博文https://www.cnblogs.com/xwwin/p/16696448.html：

import { toArray } from 'lodash';
...
watch: {
        newName(newVal) {
            let nameArr = toArray(newVal);
            if (nameArr.length <= 28) {
                return;
            }
            nameArr = nameArr.slice(0, 28);
            setTimeout(() => {
                this.newName = nameArr.join('');
            }, 100);
        }
    }
...

至此完成了input字數限制28個的需求，如果你有更好的方式，期待你的分享。