195 lines
6.4 KiB
JavaScript
195 lines
6.4 KiB
JavaScript
const ElInputFreqency = (() => {
|
|
let matchs = [
|
|
/^(-?\d+)([.]\d+)?(g|m|k|dB)?(hz)?/i,
|
|
/^(-?\d+)([.]\d+)?(g|m|k|dB)?(hz)?$/i,
|
|
];
|
|
const frequencyConvert = (function () {
|
|
let match = matchs[1];
|
|
let units = ["", "K", "M", "G"];
|
|
const thousand = 6.907755278982137;
|
|
let toValue = function (text, min, max) {
|
|
let value = 0;
|
|
if (match.test(text)) {
|
|
let result = match.exec(text);
|
|
let [number, decimal, calcuate] = result.slice(1, 4);
|
|
switch (calcuate) {
|
|
case "dB":
|
|
db();
|
|
break;
|
|
default:
|
|
f();
|
|
break;
|
|
|
|
};
|
|
function db() {
|
|
decimal = decimal || '';
|
|
let pow = 0;
|
|
if (calcuate) {
|
|
pow = units.indexOf(calcuate);
|
|
};
|
|
if (pow > 0) number = number + decimal;
|
|
number = parseFloat(number);
|
|
value = number;
|
|
if (!isNaN(max) && value > max) value = max;
|
|
if (!isNaN(min) && value < min) value = min;
|
|
}
|
|
function f() {
|
|
decimal = decimal || '';
|
|
let pow = 0;
|
|
if (calcuate) {
|
|
calcuate = calcuate.toUpperCase();
|
|
pow = units.indexOf(calcuate);
|
|
};
|
|
if (pow > 0) number = number + decimal;
|
|
number = parseFloat(number);
|
|
value = number * Math.pow(1000, pow);
|
|
if (!isNaN(max) && value > max) value = max;
|
|
if (!isNaN(min) && value < min) value = min;
|
|
}
|
|
|
|
}
|
|
return value;
|
|
};
|
|
let toText = function (value) {
|
|
if (value == 0) return 0;
|
|
let display = '';
|
|
var pow = Math.floor(Math.log(Math.abs(value)) / thousand);
|
|
if (pow < 0) pow = 0;
|
|
if (pow > 3) pow = 3;
|
|
var tunit = units[pow];
|
|
if (pow > 0) value = value / Math.pow(1000, pow);
|
|
display = value + tunit.toUpperCase();
|
|
if (pow == 0) {
|
|
display = value + "dB";
|
|
};
|
|
return display;
|
|
}
|
|
return { toText, toValue };
|
|
})();
|
|
return {
|
|
name: "ElInputFreqency",
|
|
props: {
|
|
name: String,
|
|
modelValue: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
min: {
|
|
type: Number,
|
|
default: undefined
|
|
},
|
|
max: {
|
|
type: Number,
|
|
default: undefined
|
|
},
|
|
inputUnit: {
|
|
type: String,
|
|
default: 'dB'
|
|
}
|
|
},
|
|
emits: ["update:modelValue", "blur"],
|
|
watch: {
|
|
modelValue: {
|
|
handler(newval, oldval) {
|
|
var value = newval;
|
|
if (this.min !== void (0) && value < this.min) value = this.min;
|
|
if (this.max !== void (0) && value > this.max) value = this.max;
|
|
if (this.name);
|
|
this.value = value;
|
|
},
|
|
immediate: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
refresh: 0
|
|
}
|
|
},
|
|
computed: {
|
|
text: {
|
|
get() {
|
|
var text = frequencyConvert.toText(this.value);
|
|
return [text, this.refresh][0];
|
|
}
|
|
},
|
|
value: {
|
|
get() {
|
|
return this.modelValue
|
|
},
|
|
set(newval, oldval) {
|
|
if (this.name);
|
|
if (newval != this.modelValue) {
|
|
this.$emit('update:modelValue', newval);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
onKeydown(event) {
|
|
if (event.keyCode == 13) {
|
|
event.target.blur();
|
|
}
|
|
},
|
|
onBlur(event) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
let value = this.toValue(event.target.value);
|
|
this.$refs.refInput.value = this.text;
|
|
event.value = value;
|
|
this.$emit('blur', event, value);
|
|
},
|
|
toValue(text) {
|
|
var value = 0;
|
|
if (!matchs[1].test(text)) {
|
|
var segments = text.match(matchs[0]);
|
|
if (segments == null) { return; };
|
|
text = segments[1];
|
|
}
|
|
if (matchs[1].test(text)) {
|
|
this.value = value = frequencyConvert.toValue(text, this.min, this.max, this.inputUnit);
|
|
} else {
|
|
value = this.value;
|
|
}
|
|
return value;
|
|
}
|
|
},
|
|
template: `
|
|
<div class="el-input el-input-freqency">
|
|
<!-- input -->
|
|
<!-- prepend slot -->
|
|
<!--v-if-->
|
|
<div class="el-input__wrapper" tabindex="-1">
|
|
<!-- prefix slot -->
|
|
<!--v-if-->
|
|
<input ref="input" type="text" $attrs class="el-input__inner" autocomplete="off" placeholder="频率"
|
|
@keydown="onKeydown"
|
|
@blur="onBlur" class="el-input-freqency" v-model="text" placeholder="频率"/>
|
|
<!-- suffix slot --><!--v-if-->
|
|
</div>
|
|
<!-- append slot --><!--v-if-->
|
|
</div>
|
|
`,
|
|
|
|
render(ctx, arr1, props, obj1, data, methods) {
|
|
const h = Vue.h;
|
|
const input = h("input", {
|
|
ref: "refInput",
|
|
type: "text",
|
|
class: "el-input__inner",
|
|
placeholder: props.placeholder,
|
|
value: this.text,
|
|
...this.$attrs,
|
|
onKeydown: this.onKeydown, onBlur: this.onBlur,
|
|
}, []);
|
|
return h("div", { class: "el-input el-input-freqency" },
|
|
[
|
|
h("div", { class: "el-input__wrapper" }, [
|
|
input
|
|
])
|
|
]);
|
|
}
|
|
};
|
|
|
|
})();
|
|
|