Uniapp自定义Input组件 - 可控制字体的Placeholder效果

r-input 输入框组件使用说明

介绍
自定义输入框组件，使用自定义文本实现placeholder效果，支持多种自定义样式和配置。

image.png

⚠️⚠️注意注意⚠️⚠️：源代码中未设置字体；请在 CSS 中添加 font-family 规则。

组件位置

src/
  └── components/
      └── r-input/
          └── reqem-input.vue

组件源码

<script >

export default {
  name: "r-input",
  props: {
    // 输入框的值
    value: {
      type: [String, Number],
      default: ''
    },
    // 占位符文本
    placeholder: {
      type: String,
      default: '请输入'
    },
    // 输入框样式
    inputStyle: {
      type: Object,
      default: () => ({})
    },
    // 占位符样式
    placeholderStyle: {
      type: Object,
      default: () => ({})
    },
    // 背景颜色
    bgColor: {
      type: String,
      default: '#F6F6F6'
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    },
    // 最大长度
    maxlength: {
      type: [String, Number],
      default: 140
    },
    // 输入类型
    type: {
      type: String,
      default: 'text'
    },
  },
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    onInput(e) {
      const value = e.detail.value
      this.inputValue = value
      this.$emit('input', value)
      this.$emit('change', value)
    },
    onFocus(e) {
      this.$emit('focus', e)
    },
    onBlur(e) {
      this.$emit('blur', e)
    }
  }
}
</script>

<template>
  <view class="r-input-box" :style="{ backgroundColor: bgColor }">
    <input
        class="r-input"
        :value="value"
        :type="type"
        :disabled="disabled"
        :maxlength="maxlength"
        @input="onInput"
        @focus="onFocus"
        @blur="onBlur"
        :style="inputStyle"
    />
    <text
        v-if="!value&&!inputValue"
        class="r-placeholder"
        :style="placeholderStyle"
    >
      {{ placeholder }}
    </text>
  </view>
</template>

<style scoped lang="scss">
.r-input-box {
  position: relative;
  width: 100%;
  border-radius: 8rpx;

  .r-input {
    width: 100%;
    height: 88rpx;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333;
    box-sizing: border-box;

    &[disabled] {
      opacity: 0.6;
    }
  }

  .r-placeholder {
    position: absolute;
    left: 24rpx;
    right: 24rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 28rpx;
    color: #999;
    pointer-events: none;
  }
}
</style>

1.引入方式

import rInput from '@/components/r-input/reqem-input.vue'

export default {
  components: {
    rInput
  }
}

2.基础用法

<r-input v-model="value" placeholder="请输入内容" />

Props 属性

Events 事件

样式自定义示例

<r-input
  v-model="value"
  placeholder="自定义样式"
  :inputStyle="{ color: '#2196F3' }"
  :placeholderStyle="{ color: '#999' }"
  bgColor="#E3F2FD"
/>

完整示例

<template>
  <view>
    <!-- 基础用法 -->
    <r-input v-model="inputValue" placeholder="请输入内容" />
    
    <!-- 自定义样式 -->
    <r-input
      v-model="customValue"
      placeholder="自定义输入框"
      :inputStyle="{ fontSize: '32rpx' }"
      :placeholderStyle="{ color: '#666' }"
      bgColor="#f5f5f5"
    />
    
    <!-- 禁用状态 -->
    <r-input
      v-model="disabledValue"
      placeholder="禁用状态"
      disabled
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      customValue: '',
      disabledValue: '禁用内容'
    }
  }
}
</script>