ss_dc_wechat_mini_program/components/SsInput/index.vue

<template>
  <!-- 
    ss-input 智能输入组件
    自动绑定ValidatedTd的事件处理函数
  -->
  <view class="smart-input">
    <input
      class="smart-input__field"
      :placeholder="$attrs.placeholder || '请输入'"
      :value="modelValue"
      @input="handleInput"
      @blur="handleBlur"
      @change="handleInput"
    />
  </view>
</template>

<script setup>
import { inject } from 'vue'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

// 从ValidatedTd注入事件处理函数（兼容旧方式）
const onInput = inject('onInput', null)
const onBlur = inject('onBlur', null)

// ss-input初始化完成

const handleInput = (event) => {
  const value = event.detail?.value || event.target?.value || ''

  // 1. 支持v-model
  emit('update:modelValue', value)

  // 2. 兼容旧的inject方式
  if (onInput) {
    onInput(event)
  }

  console.log(`SsInput handleInput: ${value}`)
}

const handleBlur = (event) => {
  // 调用ValidatedTd的处理函数
  if (onBlur) {
    onBlur(event)
  }
}
</script>

<style lang="scss" scoped>
.smart-input {
  width: 100%;
  
  &__field {
    width: 100%;
    height: 60rpx;
    // padding: 0 20rpx;
    font-size: 32rpx;
    line-height: 60rpx;
    color: #333;
    background-color: transparent;
    border: none;
    outline: none;
    box-sizing: border-box;
    
    &::placeholder {
      color: #999;
      font-size: 32rpx;
    }
    
    &:focus {
      color: #333;
      border: 1px solid #ccc;
    }
  }
}
</style>