学习笔记——Dialog回调

刚才看到我的上一篇文章都是三个月前的了,这次也懒得找借口了(这是有多懒)。过了这么久,当然还是存了不少干货了,刚好最近想整理下这段时间的内容。上一篇文章是关于Dialog的,那么这篇文章就从它入手吧。接着往下写,很多时候,我们的Dialog所运用的场景和可能不是当前页面。

还是先上图:

就像这样的场景,一个发布页面,当用户将内容填写完毕后,发布,我们需要弹窗提示用户再仔细审查一遍,或者当时用户不想直接发布,添加到草稿等。

但是,发现没有,弹出这个Dialog,当用户点击确定的时候,我们怎样在这个确定的单击事件中,将他上面所填写的内容发送到服务器便成问了问题。

今天,我给大家带来了两个解决方案,大家根据自己的场景选择就好:

1、可以用集合,Map等存放数据的容器将上面这些数据保存,弹出Dialog的时候传递到Dialog里面,在Dialog里接收这个容器,再依次拿出数据,用网络框架发送到服务器即可。举个栗子:

Map<String, Object> params = new HashMap<String, Object>();
params.put("ISO_ID", workOrder.ISO_ID);
params.put("IR_ID", workOrder.IR_ID);
params.put("IR_CD", workOrder.IR_CD);

params.put("IR_TITLE", workOrder.IR_TITLE);
params.put("LATN_ID", sLoginInfoVo.USER.USER_PRIV.LATN_ID);
。。。

然后在Dialog的构造方法中将params这个Map拿到。然后在确定的单击事件中发送到服务器就好:

private void commitData(Map<String, Object> params, String serviceCode) {
    AppRestClient.post(serviceCode, params,
            new AppResponseHandler<RequsetVo>(RequsetVo.class) {

                @Override
                public void onSuccess(RequsetVo result) {
                    Intent intent = new Intent(AreaGuestActivity.this, CommonActivity.class);
                    startActivity(intent);
                    finish();
                    ToastUtil.showLong(AreaGuestActivity.this, "提交成功!!");
                }

                @Override
                public void onFailure(int errorCode, String errorMsg) {
                    ToastUtil.showLong(AreaGuestActivity.this, errorMsg);
                }
            });
}
当然,这个不是今天的重点,今天的重点是第二个。

2、使用接口回调的方式:

我们可以在Dialog的方法里将确定发布的方法回调出去,代码如下:

public interface OnClickListener{
    /**
     * 当点击某条的时候回调这方法
     */
    public void onItemClick(Context context,boolean cancelorsure);
}
//定义接口
private OnClickListener onClickListener;

/**
 * 设置Item的点击监听
 * @param listener
 */
public void setOnClickListener(OnClickListener listener){
    this.onClickListener=listener;
}
在单击事件中:

mbtn_sure.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        dismiss();
        if(onClickListener!=null) {
            onClickListener.onItemClick(context,true);
        }
    }
});
在发布页面,当用户确定发布的单击事件里(一些逻辑处理后,至少得做个非空判断吧):

