美文网首页
vue 千分符显示指令

vue 千分符显示指令

作者: 辉色星空下 | 来源:发表于2023-07-30 13:44 被阅读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();
      }
    });
    

    相关文章

      网友评论

          本文标题:vue 千分符显示指令

          本文链接:https://www.haomeiwen.com/subject/eqdspdtx.html