【第013篇】基于vue+elementui设计的数字区间框组件

最新推荐文章于 2024-05-10 13:55:56 发布

嘉&年华

最新推荐文章于 2024-05-10 13:55:56 发布

阅读量2.4k

点赞数

分类专栏： # Vue和Element笔记文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/u011298909/article/details/125118309

版权

一、组件效果
在这里插入图片描述
二、组件代码
1、在components目录下新建 input-number-range文件夹，并在其中新建一个index.js和src文件夹，在src文件夹中新建一个input-number-range.vue文件。

在这里插入图片描述
2、打开input-number-range.vue文件，将下面代码复制到此文件中并保存。

<template>
  <div>
    <div class="input-number-range" :class="{ 'is-disabled': disabled }">
      <div class="flex">
        <div>
          <!--
          blur:最小值失焦事件
          focus:最小值聚焦事件
          input:最小值输入事件
          change:最小值change事件
          -->
          <el-input
              ref="input_from"
              v-model="userInputForm"
              :disabled="disabled"
              placeholder="最小值" size="small"
              @blur="handleBlurFrom"
              @focus="handleFocusFrom"
              @input="handleInputFrom"
              @change="handleInputChangeFrom"
          ></el-input>
        </div>
        <div class="center">
          <span>至</span>
        </div>
        <div class="to">
          <!--
          blur:最大值失焦事件
          focus:最大值聚焦事件
          input:最大值输入事件
          change:最大值change事件
          -->
          <el-input
              ref="input_to"
              v-model="userInputTo"
              :disabled="disabled" size="small"
              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 }