vue 千分符显示指令

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();
  }
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容