浙江龙网

  1. 首页 > 生活百科 > >

从0搭建vue3组件库: Input组件

生活百科

本篇文章将为我们的组件库添加一个新成员:Input组件 。其中Input组件要实现的功能有:

  • 基础用法
  • 禁用状态
  • 尺寸大小
  • 输入长度
  • 可清空
  • 密码框
  • 带Icon的输入框
  • 文本域
  • 自适应文本高度的文本域
  • 复合型输入框
每个功能的实现代码都做了精简,方便大家快速定位到核心逻辑,接下来就开始对这些功能进行一一的实现 。
基础用法首先先新建一个input.vue文件,然后写入一个最基本的input输入框
<template><div class="k-input"><input class="k-input__inner" /></div></template>然后在我们的 vue 项目examples下的app.vue引入Input组件
<template><div class="Shake-demo"><Input /></div></template><script lang="ts" setup>import { Input } from "kitty-ui";</script>此时页面上便出现了原生的输入框,所以需要对这个输入框进行样式的添加,在input.vue同级新建style/index.less,Input样式便写在这里
.k-input {font-size: 14px;display: inline-block;position: relative;.k-input__inner {background-color: #fff;border-radius: 4px;border: 1px solid #dcdfe6;box-sizing: border-box;color: #606266;display: inline-block;font-size: inherit;height: 40px;line-height: 40px;outline: none;padding: 0 15px;width: 100%;&::placeholder {color: #c2c2ca;}&:hover {border: 1px solid #c0c4cc;}&:focus {border: 1px solid #409eff;}}}【从0搭建vue3组件库: Input组件】
从0搭建vue3组件库: Input组件

文章插图
接下来要实现Input组件的核心功能:双向数据绑定 。当我们在 vue 中使用input输入框的时候,我们可以直接使用v-model来实现双向数据绑定,v-model其实就是value @input结合的语法糖 。而在 vue3 组件中使用v-model则表示的是modelValue @update:modelValue的语法糖 。比如Input组件为例
<Input v-model="tel" />其实就是
<Input :modelValue="https://www.huyubaike.com/biancheng/tel" @update:modelValue="https://www.huyubaike.com/biancheng/tel = $event" />所以在input.vue中我们就可以根据这个来实现Input组件的双向数据绑定,这里我们使用setup语法
<template><div class="k-input"><inputclass="k-input__inner":value="https://www.huyubaike.com/biancheng/inputProps.modelValue"@input="changeInputVal"/></div></template><script lang="ts" setup>//组件命名defineOptions({name: "k-input",});//组件接收的值类型type InputProps = {modelValue?: string | number;};//组件发送事件类型type InputEmits = {(e: "update:modelValue", value: string): void;};//withDefaults可以为props添加默认值等const inputProps = withDefaults(defineProps<InputProps>(), {modelValue: "",});const inputEmits = defineEmits<InputEmits>();const changeInputVal = (event: Event) => {inputEmits("update:modelValue", (event.target as HTMLInputElement).value);};</script>
从0搭建vue3组件库: Input组件

文章插图
到这里基础用法就完成了,接下来开始实现禁用状态
禁用状态这个比较简单,只要根据props的disabled来赋予禁用类名即可
<template><div class="k-input" :class="styleClass"><inputclass="k-input__inner":value="https://www.huyubaike.com/biancheng/inputProps.modelValue"@input="changeInputVal":disabled="inputProps.disabled"/></div></template><script lang="ts" setup>//...type InputProps = {modelValue?: string | number;disabled?: boolean;};//...//根据props更改类名const styleClass = computed(() => {return {"is-disabled": inputProps.disabled,};});</script>然后给is-disabled写些样式
//....k-input.is-disabled {.k-input__inner {background-color: #f5f7fa;border-color: #e4e7ed;color: #c0c4cc;cursor: not-allowed;&::placeholder {color: #c3c4cc;}}}
从0搭建vue3组件库: Input组件

文章插图
尺寸按钮尺寸包括medium,small,mini,不传则是默认尺寸 。同样的根据props的size来赋予不同类名
const styleClass = computed(() => {return {"is-disabled": inputProps.disabled,[`k-input--${inputProps.size}`]: inputProps.size,};});

推荐阅读


上一篇：Vue3实现动态导入Excel表格数据

下一篇：Django的简单使用