AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

从0搭建vue3组件库: Input组件（下）

2023-06-26 168
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 从0搭建vue3组件库: Input组件（上）

带 Icon 的输入框


通过prefix-icon和suffix-icon 属性可以为Input组件添加首尾图标。

可以通过计算属性判断出是否显示首尾图标,防止和前面的clearable和show-password冲突.这里代码做了

<template>
  <div class="k-input">
    <input
      ref="ipt"
      class="k-input__inner"
      :class="{ ['k-input--prefix']: isShowPrefixIcon }"
      :disabled="inputProps.disabled"
      v-bind="attrs"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />
    <div class="k-input__prefix" v-if="isShowPrefixIcon">
      <Icon :name="inputProps.prefixIcon" />
    </div>
    <div class="k-input__suffix no-cursor" v-if="isShowSuffixIcon">
      <Icon :name="inputProps.suffixIcon" />
    </div>
  </div>
</template>
<script setup lang="ts">
//...
type InputProps = {
  prefixIcon?: string;
  suffixIcon?: string;
};
//...
//带Icon输入框
const isShowSuffixIcon = computed(() => {
  return (
    inputProps.suffixIcon && !inputProps.clearable && !inputProps.showPassword
  );
});
const isShowPrefixIcon = computed(() => {
  return inputProps.prefixIcon;
});
</script>

相关样式部分

.k-input__suffix,
.k-input__prefix {
  position: absolute;
  right: 10px;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #c0c4cc;
  font-size: 15px;
}
.no-cursor {
  cursor: default;
}
.k-input--prefix.k-input__inner {
  padding-left: 30px;
}
.k-input__prefix {
  position: absolute;
  width: 20px;
  cursor: default;
  left: 10px;
}

在app.vue中使用效果如下

<template>
  <div class="input-demo">
    <Input v-model="tel" suffixIcon="edit" placeholder="请输入内容" />
    <Input v-model="tel" prefixIcon="edit" placeholder="请输入内容" />
  </div>
</template>
<script lang="ts" setup>
import { Input } from "kitty-ui";
import { ref } from "vue";
const tel = ref("");
</script>
<style lang="less">
.input-demo {
  width: 200px;
}
</style>

image.png


文本域


将type属性的值指定为textarea即可展示文本域模式。它绑定的事件以及属性和input基本一样

<template>
  <div class="k-textarea" v-if="attrs.type === 'textarea'">
    <textarea
      class="k-textarea__inner"
      :style="textareaStyle"
      v-bind="attrs"
      ref="textarea"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />
  </div>
  <div
    v-else
    class="k-input"
    @mouseenter="isEnter = true"
    @mouseleave="isEnter = false"
    :class="styleClass"
  >
    ...
  </div>
</template>

样式基本也就是focus,hover改变 border 颜色

.k-textarea {
  width: 100%;
  .k-textarea__inner {
    display: block;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: #606266;
    background-color: #fff;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    &::placeholder {
      color: #c2c2ca;
    }
    &:hover {
      border: 1px solid #c0c4cc;
    }
    &:focus {
      outline: none;
      border: 1px solid #409eff;
    }
  }
}

image.png


可自适应高度文本域


组件可以通过接收autosize属性来开启自适应高度,同时autosize也可以传对象形式来指定最小和最大行高

type AutosizeObj = {
    minRows?: number
    maxRows?: number
}
type InputProps = {
    autosize?: boolean | AutosizeObj
}

具体实现原理是通过监听输入框值的变化来调整textarea的样式,其中用到了一些原生的方法譬如window.getComputedStyle(获取原生css对象),getPropertyValue(获取css属性值)等,所以原生js忘记的可以复习一下

...
const textareaStyle = ref<any>()
const textarea = shallowRef<HTMLTextAreaElement>()
watch(() => inputProps.modelValue, () => {
    if (attrs.type === 'textarea' && inputProps.autosize) {
        const minRows = isObject(inputProps.autosize) ? (inputProps.autosize as AutosizeObj).minRows : undefined
        const maxRows = isObject(inputProps.autosize) ? (inputProps.autosize as AutosizeObj).maxRows : undefined
        nextTick(() => {
            textareaStyle.value = calcTextareaHeight(textarea.value!, minRows, maxRows)
        })
    }
}, { immediate: true })

