本篇文章将为我们的组件库添加一个新成员: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组件](http://img.zhejianglong.com/231019/21041U014-0.png)
文章插图
接下来要实现
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组件](https://m.360buyimg.com/jdcms/jfs/t1/194889/27/30056/37583/636df6e0Ecedb4a9e/3b1f5fc2a019d3c2.gif)
文章插图
到这里
基础用法
就完成了,接下来开始实现禁用状态
禁用状态这个比较简单,只要根据
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组件](http://img.zhejianglong.com/231019/21041Q222-2.png)
文章插图
尺寸按钮尺寸包括
medium
,small
,mini
,不传则是默认尺寸 。同样的根据props
的size
来赋予不同类名const styleClass = computed(() => {return {"is-disabled": inputProps.disabled,[`k-input--${inputProps.size}`]: inputProps.size,};});
推荐阅读
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Vue3实现动态导入Excel表格数据
- Vue3 企业级优雅实战 - 组件库框架 - 3 搭建组件库开发环境
- 带你从0到1开发AI图像分类应用
- 从0到1搭建redis6.0.7续更~
- 从0到1搭建redis6.0.7
- Windows操作系统搭建Lsky Pro
- 红米k40参数详细参数_红米k40参数和配置
- 如何破解压缩包的密码从网盘里面下载了一个压缩包,解压的时候需要输入密码,不知道密码是什么,该怎么
- 【深入浅出 Yarn 架构与实现】1-2 搭建 Hadoop 源码阅读环境
- 【炫丽】从0开始做一个WPF+Blazor对话小程序