1.自定义组件 inputNumber.js

<template><el-col :span="width" class="col-wrap"><label class="col-label">累计消费金额</label><div:class="`ys-input-range el-range-editor el-range-editor--mini el-input__inner ${isActive ? 'is-active' : ''}`"><input:type="type"class="el-range-input"autocomplete="off"v-model="fst"placeholder="起始值(≤)"@change="onChange"@focus="onFstFocus"@blur="onFstBlur"onkeyup="value=value.replace(/[^\d.]/g,'')"/><span class="el-range-separator">-</span><input:type="type"class="el-range-input"autocomplete="off"v-model="snd"placeholder="(≤)终止值"@change="onChange"@focus="onSndFocus"@blur="onSndBlur"onkeyup="value=value.replace(/[^\d.]/g,'')"/><iv-show="fst || fst === 0 || snd || snd === 0"class="el-input__icon el-range__close-icon el-icon-circle-close"@click="onClear"/></div></el-col>
</template><script>
export default {props: {value: {required: false,},type: {type: String,},clearable: {type: Boolean,default: true,},width: {type: Number,default: 5,},},watch: {value: {handler(val) {let fst = null;let snd = null;if (Array.isArray(val)) {fst = val[0];snd = val[1];} else {fst = val;}this.fst = fst;this.snd = snd;},immediate: true,},},data() {return {fst: null,snd: null,fstFocus: false,sndFocus: false,hover: false,};},computed: {isActive() {return this.fstFocus || this.sndFocus;},},methods: {onChange() {let val;if (!this.fst && !this.snd) {val = "";} else {val = [this.fst, this.snd];}this.$emit("input", val);},onFstFocus() {this.fstFocus = true;},onFstBlur() {this.fstFocus = false;},onSndFocus() {this.sndFocus = true;},onSndBlur() {this.sndFocus = false;},onClear() {this.fst = null;this.snd = null;this.onChange();},},
};
</script><style lang="scss">
.ys-input-range {display: flex !important;flex-flow: row nowrap;justify-content: stretch;align-items: center;.el-range-input {width: 48%;height: 100%;border: 0;flex: auto;text-align: center;&::placeholder {color: rgb(192, 196, 204);}}input {border: 0; // 去除未选中状态边框outline: none; // 去除选中状态边框background-color: rgba(0, 0, 0, 0); // 透明背景}
}
.col-wrap {display: flex;align-items: center;margin-bottom: 10px;.col-label {width: 70px;text-align: right;font-size: 14px;margin-right: 10px;border-radius: 20px;}
}
</style>

2.使用

 <inputtotalAmt v-model="defaultQueryData.totalAmt" />

3.效果图

自定义数值范围选择组件相关推荐

微信小程序自定义select下拉选择组件
微信小程序自定义select下拉选择组件微信小程序原生开发中,常用到的是从底部弹起的滚动选择器(picker),而有些项目需要用到下拉选择,话不多说,下面就可以把下拉选择封装成一个自定义组件: 1. ...
微信小程序—自定义（城市选择）弹窗组件，将弹窗组件的值传给调用页面并显示（图文）
微信小程序-自定义(城市选择)弹窗组件,并传值 1.新建component文件夹用来存放自定义组件,并在其文件夹内新建cityModal Component,注意不是新建Page 新建完成之后出现四个 ...
使用Maven实施自定义JSF 2.0组件
前一段时间,我编写了自己的定制JSF组件. 但是在那个时候,JSF 1.0仍然是最新的,并且该项目没有使用maven作为构建系统. 因此,我一直想用maven编写一个自定义JSF2组件. 因此,让我们 ...
vant 引进单个样式_vue 公共列表选择组件,引用Vant-UI的样式方式
此组件用于公共选择组件.引用Vant UI 作为样式特性: 1.支持动态.静态数据源. 2.支持分页加载. 3.支持模糊搜索. 4.支持单选.多选. 组件源码: 确认 v-model="l ...
【EasyUI篇】Combo自定义下拉框组件
微信公众号:程序yuan 关注可了解更多的教程.问题或建议,请公众号留言; 查看--> 全套EasyUI示例目录 20.Combo自定义下拉框组件这组件不可以通过class方式进行定义 JSP ...
vxe-input vue 日期选择组件带农历节日、小圆点提醒
vxe-table vxe-input vue 日期选择组件带农历节日.小圆点提醒默认的日期选择是没有节日信息的可以通过 festival-method 方法自定义节日信息,接收一个对象,用于渲染 ...
Combo( 自定义下拉框) 组件
本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于 ValidateBox(验证框)组件一．加载方式自定义下拉框不能通过标签的方式进行创建. <in ...
Java学习day078 Swing用户界面组件（四：选择组件）（复选框、单选钮、边框、组合框、滑动条）
使用的教材是java核心技术卷1,我将跟着这本书的章节同时配合视频资源来进行学习基础java知识. day078 Swing用户界面组件(四:选择组件)(复选框.单选钮.边框.组合框.滑动条) 前 ...
android自定义标尺,Android自定义标尺滑动选择值效果
Android自定义标尺滑动选择值效果发布时间:2020-10-16 07:40:15 来源:脚本之家阅读:130 作者:676598624 本文实例为大家分享了Android实现滑动标尺选择值, ...

自定义数值范围选择组件

1.自定义组件 inputNumber.js

2.使用

3.效果图

自定义数值范围选择组件相关推荐

最新文章

热门文章