• 本站不接受任何被列入廣告發文黑名單的電子信箱。如您無法註冊,可能是您使用的電子信箱為廣告黑名單信箱。正常的信箱都是可以正常註冊。

    如果您可以証實您的信箱非廣告黑名單,請自行來信 hstaryoching#gmail.com 申請。

    申請請留下您的正統名稱及信箱,並告知從何得知及想進來的理由。

  • 浩瀚星空站已經重新整合並新增新的開發小站天地。

    採用新版的xenforo 2.2.3 做為最新的站點系統。

    中文搜尋已在本站啟用成功,歡迎多加測試看看

    有問題請再回報

  • 游客 您好:

    目前「IT人巴啦啦天地」需要數個專家協助發表文章。

    只要您願意,可以直接與我 ihstat 連絡。我將會給你「專家」身份。

    成為「專家」有什麼好處?目前暫時還沒有。我也只願意提供最多10名會員有這樣的身份。

    他可能可以成為未來非常高的權限。(除了管理) 也可以獲得由浩瀚星空站提供的資源。

教學 金額輸輸入框設計(會自動帶千位元處理)

JavaScript:
<template>
  <input v-model="dataValue"
            :disabled="disabled"
            @change="handlerchange"
            @focus="focusget"
            @blur="focusout"
            clearable>
  </input>
</template>

<script>
export default {
  name: "MoneyInput",
  created() {
    let self = this;
    self.dataValue = self.value;
    self.focusout();
  },
  props: {
    value: {
      type: [Number, String],
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      dataValue:0,
      //disabled:false,
      isFocus:false,
    };
  },
  watch: {
    dataValue: {
      immediate: true,
      handler(val) {
        //回傳值要去除千分號處理
        val = parseInt(this.delcommafy(val));
        val = isNaN(val) ? 0 :val;
        this.$emit('input',val);
      },
    },
    value: {
      immediate: true,
      handler(val) {
        //外部數值改變連動處理
        let self = this;
        self.dataValue = val;
        if(self.isFocus==false){
          self.focusout();
        }
      },
    },
  },
  methods: {
    focusout(){
      let self = this;
      self.isFocus = false;    
      self.dataValue = self.comdify(self.delcommafy(self.dataValue));
    },
    focusget(){
      let self = this;
      self.isFocus = true;
      self.dataValue = self.delcommafy(self.dataValue);
    },
    handlerchange(){
      let self = this;
      self.$emit("change", self.value);
    },
    //數值加上千分號處理
    comdify(n) {
      if(!n) return n;
      let str = n.split('.');
      let re = /\d{1,3}(?=(\d{3})+$)/g;
      let n1 = str[0].replace(re, "$&,");
      return str.length > 1 && str[1] ? `${n1}.${str[1]}` : `${n1}`;
    },
    //去除千分位中的‘,’
    delcommafy(num){
      if(!num) return num;
      num = num.toString();
      num = num.replace(/,/gi, '');
      return num;
    },
  },
}
</script>

<style scoped>

</style>

可直接引入後,帶入參數 value 或是 v-model 來處理控制。
引入值如果不是數值會轉帶為0出來。
 
最后編輯:
頂部