网站加入视频,徐州高端模板建站,佛山市门户网站建设,网站跳转站代码数字范围组件 在做筛选时可能会出现数字范围的筛选#xff0c;例如#xff1a;价格、面积#xff0c;但是elementUI本身没有自带的数字范围组件#xff0c;于是进行了简单的封装#xff0c;不足可自行进行优化
满足功能#xff1a;
最小值与最大值的相关约束#xff0…数字范围组件 在做筛选时可能会出现数字范围的筛选例如价格、面积但是elementUI本身没有自带的数字范围组件于是进行了简单的封装不足可自行进行优化
满足功能
最小值与最大值的相关约束当最大值存在最小值大于最大值且失焦自动将最小值赋值为最大值反之亦然。拥有el-input组件本身的属性绑定以及方法可设置精度默认精度为0可使用el-input插槽但需要加前缀start-end-进行区分
numberRange :startValue.syncstartValue :endValue.syncendValue /相关代码
templatediv classinput-number-range :class{ is-disabled: disabled }div classflexel-inputrefinputFromRefclearablev-modelstartValue:disableddisabled:placeholderstartPlaceholderblurhandleBlurFromfocushandleFocusFrominputhandleInputFromchangehandleInputChangeFromv-bind$attrsv-on$listenerstemplate v-for(value, name) in startSlots #[name]slotDataslot :namename v-bindslotData || {}/slot/template/el-inputdiv classcenterspan至/span/divel-inputrefinputToRefclearablev-modelendValue:disableddisabled:placeholderendPlaceholderblurhandleBlurTofocushandleFocusToinputhandleInputTochangehandleInputChangeTov-bind$attrsv-on$listenerstemplate v-for(value, name) in endSlots #[name]slotDataslot :namename v-bindslotData || {}/slot/template/el-input/div/div
/templatescript
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) {// 如果是非数字空返回nullif (value || isNaN(value)) {this.$emit(update:startValue, null);return;}// 初始化数字精度const newStartValue this.setPrecisionValue(value);// 如果from to 将from值替换成toif (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) {// 如果是非数字空返回nullif (value || isNaN(value)) {this.$emit(update:endValue, null);return;}// 初始化数字精度const newEndValue this.setPrecisionValue(value);// 如果from to 将from值替换成toif (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);},},
};
/scriptstyle langscss 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
