基于element UI input组件自行封装“数字区间”输入框组件

这篇具有很好参考价值的文章主要介绍了基于element UI input组件自行封装“数字区间”输入框组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

问题描述

在开发时遇到一个数字区间输入框的需求,如下图:

基于element UI input组件自行封装“数字区间”输入框组件

项目使用的是vue,组件库用的是element UI,但是element UI并没有提供数字区间组件,只提供了InputNumber 计数器输入框,如果用两个计数器输入框进行拼接也能满足需求,但是样式调试起来太过于复杂且不够灵活,不能令人满意,并且该数字区间输入框在其它界面也有这种需求,于是就在element input输入框的基础上自行封装了一个数字区间组件使用。

实现效果

实现效果如下:

基于element UI input组件自行封装“数字区间”输入框组件

使用方式如下:

<input-number-range :disabled="isDisabled" :precision="num" v-model="value"></input-number-range>

其中disabled属性控制是否禁用,precision属性控制精度默认为0即只能输入整数,v-model双向绑定要传递的值,该值是一个数组类型 [最小值,最大值]

另外该组件只能输入数字,输入其他非数字,或错误数字(多个小数)都会默认为空;在先输入最小值时,如果后输入的最大值小于最小值,则最大值默认为最小值,同理先输入最大值时,如果后输入的最小值大于最大值,则最小值默认为最大值

实现代码

实现代码可以分为两块一块为组件的封装代码,一块为上述实现效果的演示代码

数字区间组件代码

