用Vue仿element-ui从0到1封装可复用的组件-input

1.需要的前置知识

vue基础语法,组件通讯(props,$emit)，slot，v-model，computed

1.1准备工作，子组件引入全局环境中

import vbInput from "@/components/Input";
Vue.component(vbInput.name, vbInput);

父组件：App.vue
子组件：Input.vue

2.实现目标

功能描述：目前支持密码框和文本框，文本框支持一键清除，密码框支持是否明文

参数部分：

3.整体思路

	1. 底部其实也是和input标签，所以placeholder，type，disabled，name 这些属性通过props
由父组件传给子组件，再设置在原生的input上就可以了。

子组件：
父组件：

	2.根据type类型动态显示输入密码或者文本后，尾部出现小图标。思路：先写上2个图标放着，
根据由父组件传过来的type设置type类型，再配合showPassword，clearable，这些传过来的属性
对这些图标进行显示控制。代码如下：

密码框效果：

3.v-model的实现思路，先来看看官方对v-model的定义

理解后的意思是：

<vb-input 
placehodler='please input' 
:value='userName' 
@input='userName=$event' >

</vb-input>
===============等价于===================
<vb-input 
placehodler='please input' 
v-model='uerName' >

</vb-input>

	所以要达到v-model的双向数据绑定，我们在子组件里面设置一个value值来接收父组件传过来的值，
还要发送一个input事件给父组件监听，并把值传给父组件，完成双向绑定。

效果：

在vue-dev-tools里可以很清楚地看到数据是双向绑定的。

4.目前也只做到了password和text，其他的类型以及校验还没做到，只是搭了一个基本的架子。最后奉上源码地址：

https://gitee.com/httpxiaobocom/vue-component-ui.git