Vue@Input: 構建可復用的輸入組件

一、基礎功能

Vue@Input是一個可重用的輸入組件，能夠處理用戶的輸入並把結果傳遞出去。在構建這個組件時，我們考慮到了以下幾個基礎功能：

1. 輸入框的雙向綁定

在Vue中，雙向綁定是一個十分常見的功能，而輸入框也是使用最頻繁的元素之一。因此，在Vue@Input中，我們提供了一個名為”value”的prop來完成輸入框的雙向綁定，同時，我們也可以通過”$emit”事件來處理用戶的輸入。

<template>
  <div>
    <input v-model="inputValue" />
  </div>
</template>

<script>
export default {
  name: 'vue-input',
  props: {
    value: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue
    },
    inputValue(newInputValue) {
      this.$emit('input', newInputValue)
    }
  }
}
</script>

2. placeholder placeholder-text

placeholder是輸入框中的一個佔位符，用戶可以在這裡輸入提示信息。在Vue@Input中，我們增加了名為”placeholder”的prop，並為輸入框添加了對應屬性。同時，我們也允許用戶可以自定義佔位符。

<template>
  <div>
    <input v-model="inputValue" :placeholder="placeholderText" />
  </div>
</template>

<script>
export default {
  name: 'vue-input',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '請輸入'
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue
    },
    inputValue(newInputValue) {
      this.$emit('input', newInputValue)
    }
  },
  computed: {
    placeholderText() {
      return this.placeholder
    }
  }
}
</script>

3. disabled

有時候，我們需要禁用輸入框，這時候在Vue@Input中，我們增加了一個名為”disabled”的prop，並為輸入框添加了對應屬性。

<template>
  <div>
    <input v-model="inputValue" :placeholder="placeholderText" :disabled="isDisabled" />
  </div>
</template>

<script>
export default {
  name: 'vue-input',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '請輸入'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue
    },
    inputValue(newInputValue) {
      this.$emit('input', newInputValue)
    }
  },
  computed: {
    placeholderText() {
      return this.placeholder
    },
    isDisabled() {
      return this.disabled
    }
  }
}
</script>

二、提高功能

除了基礎功能以外，Vue@Input還提供了一些特殊功能來增強用戶的輸入體驗。

1. 自動聚焦

在用戶打開頁面時，輸入框能夠自動聚焦是一個比較友好的設計，因此在Vue@Input中，我們增加了一個名為”autoFocus”的prop，能夠實現自動聚焦的效果。

<template>
  <div>
    <input v-model="inputValue" :placeholder="placeholderText" :disabled="isDisabled" :autofocus="autoFocus" />
  </div>
</template>

<script>
export default {
  name: 'vue-input',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '請輸入'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    autoFocus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue
    },
    inputValue(newInputValue) {
      this.$emit('input', newInputValue)
    }
  },
  computed: {
    placeholderText() {
      return this.placeholder
    },
    isDisabled() {
      return this.disabled
    }
  }
}
</script>

2. 輸入框前置圖標

在輸入框前面添加一個圖標，能夠幫助用戶更好地理解輸入框的作用及意義，同時也美化了界面。在Vue@Input中，我們增加了一個名為”prepend”的prop，用於設置輸入框前置圖標的相關信息。

<template>
  <div>
    <div class="flex items-center border rounded px-2">
      <div v-if="prepend"><i :class="prepend.icon" :style="{ 'color': prepend.color }" /></div>
      <input v-model="inputValue" :placeholder="placeholderText" :disabled="isDisabled" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'vue-input',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '請輸入'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    prepend: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue
    },
    inputValue(newInputValue) {
      this.$emit('input', newInputValue)
    }
  },
  computed: {
    placeholderText() {
      return this.placeholder
    },
    isDisabled() {
      return this.disabled
    }
  }
}
</script>

3. 輸入框後置圖標

與前置圖標類似，輸入框後置圖標也能夠為用戶提供更好的體驗和理解。在Vue@Input中，我們增加了一個名為”append”的prop，用於設置輸入框後置圖標的相關信息。

<template>
  <div>
    <div class="flex items-center border rounded px-2">
      <input v-model="inputValue" :placeholder="placeholderText" :disabled="isDisabled" />
      <div v-if="append"><i :class="append.icon" :style="{ 'color': append.color }" /></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vue-input',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '請輸入'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    prepend: {
      type: Object,
      default: null
    },
    append: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue
    },
    inputValue(newInputValue) {
      this.$emit('input', newInputValue)
    }
  },
  computed: {
    placeholderText() {
      return this.placeholder
    },
    isDisabled() {
      return this.disabled
    }
  }
}
</script>

三、總結

Vue@Input是一個高度可定製化的輸入組件，能夠幫助開發者快速構建出符合需求的輸入框。其提供了雙向綁定、佔位符、禁用、前/後置圖標、自動聚焦等基礎功能，同時還提供了更多實用的提高功能。我們希望開發者能夠結合自身需求，靈活使用Vue@Input。下面是一個完整的代碼示例：

<template>
  <div>
    <div class="flex items-center border rounded px-2">
      <div v-if="prepend"><i :class="prepend.icon" :style="{ 'color': prepend.color }" /></div>
      <input v-model="inputValue" :placeholder="placeholderText" :disabled="isDisabled" :autofocus="autoFocus" />
      <div v-if="append"><i :class="append.icon" :style="{ 'color': append.color }" /></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'vue-input',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    placeholder: {
      type: String,
      default: '請輸入'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    prepend: {
      type: Object,
      default: null
    },
    append: {
      type: Object,
      default: null
    },
    autoFocus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      inputValue: this.value
    }
  },
  watch: {
    value(newValue) {
      this.inputValue = newValue
    },
    inputValue(newInputValue) {
      this.$emit('input', newInputValue)
    }
  },
  computed: {
    placeholderText() {
      return this.placeholder
    },
    isDisabled() {
      return this.disabled
    }
  }
}
</script>