You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.4 KiB
127 lines
2.4 KiB
<template>
|
|
<el-form :model="inputForm"
|
|
:rules="rules"
|
|
class="demo-form-inline">
|
|
<div class="flex-div">
|
|
<el-form-item prop="start">
|
|
<el-input v-model="inputForm.start"
|
|
class="wd50"
|
|
size="small"
|
|
:type="inputType"
|
|
clearable
|
|
placeholder="请输入"
|
|
@change="handleChange" />
|
|
</el-form-item>
|
|
<div class="div_middle">-</div>
|
|
<el-form-item prop="end">
|
|
<el-input v-model="inputForm.end"
|
|
class="wd50"
|
|
size="small"
|
|
:type="inputType"
|
|
clearable
|
|
placeholder="请输入"
|
|
@change="handleChange"
|
|
@blur="handleBlur" />
|
|
</el-form-item>
|
|
</div>
|
|
|
|
</el-form>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'inputRange',
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
start: '',
|
|
end: ''
|
|
}
|
|
}
|
|
},
|
|
type: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data () {
|
|
let checkAge = (rule, value, callback) => {
|
|
if (value === '') {
|
|
callback(new Error('请输入内容'))
|
|
} else {
|
|
if (value < this.inputForm.start) {
|
|
callback(new Error('结束值不能小于开始值'))
|
|
}
|
|
callback()
|
|
}
|
|
}
|
|
return {
|
|
inputForm: { ...this.value },
|
|
rules: {
|
|
end: [
|
|
{ validator: checkAge, trigger: 'blur' }
|
|
],
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
inputType () {
|
|
if (this.type == 'num') return 'number'
|
|
}
|
|
},
|
|
watch: {
|
|
'value.start' (val) {
|
|
this.inputForm.start = val
|
|
},
|
|
'value.end' (val) {
|
|
this.inputForm.end = val
|
|
},
|
|
},
|
|
methods: {
|
|
handleChange (val) {
|
|
// if ()
|
|
this.$emit('change', { ...this.inputForm })
|
|
},
|
|
handleBlur () {
|
|
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.flex-div {
|
|
display: flex;
|
|
align-items: center;
|
|
max-width: 200px;
|
|
}
|
|
// .wd50 {
|
|
// // width: 45%;
|
|
// }
|
|
.demo-form-inline {
|
|
::v-deep {
|
|
.el-form-item {
|
|
flex: 1;
|
|
width: 40%;
|
|
margin: 0;
|
|
}
|
|
input::-webkit-outer-spin-button,
|
|
input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
input[type="number"] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
}
|
|
}
|
|
|
|
.div_middle {
|
|
padding: 0 10px;
|
|
}
|
|
</style>
|