VAVABUY/components/input.vue

<template>
  <up-input :readonly="readonly" :shape="shape" :placeholder="placeholder" :placeholderClass="placeholderClass"
    :suffixIcon="suffixIcon" :border="border" :adjustPosition="adjustPosition" :suffixIconStyle="suffixIconStyle"
    :model-value="inputValue" :disabled="disabled" :maxlength="maxlength" :type="type" :clearable="clearable"
    :placeholderStyle="placeholderStyle" :password="password" :confirm-type="confirmType" :focus="focus"
    :inputAlign="inputAlign" :fontSize="fontSize" :color="color" :prefixIcon="prefixIcon"
    :prefixIconStyle="prefixIconStyle" @clear="clear" @change="change" @update:modelValue="input" @confirm="confirm"
    @keyboardheightchange="keyboardheightchange" @focus="focusChange" @blur="blur"
    :style="{ '--bordercolor': borderColor, '--bgColor': bgColor }">
    <template #prefix>
      <slot name="prefix"></slot>
    </template>
    <template #suffix>
      <slot name="suffix">
        <view class="search_right" @click.stop="search" v-if="suffixIcon">
          <u-icon :name="suffixIcon" color="var(--gray1)" size="20"></u-icon>
        </view>
      </slot>
    </template>
  </up-input>
</template>
<script setup>
import { ref, nextTick, watch } from "vue";
const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  },
  modelValue: {
    type: [String, Number],
    default: ''
  },
  type: {
    type: String,
    default: 'text'
  },
  clearable: Boolean,
  password: Boolean,
  readonly: Boolean,
  shape: {
    type: String,
    default: 'circle' // circle | square
  },
  suffixIcon: {
    type: String,
    default: ''
  },
  border: {
    type: String,
    default: 'surround' // surround | bottom | none
  },
  suffixIconStyle: {
    type: [String, Object],
    default: ''
  },
  placeholderStyle: {
    type: [String, Object],
    default: 'color: #adb8cc'
  },
  placeholderClass: {
    type: String,
    default: ''
  },
  adjustPosition: Boolean,
  disabled: Boolean,
  maxlength: {
    type: Number,
    default: -1
  },
  confirmType: {
    type: String,
    default: 'done'
  },
  focus: Boolean,
  inputAlign: {
    type: String,
    default: 'left'
  },
  fontSize: {
    type: String,
    default: '14px'
  },
  color: {
    type: String,
    default: 'var(--inputText)'
  },
  prefixIcon: {
    type: String,
    default: ''
  },
  prefixIconStyle: {
    type: [String, Object],
    default: ''
  },
  borderColor: {
    type: String,
    default: 'var(--inputBorder)'
  },
  bgColor: {
    type: String,
    default: 'var(--light)'
  }
})
const emit = defineEmits(['update:modelValue', 'search', 'clear', 'change', 'confirm', 'keyboardheightchange', 'focusChange', 'blur'])
const inputValue = ref(props.modelValue)

const search = () => {
  emit('search');
}
const clear = () => {
  emit('clear')
}
const change = (value) => {
  emit('change', value)
}
const input = (value) => {
  inputValue.value = value;
  emit('update:modelValue', value)
}
const confirm = (value) => {
  emit('confirm', value)
}
const keyboardheightchange = () => {
  emit('keyboardheightchange')
}
const focusChange = () => {
  emit('focusChange')
}
const blur = (value) => {
  emit('blur', value)
}

watch(() => props.modelValue, (newValue) => {
  inputValue.value = newValue;
});
</script>
<style lang="less" scoped>
.u-border {
  border-color: var(--borderColor) !important;
  box-shadow: 0 0 0 1px var(--borderColor) inset;
}

.u-input {
  padding: 0 8px !important;
  background-color: var(--inputBg);

  /deep/ .u-input__content__prefix-icon {
    margin-right: 8px;
  }
  /deep/ .uni-input-placeholder{
    color: var(--text-01) !important;
  }

  /deep/ .u-input__content__field-wrapper__field {
    height: 32px;
  }
}
</style>