theme: mk-cute

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

VUE3组件库-input组件

大家好，今天一起来学习vue3实现input组件，希望对你有帮助

• 目录预览

  • 基本使用
  • 朴素模式
  • 文本域模式

• 基本使用

  • 效果

  • 失焦状态下

-   聚焦状态下

-   新建Input.vue文件用来存放input代码-   div样式上加个定位，以防label跑出盒子-   给input框加上对应样式 并用v-model绑定值```<template><div style="position: relative"> <inputclass="simple-input"type="text"v-model="value"/><label class="simple-input--label">{{ placeholder }}</label></div></template>```-   在App.vue文件中引入-   v-model绑定子组件的值```<template><simpleinput placeholder="请输入文本" v-model="values" /></template><script setup>import simpleinput from "./components/Input.vue";import { ref } from "vue";const values = ref("");</script>```-   获取属性值-   在setup语法糖中，引入defineProps接收父级传进来的props-   接收placeholder，modelValue-   **注意**-   vue3中v-model传进来的值为modelValue```import { defineProps, defineEmits, ref } from "vue";const props = defineProps({placeholder: String,modelValue: String,});```-   子组件属性与父级属性值同步-   在input框上定义@input方法，只要有输入就会触发-   引入defineEmits 并在@input方法内修改App.vue里的values```const emits = defineEmits(["update:modelValue"]);let handleinput = () => {emits("update:modelValue", value.value);};```-   input框聚焦和失焦状态-   @focus 聚焦 将底部线变为蓝色 label文字变为蓝色并向上移加上动画效果-   @blur 失焦 将状态复原-   Css样式 较为简单 可自行编写

• 朴素模式

  • 效果预览

  • 失焦状态

-   聚焦状态

-   朴素模式传入一个line属性```<simpleinput placeholder="请输入文本" line v-model="values" />```-   根据line的布尔值去判断底部边框是否展示

• 文本域模式

  • 效果预览

  • 失焦状态

-   聚焦状态

-   文本域传入一个textarea属性```<simpleinput placeholder="请输入文本" textarea v-model="values" />```-   在Input.vue里接收textarea属性 并用v-if进行判断 如果textarea存在则input框改为textarea```<inputv-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"/>​<textareav-if="textarea"name=""id=""class="simple-input":class="[textarea ? 'simple-textarea' : '',show ? 'simple-input--focus' : '',]"rows="8"@input="handleinput"@focus="handleFocus"@blur="handleBlur"></textarea>```-   文本框默认可伸缩 加上resize:none 可关闭伸缩

• 自定义指令 v-focus 自动聚焦

  • vue2写法 全局注册

    Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) {   // 聚焦元素   el.focus() } })

  • vue3写法

    • inserted 替换成了mounted
    • 之后可在组件中使用v-focus指令

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

• 总结

  • 今日input组件完成
  • 下一篇我们继续讲解Form表单中的组件