r-input 輸入框組件使用說明

介紹
自定義輸入框組件，使用自定義文本實現(xiàn)placeholder效果，支持多種自定義樣式和配置。

image.png

????注意注意????：源代碼中未設(shè)置字體；請在 CSS 中添加 font-family 規(guī)則。

組件位置

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.基礎(chǔ)用法

<r-input v-model="value" placeholder="請輸入內(nèi)容" />

Props 屬性

Events 事件

樣式自定義示例

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

完整示例

<template>
  <view>
    <!-- 基礎(chǔ)用法 -->
    <r-input v-model="inputValue" placeholder="請輸入內(nèi)容" />
    
    <!-- 自定義樣式 -->
    <r-input
      v-model="customValue"
      placeholder="自定義輸入框"
      :inputStyle="{ fontSize: '32rpx' }"
      :placeholderStyle="{ color: '#666' }"
      bgColor="#f5f5f5"
    />
    
    <!-- 禁用狀態(tài) -->
    <r-input
      v-model="disabledValue"
      placeholder="禁用狀態(tài)"
      disabled
    />
  </view>
</template>

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