wordpress 建企业网站,朝阳区手机网站制作服务,网站开发公司一站式服务,wordpress 文章内链目录 一#xff1a;功能描述
二#xff1a;实现过程 一#xff1a;功能描述
在开发过程中我们经常需要自定义组件完成特定的功能#xff0c;比如用户详情页#xff0c;我增加一个调整余额的按钮#xff0c;点击以后需要打开一个调整余额对话框#xff0c;输入调整的金…目录 一功能描述
二实现过程 一功能描述
在开发过程中我们经常需要自定义组件完成特定的功能比如用户详情页我增加一个调整余额的按钮点击以后需要打开一个调整余额对话框输入调整的金额大小完成以后关闭弹框同时刷新页面要怎么实现呢。具体实现是增加一个调整余额弹框的自定义组件组件包含一个调整按钮点击按钮就打开这个对话框里面利用watch监听用户的余额和用户id等信息同时使用watch回调实时更新余额信息等。
二实现过程
首先定义弹框组件
export default class LsUserChange extends Vue { 定义三个变量
Prop() value?: number
Prop() type?: number // 变动类型1-用户金额
Prop() userId?: number // 用户id
监听变量并回调函数赋值
Watch(userId, {immediate: true
})
getuserId(val: any) {// 初始值//this.form.value valthis.$set(this.form, user_id, val)
}Watch(value, {immediate: true
})
getValue(val: any) {// 初始值//this.form.value valthis.$set(this.form, value, val)
}Watch(type, {immediate: true
})
getType(val: any) {// 变动类型1-用户金额if (val 1) {this.typeName 金额this.$set(this.form, type, val)}
}2调整按钮和调用组件
引用组件
import LsUserChange from /components/user/ls-user-change.vue
ls-user-changetitle余额调整:valueuser_info.user_redpacket:type1:userIduser_idrefreshuserDetail
el-button typetext slottrigger sizesmall :disableduser_info.user_delete调整/el-button
/ls-user-change
这里的refresh后的方法组件刷新的方法可以在调整完余额后刷新用户最新余额信息
userDetail() {apiUserDetail({user_id: this.user_id}).then((res: any) {this.user_info res.user_infothis.transaction res.transaction}).catch((res: any) {})
}
3在余额弹框离调整完余额要调用刷新方法
this.$emit(refresh)