HintDialog myDialog = new HintDialog(PublishActivity.this);
myDialog.show();
myDialog.setOnClickListener(new HintDialog.OnClickListener() {
    @Override
    public void onItemClick(Context context, boolean cancelorsure) {
            postOkHttpUtils_publish();//发布到服务器的方法
    }
});
ok,解决了。不过这种方式,我当时使用的时候脑袋有点没转过来。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: element dialog关闭回调指的是当element dialog被关闭时,执行的回调函数。一般情况下,我们可以在element dialog的配置项中设置onClose属性来指定关闭回调函数。例如: ``` <el-dialog :visible.sync="dialogVisible" :onClose="handleClose"> <!-- dialog内容 --> </el-dialog> ``` 其中,handleClose是我们定义的关闭回调函数。当element dialog被关闭时,该函数会被调用。我们可以在该函数中执行一些清理工作,或者根据需要更新页面状态等操作。 ### 回答2: Element UI的Dialog组件提供了关闭回调函数,以便在Dialog被关闭后执行相应的操作。关闭回调函数可以在Dialog组件的属性中进行设置,如下所示: ``` <el-dialog :close-on-click-modal="false" :before-close="handleClose"> <!-- 对话框内容 --> </el-dialog> ``` 在上面的示例中,before-close属性用来设置关闭回调函数,即handleClose函数。在Dialog组件关闭之前,会先执行这个函数。 那么,如何在handleClose函数中执行相应的操作呢?可以根据实际需求进行相应的编写,下面是一个简单的示例: ``` methods: { handleClose(done) { // 在这里执行相应的操作 // ... // 关闭Dialog done(); } } ``` 在上面的代码中,handleClose函数包含一个done参数。这个参数是一个函数,用来告诉Dialog组件是否可以关闭。如果调用了done函数,Dialog组件就会关闭,否则不会。 在handleClose函数中,可以执行任意的操作,比如向服务器提交表单数据、清空表单数据等等。这些操作都应该在调用done函数之前执行。 需要注意的是,在before-close属性中设置的关闭回调函数,必须是一个返回Promise对象的函数。示例代码如下: ``` methods: { handleClose(dialog) { return new Promise((resolve, reject) => { // 在这里执行相应的操作 // ... // 如果操作成功了,调用resolve函数 resolve(); // 如果操作失败了,调用reject函数 // reject(); }); } } ``` 在上面的代码中,handleClose函数返回了一个Promise对象。在函数中执行相应的操作后,根据实际情况调用resolve或reject函数,以便告知Dialog组件是否可以关闭。如果resolve函数被调用,Dialog组件就会关闭;如果reject函数被调用,Dialog组件就会继续保持打开状态。 ### 回答3: element dialog是Vue.js框架中的一个组件,用于创建弹出式对话框。在element dialog中有一个关闭按钮,通过点击该按钮或者通过代码关闭对话框时,可以触发关闭回调函数。 element dialog关闭回调的实现方法如下: 1.传入一个函数作为dialog的close回调参数 ```javascript <el-dialog :close-on-click-modal="false" :before-close="handleClose"> <span slot="title">标题</span> <p>内容</p> <div slot="footer"> <el-button @click="visible = false">取消</el-button> <el-button type="primary" @click="handleConfirm">确定</el-button> </div> </el-dialog> //js中 data() { return { visible: false }; }, methods: { handleClose(done) { this.$confirm('确定关闭?') .then(_ => { done(); }) .catch(_ => {}); } handleConfirm() { this.visible = false; this.$message({ type: 'success', message: '点击了确定按钮' }); } } ``` 在el-dialog中使用了`before-close`属性,该属性为关闭事件的回调函数。在这个回调函数中,可以调用一个函数来做关闭前的逻辑处理。可以看到,在handleClose函数中,使用了Vue.js框架的$confirm功能,询问用户是否确定关闭。用户在弹框中的选择最终会返回一个promise对象.then中执行done()方法关闭弹框,catch里面不关后台做取消该Promise方法。 2.通过修改data中的visible状态,关闭dialog并执行回调 ```javascript <el-dialog :visible.sync="dialogVisible" :before-close="beforeClose"> <span slot="title">提示</span> <p>是否关闭弹框?</p> <div slot="footer"> <el-button type="primary" @click="cancel">取消</el-button> <el-button type="warning" @click="sure">确定</el-button> </div> </el-dialog> //js中 export default { data() { return { dialogVisible: false }; }, methods: { cancel() { this.dialogVisible = false; }, sure() { this.dialogVisible = false; }, beforeClose(done) { this.$confirm('确认关闭?') .then(_ => { done(); }) .catch(_ => {}); } } }; ``` 在el-dialog的`visible.sync`属性中,使用了Vue.js框架的双向数据绑定功能,将该属性绑定到了data中的dialogVisible变量上。在dialog的footer中的按钮绑定了两个方法`cancel`和`sure`,通过修改dialogVisible的值来控制关闭或者打开dialog。在el-dialog中使用了`before-close`属性,该属性使用done回调,done回调是一个函数,这个函数可以在弹框关闭后执行,这里可以触发回调逻辑处理。 总之,关闭回调函数的实现方法有很多,主要使用Vue.js框架中各种属性和方法进行处理即可。具体可根据项目需要进行调整和实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值