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

基础用法

首先先新建一个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;
    }
  }
}

接下来要实现Input组件的核心功能:双向数据绑定。当我们在 vue 中使用input输入框的时候,我们可以直接使用v-model来实现双向数据绑定,v-model其实就是value @input结合的语法糖。而在 vue3 组件中使用v-model则表示的是modelValue @update:modelValue的语法糖。比如Input组件为例

<Input v-model="tel" />

其实就是

<Input :modelValue="tel" @update:modelValue="tel = $event" />

所以在input.vue中我们就可以根据这个来实现Input组件的双向数据绑定,这里我们使用setup语法

<template>
  <div class="k-input">
    <input
      class="k-input__inner"
      :value="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>

本站声明：
1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；

2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；

3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；

4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；

5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。