charge-java/charge-front/src/components/style-input/style-input.vue

<template>
  <view class="input">
    <input
      class="input-ele"
      :value="value"
      :focus="focus"
      :type="type"
      placeholder-class="placeholder"
      :placeholder="'请输入' + title"
      bindinput="input"
      bindfocus="inputFocus"
      bindblur="inputBlur"
      @input="input"
      @focus="inputFocus"
      @blur="inputBlur"
    />
  </view>
</template>

<script lang="ts">
export default {
  emits: ["input", "focus"],
  options: {
    virtualHost: true,
  },
  props: {
    type: String,
    title: String,
    value: String,
    focus: Boolean,
  },
  methods: {
    input(e: any) {
      this.$emit("input", e.detail);
    },
    inputBlur() {
      this.$emit("focus", {
        focus: false,
      });
    },
    inputFocus(e: any) {
      this.$emit("focus", {
        focus: true,
        height: e.detail.height,
      });
    },
  },
};
</script>

<style lang="scss">
.input {
  height: 84rpx;
  background: #f7f7f7;
  border-radius: 10rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  padding: 0 40rpx;
}

.placeholder {
  color: rgba(0, 0, 0, 0.3);
}

.input-ele {
  font-size: 30rpx;
}
</style>