输入框组件设计与实现
-
输入框本身设计(参考注册表格、新建题目页面、github表单等,见附图) -
输入框 loading、error 状态样式设计 -
交互逻辑:与 vuelidate 交互,编辑后清除 error 状态,密码输入框显示/隐藏密码,disabled 等 -
对日常界面和黑板界面作一定区分(正常界面更加活泼,黑板界面更加严肃,可分别在 commom/components
和blackboard/components
下做两个组件,而不是用 props 区分)
最终实现的组件接口(可能需要调整):
export default {
props: {
modelValue: String,
placeholder: String, // optional
label: String, // optional
password: Boolean,
loading: Boolean,
error: Object,
disabled: Boolean,
},
emits: [
'update:modelValue',
],
}
附图: