Element基于el-input数字范围输入框的实现

 更新时间:2023年04月28日 16:32:58   作者:凡小多  
本文主要介绍了 Element基于el-input数字范围输入框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

数字范围组件

在做筛选时可能会出现数字范围的筛选,例如:价格、面积,但是elementUI本身没有自带的数字范围组件,于是进行了简单的封装,不足可自行进行优化

满足功能:

  • 最小值与最大值的相关约束,当最大值存在,最小值大于最大值且失焦,自动将最小值赋值为最大值,反之亦然。
  • 拥有el-input组件本身的属性绑定以及方法
  • 可设置精度,默认精度为0
  • 可使用el-input插槽,但需要加前缀start-end-进行区分
<numberRange :startValue.sync="startValue" :endValue.sync="endValue" />

相关代码:

<template>
  <div class="input-number-range" :class="{ 'is-disabled': disabled }">
    <div class="flex">
      <el-input
        ref="inputFromRef"
        clearable
        v-model="startValue"
        :disabled="disabled"
        :placeholder="startPlaceholder"
        @blur="handleBlurFrom"
        @focus="handleFocusFrom"
        @input="handleInputFrom"
        @change="handleInputChangeFrom"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <template v-for="(value, name) in startSlots" #[name]="slotData">
          <slot :name="name" v-bind="slotData || {}"></slot>
        </template>
      </el-input>
      <div class="center">
        <span>至</span>
      </div>
      <el-input
        ref="inputToRef"
        clearable
        v-model="endValue"
        :disabled="disabled"
        :placeholder="endPlaceholder"
        @blur="handleBlurTo"
        @focus="handleFocusTo"
        @input="handleInputTo"
        @change="handleInputChangeTo"
        v-bind="$attrs"
        v-on="$listeners"
      >
        <template v-for="(value, name) in endSlots" #[name]="slotData">
          <slot :name="name" v-bind="slotData || {}"></slot>
        </template>
      </el-input>
    </div>
  </div>
</template>
<script>
export default {
  name: "InputNumberRange",
  props: {
    // inputs: {
    //   type: Array,
    //   required: true,
    //   default: () => [null, null],
    // },
    startValue: {
      type: Number || String,
      default: null,
    },
    endValue: {
      typeof: Number || String,
      default: null,
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },
    startPlaceholder: {
      type: String,
      default: "最小值",
    },
    endPlaceholder: {
      type: String,
      default: "最大值",
    },
    // 精度参数
    precision: {
      type: Number,
      default: 0,
      validator(val) {
        return val >= 0 && val === parseInt(val, 10);
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    startSlots() {
      const slots = {};
      Object.keys(this.$slots).forEach((name) => {
        if (name.startsWith("start-")) {
          const newKey = name.replace(/^start-/, "");
          slots[newKey] = this.$slots[name];
        }
      });
      return slots;
    },
    endSlots() {
      const slots = {};
      Object.keys(this.$slots).forEach((name) => {
        if (name.startsWith("end-")) {
          const newKey = name.replace(/^end-/, "");
          slots[newKey] = this.$slots[name];
        }
      });
      return slots;
    },
  },
  watch: {},
  methods: {
    handleInputFrom(value) {
      this.$emit("update:startValue", value);
    },
    handleInputTo(value) {
      this.$emit("update:endValue", value);
    },
    // from输入框change事件
    handleInputChangeFrom(value) {
      // 如果是非数字空返回null
      if (value == "" || isNaN(value)) {
        this.$emit("update:startValue", null);
        return;
      }
      // 初始化数字精度
      const newStartValue = this.setPrecisionValue(value);
      // 如果from > to 将from值替换成to
      if (
        typeof newStartValue === "number" &&
        parseFloat(newStartValue) > parseFloat(this.endValue)
      ) {
        this.startValue = this.endValue;
      } else {
        this.startValue = newStartValue;
      }
      if (this.startValue !== value) {
        this.$emit("update:startValue", this.startValue);
      }
    },
    // to输入框change事件
    handleInputChangeTo(value) {
      // 如果是非数字空返回null
      if (value == "" || isNaN(value)) {
        this.$emit("update:endValue", null);
        return;
      }
      // 初始化数字精度
      const newEndValue = this.setPrecisionValue(value);
      // 如果from > to 将from值替换成to
      if (
        typeof newEndValue === "number" &&
        parseFloat(newEndValue) < parseFloat(this.startValue)
      ) {
        this.endValue = this.startValue;
      } else {
        this.endValue = newEndValue;
      }
      if (this.endValue !== value) {
        this.$emit("update:endValue", this.endValue);
      }
    },
    handleBlurFrom(event) {
      this.$emit("blur-from", event);
    },
    handleFocusFrom(event) {
      this.$emit("focus-from", event);
    },
    handleBlurTo(event) {
      this.$emit("blur-to", event);
    },
    handleFocusTo(event) {
      this.$emit("focus-to", event);
    },
    // 根据精度保留数字
    toPrecision(num, precision) {
      if (precision === undefined) precision = 0;
      return parseFloat(
        Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)
      );
    },
    // 设置精度
    setPrecisionValue(value) {
      if (this.precision === undefined) return value;
      return this.toPrecision(parseFloat(value), this.precision);
    },
  },
};
</script>
<style lang="scss" scoped>
// 取消element原有的input框样式
::v-deep .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%;
  height: auto;
  justify-content: center;
  align-items: center;
  .center {
    margin-top: 1px;
  }
}
.is-disabled {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  color: #c0c4cc;
  cursor: not-allowed;
}
</style>

