美文网首页
Vue全局函数-输入框只能输入金额

Vue全局函数-输入框只能输入金额

作者: liyao丶 | 来源:发表于2020-02-08 10:35 被阅读0次

    首先在vue的main.js中注册全局函数,这里配合使用了element-ui的Message提示,所以得先引入

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    
    Vue.use(ElementUI);
    
    /*金额格式化函数*/
    Vue.prototype.moneyFormat = function (val){ //moneyFormat是函数名
      let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
      if(val){
        if(reg.test(val)){
          return val
        }else {
          ElementUI.Message.error('请输入正确金额')
          return '' "
        }
      }
    }
    
    /*然后在组件中input中调用此函数*/
    <el-input v-model="test" @blur="test=moneyFormat(test)" placeholder="请输入金额" ></el-input>
    
    

    相关文章

      网友评论

          本文标题:Vue全局函数-输入框只能输入金额

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