<template>
  <div>
    <div class="input-number-range" :class="{ 'is-disabled': disabled }">
      <div class="flex">
        <div class="from">
          <el-input
            ref="input_from"
            v-model="userInputForm"
            :disabled="disabled"
            placeholder="最小值"
            @blur="handleBlurFrom"
            @focus="handleFocusFrom"
            @input="handleInputFrom"
            @change="handleInputChangeFrom"
          ></el-input>
        </div>
        <div class="center">
          <span></span>
        </div>
        <div class="to">
          <el-input
            ref="input_to"
            v-model="userInputTo"
            :disabled="disabled"
            placeholder="最大值"
            @blur="handleBlurTo"
            @focus="handleFocusTo"
            @input="handleInputTo"
            @change="handleInputChangeTo"
          ></el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InputNumberRange',

  props: {
  	// 初始化范围
    value: { required: true },

    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },

    // 精度参数
    precision: {
      type: Number,
      default: 0,
      validator(val) {
        return val >= 0 && val === parseInt(val, 10)
      }
    }
  },

  data() {
    return {
      userInputForm: null,
      userInputTo: null
    }
  },

  watch: {
    value: {
      immediate: true,
      handler(value) {
      	/** 初始化范围 */
        if (value instanceof Array && this.precision !== undefined) {
          this.userInputForm = typeof value[0] === 'number' ? value[0] : null
          this.userInputTo = typeof value[1] === 'number' ? value[1] : null
        }
      }
    }
  },

  methods: {
    // 根据精度保留数字
    toPrecision(num, precision) {
      if (precision === undefined) precision = 0
      return parseFloat(
        Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)
      )
    },

    handleBlurFrom(event) {
      this.$emit('blurfrom', event)
    },

    handleFocusFrom(event) {
      this.$emit('focusfrom', event)
    },

    handleBlurTo(event) {
      this.$emit('blurto', event)
    },

    handleFocusTo(event) {
      this.$emit('focusto', event)
    },

    handleInputFrom(value) {
      this.$emit('inputfrom', value)
    },

    handleInputTo(value) {
      this.$emit('inputto', value)
    },

    // from输入框change事件
    handleInputChangeFrom(value) {
      // 如果是非数字空返回null
      if (isNaN(value) || value === '') {
        this.$emit('input', [null, this.userInputTo])
        this.$emit('changefrom', this.userInputForm)
        return
      }

      // 初始化数字精度
      this.userInputForm = this.setPrecisionValue(value)

      // 如果from > to 将from值替换成to
      if (typeof this.userInputTo === 'number') {
        this.userInputForm =
          parseFloat(this.userInputForm) <= parseFloat(this.userInputTo)
            ? this.userInputForm
            : this.userInputTo
      }
      this.$emit('input', [this.userInputForm, this.userInputTo])
      this.$emit('changefrom', this.userInputForm)
    },

    // to输入框change事件
    handleInputChangeTo(value) {
      // 如果是非数字空返回null
      if (isNaN(value) || value === '') {
        this.$emit('input', [this.userInputForm, null])
        this.$emit('changefrom', this.userInputTo)
        return
      }

      // 初始化数字精度
      this.userInputTo = this.setPrecisionValue(value)

	  // 如果to < tfrom 将to值替换成from
      if (typeof this.userInputForm === 'number') {
        this.userInputTo =
          parseFloat(this.userInputTo) >= parseFloat(this.userInputForm)
            ? this.userInputTo
            : this.userInputForm
      }
      this.$emit('input', [this.userInputForm, this.userInputTo])
      this.$emit('changeto', this.userInputTo)
    },

    // 设置成精度数字
    setPrecisionValue(value) {
      if (this.precision !== undefined) {
        const val = this.toPrecision(value, this.precision)
        return val
      }
      return null
    }
  }
}
</script>
<style lang="scss" scoped>
// 取消element原有的input框样式
::v-deep .el-input--mini .el-input__inner {
  border: 0px;
  margin: 0;
  padding: 0 15px;
  background-color: transparent;
}
.input-number-range {
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}
.flex {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
  align-items: center;
  .center {
    margin-top: 1px;
  }
}
.is-disabled {
  background-color: #eef0f6;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>

上述就是完整的组件代码,写好组件代码后,就是在项目中使用,有两种方式,一种是使用时在通过引用进行使用如下:

<template>
  <div>
   <InputNumberRange></InputNumberRange>
  </div>
</template>

<script>
import InputNumberRange from './components/inputNumberRange.vue'
export default { 
    name: "XXXX"
    components: {
    InputNumberRange,
  },
  data() {}
}
</script>

另一种方式是在main.js中进行全局组测,这样就可以自由使用<input-number-range>标签,如下:

import InputNumberRange from './components/inputNumberRange.vue' 
Vue.component(InputNumberRange.name, InputNumberRange)

示例演示代码

<template>
  <div class="main">
    <!-- 演示操作按钮模块 -->
    <div class="caseHeader">
      <div>
        <el-switch
          v-model="isDisabled"
          size="small"
          active-text="禁用"
          @change="switchChange"
        >
        </el-switch>
      </div>
      <div style="display: flex">
        <span>精度:</span>
        <el-input-number
          size="small"
          v-model="num"
          @change="precisionChange"
          :min="0"
          :max="10"
          label="描述文字"
        ></el-input-number>
      </div>
      <div>
        <el-button type="link" size="small" @click="reset">重置</el-button>
      </div>
    </div>
    <!-- 数字区间使用模块 -->
    <div class="numberRange">
      <el-form ref="form" :model="formData" label-width="80px">
        <el-form-item label="数字区间">
          <input-number-range
            :disabled="isDisabled"
            :precision="num"
            v-model="formData.numberRange"
          ></input-number-range>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestCase",
  data() {
    return {
      isDisabled: false, // 是否禁用
      num: 0, // 精度
      formData: {
        numberRange: [],
      },
    };
  },
  methods: {
    /** 重置方法 */
    reset() {
      this.formData.numberRange = [];
    }
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  margin: 16px;
  position: relative;
}

.numberRange {
  width: 400px;
}

.caseHeader {
  width: 400px;
  display: flex;
  justify-content: space-between;
  margin: 24px;
}
</style>

上述就是数字区间输入组件的实现即演示内容文章来源地址https://www.toymoban.com/news/detail-505238.html

到了这里,关于基于element UI input组件自行封装“数字区间”输入框组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于vue element-ui 封装上传图片组件 功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等

    我们在开发后台时肯定避免不了上传图片的功能 例如: 上传图片回显 上传完成 : 预览查看 , 删除等 如果是图片列表,还可能让你拖动图片排序 有的后台项目可能要给图片添加水印,添加标记 有的后台可能要炫酷一点 添加进度条功能 现在我们要完成上面的一系列功能,这里我

    2024年02月16日
    浏览(57)
  • Vue2自己封装的基础组件库或基于Element-ui再次封装的基础组件库,如何发布到npm并使用(支持全局或按需引入使用),超详细

    以下我以 wocwin-admin-vue2 项目为例 修改目录结构,最终如下 1、导入组件,组件必须声明 name 2、定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册 3、导出的对象必须具有 install,才能被 Vue.use() 方法安装(全局使用) 4、按需引入 5、packa

    2024年02月08日
    浏览(79)
  • Element UI 日期封装自定义组件

    日常工作中我们会遇到要封装日期组件的情况,例如:element组件日期选择开始时间,结束时间组件不能直接使用时,重复使用到日期选择,我们就不得不去封装。 其实很简答,我不做过多讲解,直接上代码,急拿急用。 代码如下(示例): 代码如下(示例): 这样就可以

    2024年02月15日
    浏览(34)
  • 下拉框组件的封装(element ui )

         当使用 Element UI 封装下拉框组件时,通常需要考虑以下几个方面:组件的基本结构、数据的传递与绑定、事件处理以及样式的定制。接下来,我将详细介绍如何针对这些方面进行封装。     首先,我们需要创建一个 Vue 组件来封装下拉框。在 Vue 项目中,通常将组件的模

    2024年02月22日
    浏览(49)
  • vue2+element ui封装搜索组件

    组件使用 封装组件:vueSearch 下拉多选组件:selectecho

    2024年02月08日
    浏览(52)
  • element UI 组件封装--搜索表单(含插槽和内嵌组件)

    可根据需要,参考姓名和工作自行增加更多常用的默认搜索项 具体原理可参考 https://blog.csdn.net/weixin_41192489/article/details/127966234 可直接在 SearchForm 内部通过默认插槽添加更多搜索项 必要变量有 searchData 和 searchOption 必要方法有 reset

    2024年02月06日
    浏览(39)
  • Vue + Element UI 前端篇(七):功能组件封装

    为了避免组件代码的臃肿,这里对主要的功能部件进行封装,保证代码的模块化和简洁度。 组件结构 组件封装重构后,试图组件结构如下图所示 代码一览 Home组件被简化,包含导航、头部和主内容三个组件。 Home.vue HeadBar.vue MenuBar.vue Main.vue 国际化语言切换也被封装成为了组

    2024年02月09日
    浏览(38)
  • element ui 表格组件与分页组件的二次封装

    目录 效果图  组件封装  parseTime函数 debounce 函数 render通用渲染模版 页面使用 【扩展】vue 函数式组件 函数式组件特点: 函数式组件的优点: 【扩展】vue中的render函数 一、初步认识render函数 二、为什么使用render函数 三、render函数的解析 【扩展】添加操作栏显示权限 结构

    2024年02月08日
    浏览(46)
  • vue3封装element-ui-plus组件

    最近看视频学习封装公共组件,将学习的内容记录以下,方便以后cv。 下面跟未来的自己说:         先说思路再放代码嗷,我怕你以后忘了。要cv直接往最后拉。 思路:         其实主要是通过slot去接收父组件传递过来的模板。父组件引用了组件件,往里面传了个表单,

    2024年02月09日
    浏览(67)
  • vue Element ui上传组件el-upload封装

    注释: 1. limit 可上传图片数量 2. lableName 当前组件name,用于一个页面多次使用上传组件,对数据进行区分 3. upload 上传图片发生变化触发,返回已上传图片的信息 4. imgUrl 默认图片

    2024年02月11日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包