从0搭建vue3组件库: Input组件(上)

简介: 从0搭建vue3组件库: Input组件(上)

image.png


基础用法



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

image.png

接下来要实现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>

image.png

到这里基础用法就完成了,接下来开始实现禁用状态


禁用状态



这个比较简单,只要根据propsdisabled来赋予禁用类名即可

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

image.png


尺寸



按钮尺寸包括medium,small,mini,不传则是默认尺寸。同样的根据propssize来赋予不同类名

const styleClass = computed(() => {
  return {
    "is-disabled": inputProps.disabled,
    [`k-input--${inputProps.size}`]: inputProps.size,
  };
});

然后写这三个类名的不同样式

//...
.k-input.k-input--medium {
  .k-input__inner {
    height: 36px;
    &::placeholder {
      font-size: 15px;
    }
  }
}
.k-input.k-input--small {
  .k-input__inner {
    height: 32px;
    &::placeholder {
      font-size: 14px;
    }
  }
}
.k-input.k-input--mini {
  .k-input__inner {
    height: 28px;
    &::placeholder {
      font-size: 13px;
    }
  }
}


继承原生 input 属性



原生的inputtype,placeholder等属性,这里可以使用 vue3 中的useAttrs来实现props穿透.子组件可以通过v-bindprops绑定

<template>
  <div class="k-input" :class="styleClass">
    <input
      class="k-input__inner"
      :value="inputProps.modelValue"
      @input="changeInputVal"
      :disabled="inputProps.disabled"
      v-bind="attrs"
    />
  </div>
</template>
<script lang="ts" setup>
//...
const attrs = useAttrs();
</script>


可清空



通过clearable属性、Input的值是否为空以及是否鼠标是否移入来判断是否需要显示可清空图标。图标则使用组件库的Icon组件

<template>
  <div
    class="k-input"
    @mouseenter="isEnter = true"
    @mouseleave="isEnter = false"
    :class="styleClass"
  >
    <input
      class="k-input__inner"
      :disabled="inputProps.disabled"
      v-bind="attrs"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />
    <div
      @click="clearValue"
      v-if="inputProps.clearable && isClearAbled"
      v-show="isFoucs"
      class="k-input__suffix"
    >
      <Icon name="error" />
    </div>
  </div>
</template>
<script setup lang="ts">
//...
import Icon from "../icon/index";
//...
//双向数据绑定&接收属性
type InputProps = {
  modelValue?: string | number;
  disabled?: boolean;
  size?: string;
  clearable?: boolean;
};
//...
const isClearAbled = ref(false);
const changeInputVal = (event: Event) => {
  //可清除clearable
  (event.target as HTMLInputElement).value
    ? (isClearAbled.value = true)
    : (isClearAbled.value = false);
  inputEmits("update:modelValue", (event.target as HTMLInputElement).value);
};
//清除input value
const isEnter = ref(true);
const clearValue = () => {
  inputEmits("update:modelValue", "");
};
</script>

清除图标部分 css 样式

.k-input__suffix {
  position: absolute;
  right: 10px;
  height: 100%;
  top: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
  color: #c0c4cc;
}

image.png


密码框 show-password



通过传入show-password属性可以得到一个可切换显示隐藏的密码框。这里要注意的是如果传了clearable则不会显示切换显示隐藏的图标

<template>
  <div
    class="k-input"
    @mouseenter="isEnter = true"
    @mouseleave="isEnter = false"
    :class="styleClass"
  >
    <input
      ref="ipt"
      class="k-input__inner"
      :disabled="inputProps.disabled"
      v-bind="attrs"
      :value="inputProps.modelValue"
      @input="changeInputVal"
    />
    <div class="k-input__suffix" v-show="isShowEye">
      <Icon @click="changeType" :name="eyeIcon" />
    </div>
  </div>
</template>
<script setup lang="ts">
//...
const attrs = useAttrs();
//...
//显示隐藏密码框 showPassword
const ipt = ref();
Promise.resolve().then(() => {
  if (inputProps.showPassword) {
    ipt.value.type = "password";
  }
});
const eyeIcon = ref("browse");
const isShowEye = computed(() => {
  return (
    inputProps.showPassword && inputProps.modelValue && !inputProps.clearable
  );
});
const changeType = () => {
  if (ipt.value.type === "password") {
    eyeIcon.value = "eye-close";
    ipt.value.type = attrs.type || "text";
    return;
  }
  ipt.value.type = "password";
  eyeIcon.value = "browse";
};
</script>

这里是通过获取input元素,然后通过它的type属性进行切换,其中browseeye-close分别是Icon组件中眼睛开与闭,效果如下

image.png


相关文章
|
1天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
102 64
|
1天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时,如何避免循环引用?
Web 组件化是一种有效的开发方法,可以提高项目的质量、效率和可维护性。在实际项目中,要结合项目的具体情况,合理应用 Web 组件化的理念和技术,实现项目的成功实施和交付。通过不断地探索和实践,将 Web 组件化的优势充分发挥出来,为前端开发领域的发展做出贡献。
16 8
|
1天前
|
JavaScript
在 Vue 3 中,如何使用 v-model 来处理自定义组件的双向数据绑定?
需要注意的是,在实际开发中,根据具体的业务需求和组件设计,可能需要对上述步骤进行适当的调整和优化,以确保双向数据绑定的正确性和稳定性。同时,深入理解 Vue 3 的响应式机制和组件通信原理,将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
|
1天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
|
15天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法,包括 props、事件、Vuex 状态管理等,帮助开发者选择最适合项目需求的通信方式,提高开发效率和代码可维护性。
|
8天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
vue学习第四章
|
8天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客,我是瑞雨溪,一名热爱JavaScript与Vue的大一学生,自学前端2年半,正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用,希望能对你有所帮助。关注我,持续更新中!🎉🎉🎉
vue学习第九章(v-model)
|
8天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发)
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容,适合前端开发者学习参考。持续更新中,期待您的关注!🎉🎉🎉
vue学习第十章(组件开发)
|
14天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
14天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。
下一篇
无影云桌面