element el-input 二次封装

说明:为实现输入限制,不可输入空格,长度限制。

inputView.vue

html 复制代码
<template>
  <!-- 输入框 -->
  <el-input
    :type="type"
    :placeholder="placeholder"
    v-model="input"
    @input="inputChange"
    :maxlength="maxlength"
  ></el-input>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: "text",
    },
    value: {
      type: [String, Number],
      default() {
        return "";
      },
    },
    maxlength: {
      type: Number,
      default: 30,
    },
    placeholder: {
      type: String,
      default: "",
    },
  },
  watch: {
    value: {
      handler(val) {
        this.input = val;
      },
      deep: true,
    },
  },
  data() {
    return {
      input: this.value,
    };
  },
  methods: {
    inputChange(value) {
      this.input = value?.replace(/\s/g, "");
      if (this.type === "num") {
       // 做数字型的判断,因为采用input 的 Number 类型,最大值还得做单独匹配,偷懒,所以用了num代替
        this.input = Number(value?.replace(/\D/g, ""));
      }
      this.$emit("input", this.input);
    },
  },
};
</script>

全局注册

components/index.js

main.js 中引入

javascript 复制代码
import Components from '@/components'
Vue.use(Components)

组件中使用

html 复制代码
<inputView
  v-model="propertyForm.count"
  style="width: 80px; margin: 0 10px"
  type="num"
  :maxlength="5"
></inputView>
 
<inputView
  v-model="formInline.riskName"
  placeholder="请输入"
></inputView>
相关推荐
zwjapple1 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
像风一样自由20203 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊4 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术4 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理4 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing4 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器
whale fall5 小时前
npm install安装的node_modules是什么
前端·npm·node.js
烛阴5 小时前
简单入门Python装饰器
前端·python