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