vue.jsでコンポーネントのfilterの引数を複数にする

調べててジャストミートな日本語の情報が見つからなかったので共有します。
ちなみに、マルチバイト、シングルバイト混在文字列をいい感じの長さで切りたかった時のものです。

以下のようにfilterのparameterを複数定義すればOKで、デフォルト値も設定可です。

<script>
// 文字列のByte長を取るfunction
function strByteLength(strSrc) {
  let len = 0;
  const escapedStr = escape(strSrc);
  for (let i = 0; i < escapedStr.length; i++, len++) {
    if (escapedStr.charAt(i) === '%') {
      if (escapedStr.charAt(++i) === 'u') {
        i += 3;
        len++;
      }
      i++;
    }
  }
  return len;
}

export default {
  name: '***コンポーネント名***',
  filters: {
    truncate: (value, len = 10, bytesize = 20, omit = '...') => {
      // stringかチェック
      if (typeof value !== 'string') {
        return value;
      }

      // 一旦、Maxバイト数(bytesize)で対象文字列を前から切り出し
      let str = value.slice(0, bytesize);
      // 切り出し文字数(len)にと半角文字数/2を足す ※大凡文字幅を全角:半角=2:1.5程度で計算
      let sliceLength = len + Math.floor(((str.length * 2) - strByteLength(str)) / 2);
      // bytesizeを超えてた場合は、bytesizeに差し替え ※全て半角のような場合
      sliceLength = sliceLength > bytesize ? bytesize : sliceLength;
      // 文字列を前から切り出した場合はomit文字列を末尾に付与
      str = value.length > sliceLength ? value.slice(0, sliceLength).concat(omit) : value;

      return str;
    },
  },
};
</script>

そして、呼び出し元はこう。
targetStringがtruncateのvalueとして渡ります。

{{ targetString | truncate(20,29) }}

なお、function strByteLengthは何処かからの頂き物です。※ソースを失念しました。。。