src/input.vue

<template>
  <div class="wrapper" :class="{error}">
    <input type="text" :value="value" :disabled="disabled" :readonly="readonly"
           @input="$emit('input', $event.target.value)"
           @change="$emit('change', $event.target.value)"
           @focus="$emit('focus', $event)"
           @blur="$emit('blur', $event)"
    >
    <template v-if="error">
      <s-icon class="icon-error" name="error"></s-icon>
      <span class="error-message">{{ error }}</span>
    </template>
  </div>
</template>

<script>
  import Icon from './icon'

  export default {
    name: "s-input",
    props: {
      value: {
        type: String
      },
      disabled: {
        type: Boolean,
        default: false
      },
      readonly: {
        type: Boolean,
        default: false
      },
      error: {
        type: String
      }
    },
    components: {
      's-icon': Icon
    }
  }
</script>

<style scoped lang="scss">
  $height: 32px;
  $border-color: #999;
  $border-radius: 4px;
  $font-size: 14px;
  $border-color-hover: #666;
  $box-shadow-color: rgba(0, 0, 0, .5);
  $red: #F1453D;
  $error-message-margin-bottom: 1px;

  .wrapper {display: inline-flex;align-items: center;font-sizr: $font-size;
    :not(:last-child) {margin-right: .2em;}
    > input {height: $height;border: 1px solid $border-color;border-radius: $border-radius;padding: 0 8px;font-size: inherit;
      &:hover {border-color: $border-color-hover}
      &:focus {box-shadow: inset 0 1px 3px $box-shadow-color;outline: none;}
      &[disabled], &[readonly] {border-color: #bbb;color: #bbb;cursor: not-allowed;}
    }
    &.error {
      input {border-color: $red;}
    }
    .icon-error {fill: $red;}
    .error-message {margin-bottom: $error-message-margin-bottom;color: $red;}
  }
</style>