从0搭建vue3组件库: Input组件( 四 ) _生活百科

这里的逻辑稍微复杂一点,大致就是创建一个隐藏的textarea,然后每次当输入框值发生变化时,将它的value赋值为组件的textarea的value,最后计算出这个隐藏的textarea的scrollHeight以及其它padding之类的值并作为高度返回赋值给组件中的textarea

最后在app.vue中使用

<template><div class="input-demo"><Inputv-model="tel":autosize="{ minRows: 2 }"type="textarea"suffixIcon="edit"placeholder="请输入内容"/></div></template>

文章插图
复合型输入框我们可以使用复合型输入框来前置或者后置我们的元素,如下所示

文章插图
这里我们借助 vue3 中的slot进行实现,其中用到了useSlots来判断用户使用了哪个插槽,从而展示不同样式
import { useSlots } from "vue";//复合输入框const slots = useSlots();同时template中接收前后两个插槽

<template><divclass="k-input"@mouseenter="isEnter = true"@mouseleave="isEnter = false":class="styleClass"><div class="k-input__prepend" v-if="slots.prepend"><slot name="prepend"></slot></div><inputref="ipt"class="k-input__inner":class="inputStyle":disabled="inputProps.disabled"v-bind="attrs":value="https://www.huyubaike.com/biancheng/inputProps.modelValue"@input="changeInputVal"/><div class="k-input__append" v-if="slots.append"><slot name="append"></slot></div></div></template><script setup lang="ts">import { useSlots } from "vue";const styleClass = computed(() => {return {["k-input-group k-input-prepend"]: slots.prepend,["k-input-group k-input-append"]: slots.append,};});//复合输入框const slots = useSlots();</script>

最后给两个插槽写上样式就实现了复合型输入框啦

.k-input.k-input-group.k-input-append,.k-input.k-input-group.k-input-prepend {line-height: normal;display: inline-table;width: 100%;border-collapse: separate;border-spacing: 0;.k-input__inner {border-radius: 0 4px 4px 0;}//复合输入框.k-input__prepend,.k-input__append {background-color: #f5f7fa;color: #909399;vertical-align: middle;display: table-cell;position: relative;border: 1px solid #dcdfe6;border-radius: 4 0px 0px 4px;padding: 0 20px;width: 1px;white-space: nowrap;}.k-input__append {border-radius: 0 4px 4px 0px;}}.k-input.k-input-group.k-input-append {.k-input__inner {border-top-right-radius: 0px;border-bottom-right-radius: 0px;}}

在app.vue中使用

<template><div class="input-demo"><Input v-model="tel" placeholder="请输入内容"><template #prepend>http://</template></Input><Input v-model="tel" placeholder="请输入内容"><template #append>.com</template></Input></div></template>

总结一个看似简单的Input组件其实包含的内容还是很多的,做完之后会发现对自己很多地方都有提升和帮助。
如果你对vue3组件库开发也感兴趣的话可以关注我,组件库的所有实现细节都在以往文章里，包括环境搭建，自动打包发布，文档搭建，vitest单元测试等等。