其中calcTextareaHeight为

const isNumber = (val: any): boolean => {
    return typeof val === 'number'
}
//隐藏的元素
let hiddenTextarea: HTMLTextAreaElement | undefined = undefined
//隐藏元素样式
const HIDDEN_STYLE = `
  height:0 !important;
  visibility:hidden !important;
  overflow:hidden !important;
  position:absolute !important;
  z-index:-1000 !important;
  top:0 !important;
  right:0 !important;
`
const CONTEXT_STYLE = [
    'letter-spacing',
    'line-height',
    'padding-top',
    'padding-bottom',
    'font-family',
    'font-weight',
    'font-size',
    'text-rendering',
    'text-transform',
    'width',
    'text-indent',
    'padding-left',
    'padding-right',
    'border-width',
    'box-sizing',
]
type NodeStyle = {
    contextStyle: string
    boxSizing: string
    paddingSize: number
    borderSize: number
}
type TextAreaHeight = {
    height: string
    minHeight?: string
}
function calculateNodeStyling(targetElement: Element): NodeStyle {
  //获取实际textarea样式返回并赋值给隐藏的textarea
    const style = window.getComputedStyle(targetElement)
    const boxSizing = style.getPropertyValue('box-sizing')
    const paddingSize =
        Number.parseFloat(style.getPropertyValue('padding-bottom')) +
        Number.parseFloat(style.getPropertyValue('padding-top'))
    const borderSize =
        Number.parseFloat(style.getPropertyValue('border-bottom-width')) +
        Number.parseFloat(style.getPropertyValue('border-top-width'))
    const contextStyle = CONTEXT_STYLE.map(
        (name) => `${name}:${style.getPropertyValue(name)}`
    ).join(';')
    return { contextStyle, paddingSize, borderSize, boxSizing }
}
export function calcTextareaHeight(
    targetElement: HTMLTextAreaElement,
    minRows = 1,
    maxRows?: number
): TextAreaHeight {
    if (!hiddenTextarea) {
      //创建隐藏的textarea
        hiddenTextarea = document.createElement('textarea')
        document.body.appendChild(hiddenTextarea)
    }
    //给隐藏的teatarea赋予实际textarea的样式以及值(value)
    const { paddingSize, borderSize, boxSizing, contextStyle } =
        calculateNodeStyling(targetElement)
    hiddenTextarea.setAttribute('style', `${contextStyle};${HIDDEN_STYLE}`)
    hiddenTextarea.value = targetElement.value || targetElement.placeholder || ''
    //隐藏textarea整个高度,包括内边距padding,border
    let height = hiddenTextarea.scrollHeight
    const result = {} as TextAreaHeight
    //判断boxSizing,返回实际高度
    if (boxSizing === 'border-box') {
        height = height + borderSize
    } else if (boxSizing === 'content-box') {
        height = height - paddingSize
    }
    hiddenTextarea.value = ''
    //计算单行高度
    const singleRowHeight = hiddenTextarea.scrollHeight - paddingSize
    if (isNumber(minRows)) {
        let minHeight = singleRowHeight * minRows
        if (boxSizing === 'border-box') {
            minHeight = minHeight + paddingSize + borderSize
        }
        height = Math.max(minHeight, height)
        result.minHeight = `${minHeight}px`
    }
    if (isNumber(maxRows)) {
        let maxHeight = singleRowHeight * maxRows!
        if (boxSizing === 'border-box') {
            maxHeight = maxHeight + paddingSize + borderSize
        }
        height = Math.min(maxHeight, height)
    }
    result.height = `${height}px`
    hiddenTextarea.parentNode?.removeChild(hiddenTextarea)
    hiddenTextarea = undefined
    return result
}

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

最后在app.vue中使用

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

image.png


复合型输入框


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

image.png


这里我们借助 vue3 中的slot进行实现,其中用到了useSlots来判断用户使用了哪个插槽,从而展示不同样式

