08 - Vue3 UI Framework - Input 组件

接下来再做一个常用的组件 - input 组件

返回阅读列表点击

需求分析

开始之前我们先做一个简单的需求分析

  1. input 组件有两种类型，即 input 和 textarea 类型
  2. 当类型为 textarea 时，可以自定义行高，但是当类型为 input 时，行高恒为 1
  3. 可以自定义外边框的颜色
  4. 可以设置为禁用

那么可以得到如下参数表格

参数 含义 类型 可选值 默认值
value 绑定值 string 字符串 必填
theme 类型 string input / textarea input
rows 行高，当 theme 为 input 时值恒为 1 number 正整数 5
color 外边框颜色 string 任意合法颜色值 #8c6fef
disabled 是否禁用 boolean false / true false

骨架

实际上我们这里是根据 theme 值判断，然后去渲染原生的 input 或者 textarea 组件，所以可以很容易得到骨架，代码如下：