tjy-uniapp/src/pages/taskOnlinePage/components/query/InputCom.vue

<template>
  <view class="ic-input-box" :style="style">
    <text class="title" :style="textStyle">{{ title }}</text>
    <input
      ref="inputRef"
      class="input"
      :value="inputContent"
      placeholder="请输入"
      placeholder-style="color: rgb(136,136,136)"
      @input="handleInput"
    />
  </view>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

interface Props {
  title: string
  type: string
  defaultValue?: string
  style?: any
  textStyle?: any
}

const props = withDefaults(defineProps<Props>(), {
  defaultValue: '',
})

const emit = defineEmits<{
  change: [text: string, type: string]
}>()

const inputContent = ref(props.defaultValue)
const inputRef = ref<any>(null)

// 暴露方法
defineExpose({
  reset: () => {
    inputContent.value = ''
  },
  inputContent: inputContent.value,
})

// 处理输入
const handleInput = (e: any) => {
  const text = e.detail.value
  inputContent.value = text
  emit('change', text, props.type)
}
</script>

<style lang="scss" scoped>
.ic-input-box {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 5px;
}

.title {
  width: 60px;
  font-size: 12px;
  color: rgb(51, 51, 51);
  text-align: right;
}

.input {
  flex: 1;
  height: 30px;
  padding: 0 5px;
  font-size: 12px;
  color: rgba(136, 136, 136, 1);
  border: 1px solid #ccc;
  border-radius: 6px;
}
</style>