import { useSlots } from "vue";
//复合输入框
const slots = useSlots();

同时template中接收前后两个插槽

<template>
  <div
    class="k-input"
    @mouseenter="isEnter = true"
    @mouseleave="isEnter = false"
    :class="styleClass"
  >
    <div class="k-input__prepend" v-if="slots.prepend">
      <slot name="prepend"></slot>
    </div>
    <input
      ref="ipt"
      class="k-input__inner"
      :class="inputStyle"
      :disabled="inputProps.disabled"
      v-bind="attrs"
      :value="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组件库开发也感兴趣的话可以关注专栏Vite+TypeScript从零搭建Vue3组件库 - 东方小月的专栏 - 掘金 (juejin.cn) 组件库的所有实现细节都在这个专栏里，包括环境搭建，自动打包发布，文档搭建，vitest单元测试等等。

如果这篇文章对你有所帮助动动指头点个赞👍吧~


源码地址


kitty-ui: 一个使用Vite+Ts搭建的Vue3组件库

文章标签：
JavaScript
前端开发
测试技术
关键词：
vue3组件VUE.js
组件库VUE.js
vue3组件库VUE.js
VUE.js组件
input VUE.js
东方小月
目录
相关文章
游客62mqllx53nctc
|
9天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
游客62mqllx53nctc
31 3
vue3的脚手架模板你真的了解吗？里面有很多值得我们学习的地方！
CamilleKing
|
6天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能，解决了Vue 2中响应式系统的一些局限性，同时在性能方面也有一定的提升，为开发者提供了更好的开发体验和性能保障。
CamilleKing
19 7
小宋1021
|
7天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
小宋1021
25 3
CamilleKing
|
6天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何？
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升，从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等，使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
CamilleKing
24 1
CamilleKing
|
6天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定，无论是使用内置的指令如 `v-model`，还是通过自定义事件或自定义指令，都能够方便地实现数据与视图之间的双向交互，满足不同场景下的开发需求。
CamilleKing
25 1
大树营养快线
|
9天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式，可以实现组件的按需加载，减少资源浪费，提高应用的响应速度和用户体验。在实际应用中，需要根据具体情况选择合适的懒加载方式，并结合性能优化的其他措施，以打造更高效、更优质的 Vue 应用。
大树营养快线
40 4
游客zi3qmblbcdexu
|
9天前
|
前端开发 JavaScript
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
简记 Vue3（一）—— setup、ref、reactive、toRefs、toRef
游客zi3qmblbcdexu
24 1
我是快乐的嘟嘟
|
10天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
106 63
游客zi3qmblbcdexu
|
3天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
15 6
游客zi3qmblbcdexu
|
3天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
游客zi3qmblbcdexu
16 5

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    前端常见Vue2.0面试题
  • 3
    VUE element-ui 之table表格勾选复选框动态带出（将某列的值赋值给指定列）对应列的数据
  • 4
    vue基于 input 实现密码的显示与隐藏功能
  • 5
    自制简单的range（Vue）
  • 6
    Vue $watch监听对象属性，数组内对象属性改变
  • 7
    Chrome插件vue-devtools是如何把VSCode中对应的组件文件打开的
  • 8
    企业项目合同信息系统 毕业设计 JAVA+Vue+SpringBoot+MySQL（一）
  • 9
    【vue2项目经验】:经纬度转度分秒
  • 10
    Vue —— 进阶脚手架（四）（组件的自定义事件）
  • 1
    Vue3 五天速成（下）
    65
  • 2
    Vue3 五天速成（中）
    56
  • 3
    Vue3 五天速成（上）
    74
  • 4
    vue3版本的爱心源码
    22
  • 5
    Vue当前时间与接口返回时间的判断
    43
  • 6
    vue生成动态表单
    30
  • 7
    Vue生成Canvas二维码
    38
  • 8
    vue项目切换页面白屏的解决方案
    146
  • 9
    Vue3 项目中怎么使用 jsx——易懂
    42
  • 10
    vue3 实现电子签名
    375

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    DataWorks智能数据建模全面公测开始啦！