前端组件库造轮子——Input组件开发教程

前端组件库造轮子------Input组件开发教程

前言

本系列旨在记录前端组件库开发经验,我们的组件库项目目前已在Github开源,下面是项目的部分组件。文章会详细介绍一些造组件库轮子的技巧并且最后会给出完整的演示demo。

文章旨在总结经验,开源分享,有问题的话也希望路过的大佬指正。

组件开发流程

核心功能

Input组件的核心功能其实就是实现v-model,我们需要对封装出来的组件让他也拥有v-model的功能。

比如举个例子:

在vue中,我们可以直接对input标签使用v-model,但是我们没办法对封装的组件直接来使用v-model

// input 标签可以使用
<input type="text" v-model="input" />

// 自定义封装的 Input 组件 不可以使用v-model
<Input v-model="input" placeholder="请输入内容"></Input>

实现v-model

实现v-model其实就是双向绑定,比如我们可以利用vue提供的语法糖v-bind和事件调用来实现

<input v-bind:value="value" v-on:input="value= $event.target.value" />

所以,原理其实是一样的,在vue中,暴露给我们一组交互的数据

props: modelValue
emit: update:modelValue

其实就是在使用v-model时,在子组件中会用props: modelValue来接受传进来的数据,同时利用事件emit: update:modelValue 官方资料

具体实现代码就是

ts 复制代码
<template>
  <input
    class="input"
    type="text"
    :value="text"
    @input.stop="handerInput" />
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
});
const emit = defineEmits(["update:modelValue"]);
const handerInput = (e: Event) => {
  const target = e.target as HTMLInputElement;
  emit("update:modelValue", target.value);
  text.value = target.value;
};
</script>

这样我们就实现完成input组件的双向绑定功能。

但是还没完,我们还需要来监听数据的修改,来更新:value:text绑定的值。

为什么要做这一步呢?

我们在刚刚其实只是实现了改变input中的值,会修改我们v-model绑定的值,但是并没有实现了v-model修改,来改变input的值。

看下面这个例子

比如,我们用两个input同时绑定上同一个value值,当我修改了一个input的值同时,另一个input的值一个也同步修改才对。

jcode

因此,我们还需要监听modelValue的值,同步修改text.value

ts 复制代码
watch(
  () => props.modelValue,
  (newVal) => {
    if (newVal == "") return (text.value = "");
    text.value = props.modelValue ? props.modelValue : "";
  },
);

这样我们才算完成了这个核心功能

样式更替

在组件库开发中,我们会发现一个组件他是有多种样式可以选择的

例如在Hview-ui中,input组件就存在可以用size更换大小的样式,像这种样式开发在组件库开发中也是非常常见。

具体实现也是非常容易,我们需要在props预留出我们想要的属性,比如size,当然样式也得预先设置好,这里就不多赘述了,想比对大家来说都不是问题。

ts 复制代码
size: {
    type: String,
    default: "medium",
},

接下来样式更替在组件中的常用写法,这个写法就会把当前props.size的值渲染出来,放回成一个class类,接下来我们直接在template加上这个类即可。

ts 复制代码
// template
<template>
  <input
    class="input"
    type="text"
    :value="text"
    :class="size"  // 在这里加上size类
    @input.stop="handerInput" />
</template>

// script
const size = computed(() => {
  return {
    [`h-input-${props.size}`]: props.size,
  };
});

这样当 props.size 的值为 small 时,对象会被渲染成这样,在:class中,如果:后面为true那么就是加上h-input-small这个类了。

css 复制代码
{ 
    'h-input-small': 'small' 
}

attrs

最后介绍一下attrs属性,想必大家平时应该不怎么会用到这个属性,但是这个属性在开发组件时相当好用,这个attrs属性可以把style,props等属性拦截下来,把其它属性渗透给孩子组件。

举个例子就明白了,

input标签中自带着placeholder,type等属性,如果我们要开发Input组件的话,总不可能把这些属性也全自己实现吧,那就太麻烦了。

在这里,我们就可以利用attrs属性,我们把自己封装的Input组件结构一下,他在Dom渲染应该是这样的

<Input v-model="input" placeholder="请输入内容">
      // Input组件内部
    <template>
      <input
        class="input"
        type="text"
        :value="text"
        :class="size"
        @input.stop="handerInput" />
    </template>
</Input>

正常来说,我们对组件传入placeholder属性,如果要获取到placeholder那么就需要在props中获取到,但是如果我们用attrs,就可以把这个属性直接加到input标签上。

因此,我们就可以用一行代码,把这些属性全部实现了。

<template>
  <input
    class="input"
    v-bind="$attrs" // +加上attrs
    type="text"
    :value="text"
    :class="size"
    @input.stop="handerInput" />
</template>

演示demo

完整项目demo

结语

Input组件的核心开发功能就是上面这些,其他更多的详细功能开发可以参考Hview-ui项目源码

如果想要了解更多的组件轮子开发,或者组件库开发流程,更多详细的组件开发过程更新在GitHub项目源码,最后觉得我们项目or文章不错可以点个star,点点小手支持一下,也欢迎各路大佬为我们的开源项目添砖加瓦。

相关推荐
mosen8682 分钟前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
别拿曾经看以后~1 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
Gavin_9152 小时前
【JavaScript】模块化开发
前端·javascript·vue.js