VUE3 Component library – Input component

This is the sixth day of my participation in the August Text Challenge.More challenges in August

VUE3 Component library – Input component

Hello everyone, today let’s learn vue3 implementation input component, I hope to help you

• Directory preview

  • The basic use
  • Simple model
  • Text field mode

• The basic use

  • The effect

  • Out of focus

- In focusCopy the code

<template> <div style="position: relative"> <input class="simple-input" type="text" v-model="value"/> <label class="simple-input--label">{{ placeholder }}</label> </div> </template> - app. vue file to add -v model binding child component value <template> < simpleInput placeholder=" please input text" v-model="values" /> </template> <script setup> import simpleinput from "./components/Input.vue"; import { ref } from "vue"; const values = ref(""); </script> - get attribute values - in the setup syntax sugar, introduce defineProps to accept the functions-placeholder passed in by the parent, Import {defineProps, defineEmits, ref} from "vue"; import {defineProps, defineEmits, ref} from "vue"; const props = defineProps({ placeholder: String, modelValue: String, }); - Synchronize child component properties with parent property values - define @input method on input box, Const emits = defineEmits(["update:modelValue"]); let handleinput = () => { emits("update:modelValue", value.value); }; - input box focus and out-of-focus state - @focus Focus turns bottom line blue label text turns blue and moves up with animation - @blur out-of-focus restores state - Css style is relatively simple and can be written by oneselfCopy the code

• Simple model

  • Results the preview

  • Out-of-focus state

- Focus stateCopy the code

- Naive mode puts a line attribute < SimpleInput placeholder=" please enter text "LINE V-model ="values" />" - Determines whether the bottom border is displayed according to the line Boolean valueCopy the code

• Text field mode

  • Results the preview

  • Out-of-focus state

- Focus stateCopy the code

< SimpleInput placeholder=" Please Input text "TEXtaREA V-model ="values" />" - receive textaREA in input.vue Textarea <input v-if="! textarea" class="simple-input" :class="[ show ? 'simple-input--focus' : '', line ? 'simple-input--line' : "', ]" type="text" v-model="value" @input="handleinput" @focus="handleFocus" @blur="handleBlur" /> <textarea v-if="textarea"  name="" id="" class="simple-input" :class="[ textarea ? 'simple-textarea' : '', show ? 'simple-input--focus' : "', ]" rows="8" @input=" handleInput "@focus="handleFocus" @blur="handleBlur" ></textarea> - Textbox defaults to scalable plus resize: None to turn off scalingCopy the code

• Custom command V-focus Automatic focus

  • Vue2 is registered globally

    Directive ('focus', {// When the bound element is inserted into the DOM... Inserted: function (el) {// Focus element el.focus()}})Copy the code

  • Vue3 writing

    • Inserted IS mounted
    • You can then use the V-focus directive in the component

    const app = createApp(App)
    app.directive('focus', {
        mounted(el) {
            el.focus()
        }
    })
    app.mount('#app')
    Copy the code

• conclusion

  • The INPUT component is complete today
  • In the next article, we’ll continue to look at the components in the Form