Skip to main content

Input组件实现思路

1、组件UI及功能分析#

首先也是要考虑组件的ui知道自己要做成什么样子，包含什么功能，怎么样才能既方便又实用；比如样式上预设不同的主题颜色，支持输入提示、默认文本、错误提示等等

2、基本实现#

首先是要让我们的input组件能够显示出来

通过.vue单文件组件的方式创建 input.vue文件，即 Input组件 ，在该文件的<template></template>中添加input标签，然后将input.vue文件在其他组件中引入并注册再进行后使用，运行后即可看到输入框

基本思路
组件的核心其实还是对原生标签的操作，只不过是我们在编写组件的时候，将一个复杂的功能在组件内部实现，然后暴>露一个简单的接口或者指令，当被人使用组件的时候就可以通过简单的接口或则指令轻松达到复杂目的
组件开发的过程中我们应该充分利用原生的特性，我们的input组件是基于vue的因此我们要充分利用原生即vue对input的支持和特性

3、实现有主题颜色的输入框#

3.1、需求#

比如我想让我的输入框有一些不同边框颜色，让别人在使用的时候可以选择不同的边框颜色

3.2、自我问答(分析)#

Q: 在对input标签的操作时我们一般通过什么来设置边框颜色？

A: 通过css样式的border-color
Q: 因为我们需要预设多种主题颜色，那么vue有哪些方式可以动态修改该元素的样式呢？

A: 通过vue的v-bind指令可以动态添加元素的calss属性和style属性（我想你应该很了解vue的v-bind的用法了）
Q: 那么我们怎么让使用该Input组件的人方便快捷的的设置不同的颜色呢？（也就是怎么从外面父组件告诉里面子组件设置什么颜色呢？）

A: 此时我们就要想到vue的父子组件中的传值，通过props就可以传递一个值给子组件（我们要写的Input就是一个子组件）

3.3、实现#

通过以上问答基本上就已经很清楚了：即我们通过v-bind:style在组件内绑定元素的border-color将bcolor定义在组件的props中，然后用户在使用该组件的时候通过:bcolor="red"传入想要的颜色

input.vue 此处应该了解Props的所有写法
<template>  <input :style="{'border-color':bcolor}"></input></template><script>export default {    name:"JInput"    props:{       bcolor:{           type:String,           default:"#000"           validator:function(value){                // 验证用户输入的值           }       }     }};</script>
<style lang="scss" scoped></style>
demo.vue在demo中引入注册使用input组件后预览
<template>  <j-input bcolor="red"></j-input></template><script>import JInput from "./input.vue"export default {    name:"Demo",    components:{        JInput    }};</script>

3.4、扩展#

（1）、如果你需要设置出了颜色以外的更多css样式的话，不妨在组件中通过预设一些class然后再元素上v-bind:class来绑定样式，让用户通过床褥特定的calss名来设置组件的主题

（2）、通过以上方式即可以设置 输入提示、默认值、是否禁用等

4、实现有错误提示的输入框#

4.1、需求#

如果我们希望input组件有一些错误提示，比如验证输入有错误时提示特定的错误内容，如下: img

4.2、自我问答(分析)#

Q: 有了以上的经验我们应该知道怎么怎么在input组件中拿到特定的错误提示内容了吧？

A: 如果还不知道请把第三节再看一遍
Q: 很明显是有错误才会显示后面的提示，因此我们需要提前再组件内部写好错误内容的布局且默认不显示，通过v-if或者v-show动态决定是否显示，那么怎来判定是否显示错误提示呢？

A: 在子组件中判断是否传了第一个问题问的错误提示内容，传了就显示并显示传的错误内容

4.3、实现#

通过以上问答基本上就已经很清楚了：即我们通过v-if="error"在组件内动态决定错误信息布局是否显示,将error定义在props中让使用则通过:error确定是否显示及显示什么错误提示文字

input.vue 请自行补充布局样式
 <template>   <input :style="{'border-color':bcolor}"></input>+  <span v-if="error">{{error}}</span> </template> <script> export default {     name:"JInput"     props:{        bcolor:{            type:String,            default:"#000"            validator:function(value){                 // 验证用户输入的值            }        } +       error:{+          type:String, +          default:null+       }     } }; </script>
demo.vue在demo中引入注册使用input组件后预览
  <template>+    <j-input bcolor="red" error="输入有误请重新输入"></j-input>  </template>  <script>  import JInput from "./input.vue"  export default {      name:"Demo",      components:{          JInput      }  };  </script>
文章目录