68 lines
1.5 KiB
Vue
68 lines
1.5 KiB
Vue
<template>
|
|
<div class="my-input">
|
|
<span class="decorate"></span>
|
|
<span v-show="icon" :class="['iconfont', icon]"></span>
|
|
<span v-show="before" class="before">{{ before }}</span>
|
|
<input v-bind="$attrs" :value="modelValue" @input="onInput" />
|
|
<span v-show="after" class="after">{{ after }}</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, defineProps, defineEmits, watch } from "vue";
|
|
const props = defineProps({
|
|
modelValue: { type: Number, default: 0 },
|
|
icon: { default: "", type: String },
|
|
before: { default: "", type: String },
|
|
after: { default: "", type: String },
|
|
});
|
|
const emit = defineEmits(["update:modelValue", "input"]);
|
|
const onInput = (e) => {
|
|
const value = e.target.value;
|
|
emit("update:modelValue", value);
|
|
emit("input", value);
|
|
};
|
|
</script>
|
|
<style scoped lang="less">
|
|
.my-input {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
border: 1px solid rgba(230, 230, 231, 1);
|
|
border-radius: 3px;
|
|
height: 20px;
|
|
padding: 0 4px 0 2px;
|
|
> .decorate {
|
|
width: 2px;
|
|
background-color: rgba(230, 230, 231, 1);
|
|
border-radius: 3px;
|
|
height: 85%;
|
|
margin-right: 4px;
|
|
}
|
|
> .iconfont {
|
|
font-size: 10px;
|
|
color: #000;
|
|
margin-right: 2px;
|
|
}
|
|
> .before {
|
|
font-size: 12px;
|
|
color: #000;
|
|
margin-right: 2px;
|
|
}
|
|
> .after {
|
|
font-size: 12px;
|
|
color: #000;
|
|
}
|
|
> input {
|
|
font-size: 12px;
|
|
width: 0;
|
|
flex: 1;
|
|
text-align: right;
|
|
outline: none;
|
|
border: none;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style>
|