pet_uni/uni_modules/m-view/components/m-input/m-input.vue

<script setup>

import {computed} from "vue";

const props = defineProps({
  cursor: {
    type: Number,
    default: 0
  },
  innerValue: {
    type: String,
    default: ''
  },
  autoBlur: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  readonly: {
    type: Boolean,
    default: false
  },
  maxlength: {
    type: Number,
    default: 255
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  placeholderStyle: {
    type: String,
    default: ''
  },
  placeholderClass: {
    type: String,
    default: ''
  },
  confirmType: {
    type: String,
    default: ''
  },
  confirmHold: {
    type: Boolean,
    default: false
  },
  holdKeyboard: {
    type: Boolean,
    default: false
  },
  cursorSpacing: {
    type: Number,
    default: 0
  },
  adjustPosition: {
    type: Boolean,
    default: true
  },
  selectionEnd: {
    type: Number,
    default: -1
  },
  selectionStart: {
    type: Number,
    default: -1
  },
  password: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: 'input'
  },
  ignoreCompositionEvent: {
    type: Boolean,
    default: true
  },
  inputStyle: {
    type: [Object, String],
    default: {}
  },
  shape: {
    type: String,
    default: 'circle'
  },
  fontSize: {
    type: String,
    default: '28rpx'
  },
  border: {
    type: String,
    default: 'surround'//surround | bottom | none
  },
  borderColor: {
    type: String,
    default: '#999'
  },
  padding: {
    type: String,
    default: '30rpx'
  },
  customStyle: {
    type: [String,Object],
    default: {}
  },
});

const emit = defineEmits([
  'update:modelValue',
  'change',
  'blur',
  'focus',
  'confirm',
  'keyBoardHeightChange',
  'input',
]);

class EventGroup {

  onFocus(e) {
    emit('focus', e)
    emit('update:modelValue', e)
  }

  onConfirm(e) {
    emit('confirm', e)
    emit('update:modelValue', e)
  }

  onKeyBoardHeightChange() {
    emit('keyBoardHeightChange', e)
  }

  onBlur(e) {
    emit('blur', e)
    emit('update:modelValue', e)
  }

  onInput(e) {
    emit('input', e)
    emit('update:modelValue', e)
  }

  focus() {

  }
}

const InputEvent = new EventGroup();

const inputStyle = computed(() => {
  const style = {};
  if(props.border === 'surround')style.border = '2rpx solid '+props.borderColor;
  if(props.border === 'bottom')style.borderBottom = '2rpx solid '+props.borderColor;

  return {
    padding: props.padding,
    border: '2rpx solid #666',
    borderRadius: props.shape === 'circle'?'100px':'4px',
    ...style,
    ...uni.$m.addStyle(props.customStyle)
  }
});
</script>

<template>
  <view class="mz-input-container">
    <view class="input">
      <input
          class="u-input__content__field-wrapper__field"
          :style="[inputStyle]"
          :type="type"
          :focus="focus"
          :cursor="cursor"
          :value="innerValue"
          :auto-blur="autoBlur"
          :disabled="disabled || readonly"
          :maxlength="maxlength"
          :placeholder="placeholder"
          :placeholder-style="placeholderStyle"
          :placeholder-class="placeholderClass"
          :confirm-type="confirmType"
          :confirm-hold="confirmHold"
          :hold-keyboard="holdKeyboard"
          :cursor-spacing="cursorSpacing"
          :adjust-position="adjustPosition"
          :selection-end="selectionEnd"
          :selection-start="selectionStart"
          :password="password || type === 'password' || undefined"
          :ignoreCompositionEvent="ignoreCompositionEvent"
          @input="InputEvent.onInput"
          @blur="InputEvent.onBlur"
          @focus="InputEvent.onFocus"
          @confirm="InputEvent.onConfirm"
          @keyboardheightchange="InputEvent.onKeyBoardHeightChange"
      >
    </view>
  </view>
</template>

<style lang="scss">
.mz-input-container {

}
</style>