08 - Vue3 UI Framework - Input 组件
接下来再做一个常用的组件 -
input组件返回阅读列表点击
需求分析
开始之前我们先做一个简单的需求分析
input组件有两种类型，即input和textarea类型- 当类型为
textarea时，可以自定义行高，但是当类型为input时，行高恒为1 - 可以自定义外边框的颜色
- 可以设置为禁用
那么可以得到如下参数表格
| 参数 | 含义 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value | 绑定值 | string | 字符串 | 必填 |
| theme | 类型 | string | input / textarea | input |
| rows | 行高，当 theme 为 input 时值恒为 1 | number | 正整数 | 5 |
| color | 外边框颜色 | string | 任意合法颜色值 | #8c6fef |
| disabled | 是否禁用 | boolean | false / true | false |
骨架
实际上我们这里是根据 theme 值判断，然后去渲染原生的 input 或者 textarea 组件，所以可以很容易得到骨架，代码如下：
功能
首先，我们再在 Typescript 中声明一些需求分析中的属性：
declare const props: {
value: string;
theme?: "input" | "textarea";
rows?: number;
color?: string;
};
declare const context: SetupContext;
然后，再在 export default 中写入声明的参数：
export default {
install: function (Vue) {
Vue.component(this.name, this);
},
name: "JeremyInput",
props: {
value: {
type: String,
required: true,
},
theme: {
type: String,
default: "input",
},
rows: {
type: Number,
default: 5,
},
color: {
type: String,
default: "#8c6fef",
},
},
};
最后再补全 setup :
setup(props, context) {
const text = ref(props.value);
const change = () => {
context.emit("update:value", text.value);
};
return { text, change };
},
样式表
补全层叠样式表
测试
创建一个测试页，导入 JeremyInput 组件，看一下效果：
项目地址 ??
GitHub: https://github.com/JeremyWu917/jeremy-ui
官网地址 ??
JeremyUI: https://ui.jeremywu.top
感谢阅读 ?