插拔式java_# "可插拔式"组件设计，领略组件开发的奥秘

从一个 Confirm 组件开始，一步步写一个可插拔式的组件。

处理一个正常的支付流程(比如支付宝购买基金)

点击购买按钮

如果风险等级不匹配则：弹确认框(Confirm)

用户确认风险后：弹出支付方式选择弹窗(Dialog)

选择好支付方式后：弹窗调用指纹验证(Dialog)

如果关闭指纹验证：提示是否输入密码(Dialog)

弹出输入密码的键盘(自定义键盘)

当然还有密码加班

如果密码输入错误则弹出修改/重试提示(Confirm)

...再次弹出键盘

大约6个弹窗...

地摊货(精简版)

首先尝试以一个平常的注册组件实现

Confirm 通过 v-model="isShow" 切换展示，通过 @onConfirm 和 onCancel 接收点击事件。

组件代码

{ {cancelTxt}}

{ {confirmTxt}}

export default {

props: {

value: {

type: Boolean,

default: false,

}

},

data() {

return {

content: '',

confirmTxt: '',

cancelTxt: '',

}

},

methods: {

close() {

this.$emit('input');

},

cancelHandler() {

this.$emit('onCancel');

},

confirmHandler() {

this.$emit('onConfirm');

}

}

}

使用代码

v-model="isConfirmShow"

@onCancel=&#