Custom Input

[EpsilonYi]

How to make a cunstom input component have variant outlined style?

[karwan01]

The v-input component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot.

<template>
  <v-container>
    <v-input
      v-model="inputValue"
      :messages="['This is a message']"
      prepend-icon="mdi-phone"
      class="custom-input"
    >
      <template #default>
        <div :class="['custom-input-wrapper', variantClass]">
          <label
            class="custom-input-label"
            :class="{ 'label-active': inputValue }"
          >
            Phone Number
          </label>
          <input
            type="text"
            v-model="inputValue"
            class="custom-input-field"
            placeholder=""
          />
        </div>
      </template>

      <template #append>
        <v-icon @click="clearInput" class="clear-icon">mdi-close</v-icon>
      </template>
    </v-input>
  </v-container>
</template>

<script setup>
  import { ref, computed } from 'vue'

  const inputValue = ref('')

  const props = defineProps({
    variant: {
      type: String,
      default: 'outlined',
    },
  })

  // Computed property to handle variant classes
  const variantClass = computed(() =>
    props.variant === 'outlined' ? 'outlined' : 'standard'
  )

  const clearInput = () => {
    inputValue.value = ''
  }
</script>

<style scoped>
  .custom-input-wrapper {
    position: relative;
    width: 100%;
  }

  .custom-input-label {
    position: absolute;
    top: -12px;
    left: 12px;
    font-size: 12px;
    color: #757575;
    background: white;
    padding: 0 4px;
    transition: all 0.2s ease;
  }

  .custom-input-field {
    width: 100%;
    padding: 12px;
    outline: none;
    border: none;
  }

  .outlined .custom-input-field {
    border: 1px solid #ccc;
    border-radius: 4px;
  }

  .custom-input-field:focus {
    border-color: #3f51b5;
  }

  .label-active {
    color: #3f51b5;
  }

  .clear-icon {
    cursor: pointer;
  }
</style>

[EpsilonYi]

thanks Karwan Khdhr ***@***.***> 于2024年10月29日周二 15:06写道：

…

The v-input <https://vuetifyjs.com/en/components/inputs/#inputs> component gives you a baseline to create your own custom inputs. It consists of a prepend/append slot, messages, and a default slot. <template> <v-container> <v-input v-model="inputValue" :messages="['This is a message']" prepend-icon="mdi-phone" class="custom-input" > <template #default> <div :class="['custom-input-wrapper', variantClass]"> <label class="custom-input-label" :class="{ 'label-active': inputValue }" > Phone Number </label> <input type="text" v-model="inputValue" class="custom-input-field" placeholder="" /> </div> </template> <template #append> <v-icon @click="clearInput" class="clear-icon">mdi-close</v-icon> </template> </v-input> </v-container> </template> <script setup> import { ref, computed } from 'vue' const inputValue = ref('') const props = defineProps({ variant: { type: String, default: 'outlined', }, }) // Computed property to handle variant classes const variantClass = computed(() => props.variant === 'outlined' ? 'outlined' : 'standard' ) const clearInput = () => { inputValue.value = '' }</script> <style scoped> .custom-input-wrapper { position: relative; width: 100%; } .custom-input-label { position: absolute; top: -12px; left: 12px; font-size: 12px; color: #757575; background: white; padding: 0 4px; transition: all 0.2s ease; } .custom-input-field { width: 100%; padding: 12px; outline: none; border: none; } .outlined .custom-input-field { border: 1px solid #ccc; border-radius: 4px; } .custom-input-field:focus { border-color: #3f51b5; } .label-active { color: #3f51b5; } .clear-icon { cursor: pointer; }</style> — Reply to this email directly, view it on GitHub <#20624 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AD65HKDJ7Z2TO3PCLR3KY2DZ54XXXAVCNFSM6AAAAABQW2AGT6VHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCMBYGMZTANA> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[karwan01]

@EpsilonYi You are welcome, plz if it helps you mark it as answered!