83a25527bb
Add two-way binding for menitValue in InputWithSuffix Add two-way binding for timeValue in InputNumber Refactor filterData function in Table_5.vue
48 lines
1.1 KiB
Vue
48 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
value: {
|
|
type: Number,
|
|
default: ''
|
|
}
|
|
})
|
|
const emit = defineEmits(['update:timeValue'])
|
|
const timeValue = ref(1)
|
|
watch(timeValue, (newValue) => {
|
|
console.log('newValue', newValue)
|
|
emit('update:timeValue', newValue)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative w-full overflow-hidden rounded-lg bg-gray-200">
|
|
<input
|
|
v-model="timeValue"
|
|
autocomplete="off"
|
|
type="number"
|
|
:placeholder="placeholder"
|
|
:disabled="disabled"
|
|
:readonly="readonly"
|
|
inputmode="numeric"
|
|
pattern="[0-9.]*"
|
|
oninput="this.value = this.value.replace(/[^0-9.]/g, '')"
|
|
onfocus="this.value = this.value.replace(/[^0-9.]/g, '')"
|
|
class="w-full px-4 py-2 text-sm leading-6 placeholder:text-gray-400 text-gray-900 border-0 border-transparent rounded-lg outline-0 bg-gray-200 focus:outline-0 focus:border-0 focus:ring-0"
|
|
/>
|
|
</div>
|
|
</template>
|