elementui写一个自定义的rangeInput的组件

在Vue.js中使用Element UI时，可以通过编写一个自定义组件来创建一个range input。以下是一个简单的自定义range input组件的例子：

<template>
  <el-input-number
    v-model="rangeValue"
    :min="min"
    :max="max"
    @change="handleChange"
  ></el-input-number>
</template>
 
<script>
export default {
  props: {
    value: {
      type: [Number, String],
      default: 0
    },
    min: {
      type: [Number, String],
      default: 0
    },
    max: {
      type: [Number, String],
      default: 100
    }
  },
  data() {
    return {
      rangeValue: this.value
    };
  },
  watch: {
    value(newVal) {
      this.rangeValue = newVal;
    }
  },
  methods: {
    handleChange(value) {
      this.$emit('input', value);
      this.$emit('change', value);
    }
  }
};
</script>

在这个组件中，我们使用了Element UI的el-input-number组件来创建一个具有最小值和最大值的数字输入框。我们定义了value、min和max作为可配置的props。通过watcher监听外部传入的value变化，以保持内部数据rangeValue的同步。当输入值改变时，我们触发两个事件：input和change事件，这样父组件可以通过v-model或@change来响应值的变化。