到此这篇关于 Element基于el-input数字范围输入框的实现的文章就介绍到这了,更多相关 Element el-input输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue2路由动画效果的实现代码

    Vue2路由动画效果的实现代码

    本篇文章主要介绍了Vue2路由动画效果的实现代码,可以根据不同的路径去改变动画的效果,有兴趣的可以了解一下
    2017-07-07
  • vue自定义指令合集(超实用!)

    vue自定义指令合集(超实用!)

    Vue自定义指令是Vue中一种非常有用的扩展能力,它允许你在标准的模板语法中使用自定义行为,而不需要编写新的组件或者混入,这篇文章主要给大家介绍了关于vue自定义指令的相关资料,需要的朋友可以参考下
    2024-03-03
  • 在Vue中延迟执行某个函数的实现方式

    在Vue中延迟执行某个函数的实现方式

    在Vue中延迟执行某个函数,你可以使用setTimeout()函数或者Vue提供的生命周期钩子函数,本文通过一些示例代码给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-12-12
  • vue-router 路由传参问题(路由传参方式)

    vue-router 路由传参问题(路由传参方式)

    路由传参主要有两种方式一种是路径传参一种是参数传递,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11
  • vue-cli创建项目ERROR in Conflict: Multiple assets emit different content to the same filename index.html问题的解决办法

    vue-cli创建项目ERROR in Conflict: Multiple assets emit dif

    最近vue/cli创建项目后出现了错误,下面这篇文章主要给大家介绍了关于vue-cli创建项目ERROR in Conflict: Multiple assets emit different content to the same filename index.html问题的解决办法,需要的朋友可以参考下
    2023-02-02
  • 深入理解Vue Computed计算属性原理

    深入理解Vue Computed计算属性原理

    Computed 计算属性是 Vue 中常用的一个功能,本篇文章主要介绍了Vue Computed 计算属性原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue.js路由mode配置之去掉url上默认的#方法

    vue.js路由mode配置之去掉url上默认的#方法

    今天小编就为大家分享一篇vue.js路由mode配置之去掉url上默认的#方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 关于element-ui select 下拉框位置错乱问题解决

    关于element-ui select 下拉框位置错乱问题解决

    这篇文章主要介绍了关于element-ui select 下拉框位置错乱问题解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • elementplus实现多级表格(最后一级展示图片)

    elementplus实现多级表格(最后一级展示图片)

    本文主要介绍了elementplus实现多级表格(最后一级展示图片),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • vue控制滚动条滑到某个位置的方法实例

    vue控制滚动条滑到某个位置的方法实例

    当容器有滚动条时,有时需要将滚动条滑到某个位置,下面这篇文章主要给大家介绍了关于vue控制滚动条滑到某个位置的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12

最新评论