vue 千分符显示指令

2023-07-30  本文已影响0人  辉色星空下
Vue.directive("thousand", {
  // 被绑定元素插入父节点时调用
  inserted: function(el, binding) {
    //字符在元素内部的元素中且id=thousand
    //两种写法
    /**如:
     * <div vThousand>
     *    <span id="thousand">
     *      {row.businessUnitPriceExcludingTax?.toFixed(2) || ""}
     *    </span>
     *</div>
     **/
    //字符就在当前元素中
    /**如:
     * <div vThousand>
     *      {row.businessUnitPriceExcludingTax?.toFixed(2) || ""}
     *</div>
     **/
    let thousand = el.querySelector("#thousand");
    const setThousand = () => {
      if (thousand && thousand.innerText) {
        thousand.innerText = parseFloat(thousand.innerText).toLocaleString(
          "zh",
          {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
          }
        );
      } else if (el.innerText) {
        el.innerText = parseFloat(el.innerText).toLocaleString("zh", {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2
        });
      }
    };
    setThousand();
  }
});
上一篇下一篇

猜你喜欢

热点阅读