VUE-Element组件（五）input输入框

最新推荐文章于 2024-06-21 18:17:50 发布

w_t_y_y

最新推荐文章于 2024-06-21 18:17:50 发布

阅读量1.8k

点赞数

分类专栏： # VUE页面开发

本文链接：https://blog.youkuaiyun.com/w_t_y_y/article/details/106192627

版权

VUE页面开发专栏收录该内容

26 篇文章

订阅专栏

一、正整数输入框：

<el-input type="number" v-model="money"  @keyup.native="handleNumber($event)"/>



 //输入正整数
    handleNumber(e) {
      // 通过正则过滤小数点后两位
      //e.target.value = e.target.value.match(/^\d*(\.?\d{0,1})/g)[0] || null;
      var keynum = window.event ? e.keyCode : e.which; //获取键盘码
      var keychar = String.fromCharCode(keynum); //获取键盘吗对应的字符
      if (keynum == 189 || keynum == 190 || keynum == 110 || keynum == 109) {
        this.$message.warning('禁止输入小数以及负数');
        e.target.value = '';
      }
    },

二、输入框加入插槽：el-input组件允许插槽，并且可以自定义插槽位置。如：

<el-input v-model="userNameOrAccount" placeholder="输入姓名/域账号" size="mini"
              ><i class="el-icon-search" slot="suffix" @click="searchUser"></i
            ></el-input>